easyUI Tabs

@author YHC

$.fn.tabs.defaults覆盖默认值

tabs显示一个panel的集合,每一次仅仅只是显示一个tab panel,所有tab panel都有标题和一些小的工具按钮,包含close按钮和其他自定义按钮;

使用示例:

1.创建tabs通过标记;

从标记创建tabs非常简单,我们不需要写任何的javascript代码,记得添加"easyui-panel"样式给div标记,每个tab panel的创建通过子div标记,使用和panel是一样的.

2.通过编程的方式创建tabs

现在我们用编程的方式创建tabs,并且捕捉"onSelect"事件;

添加一个新的tab panel和小工具,小工具的icon(8*8)放在关闭按钮前面;

Name

Type

Description

Default

width

number

tab容器的宽度 .

auto

height

tab容器的高度.

plain

boolean

如果设置True渲染tab 没有背景图片.

false

fit

如果设置True将设置tabs容器的大小,适应父容器大小.

border

True显示tabs容器border.

true

scrollIncrement

每次tab滚动按钮被按下时滚动的一个像素值 

100

scrollDuration

每一个滚动动作持续的时间的毫秒值.

400

tools

array,selector

右边的工具栏. 可用值:

1. 一个指定的工具数组, 每个tool的选项和linkbutton相同.

2. 一个选择器指向<div/>包含的工具集合.

代码示例:

使用数组定义工具.

使用一个存在的DOM容器哦定义工具.

null

Parameters

onLoad

panel

ajax tab panel加载远程服务器端数据结束时候触发.

onSelect

title,index

当用户选中一个tab panel的时候触发.

onBeforeClose

在tab panel关闭之前触发,该方法返回false将取消关闭动作. 下面的示例展示,如何显示一个confirm对话框在关闭tabpanel关闭之前.

onClose

当用户关闭一个tab panel的时候触发.

onAdd

当一个新的tab panel被添加进来的时候触发.

onUpdate

当一个tab panel更新的时候触发.

onContextMenu

e, title,index

当在一个tab panel上右键的时候触发.

Parameter

options

none

返回 tab panel 的 options选项.

tabs

返回所有的 tab panel对象.

resize

调整tab 容器的大小布局.

add

添加一个新的tab panel, 这个 options的参数是一个配置对象, 请见tab panel 属性获得更多详细信息. 当添加一个新的tab panel的时候,它将成为当前被选中panel. 

添加一个不选中的tab panel,请记住设置 'selected' 属性为false.

close

which

关闭一个 tab panel, 'which' 参数可以是tab panel的title(标题)和index(下标)然后将其关闭.

getTab

得到一个特定的 tab panel,  'which'参数可以是tab panel的title(标题)和index(下标)

getTabIndex

tab

得到一个特定的tab panel的下标.

getSelected

得到选中的tab panel. 以下示例展示 如果得到当前选择的tab panel的下标.

select

选中一个 tab panel, 'which' 参数可以是tab panel的title(标题)或者index(下标) .

exists

指明如果一个特定的tab panel是存在的, 'which' 参数可以是tab panel的title(标题)或者index(下标).

update

param

更新特定的 tab panel,param 参数包含2个属性:

tab: 需要更新的tab panel.

options: panel options配置选项.

示例代码:

enableTab

启用一个特定的 tab panel,'which' 参数可以是tab panel的title(标题)或者是index(下标). 这个方法从1.3版本以后可用.

disableTab

禁用特定的 tab panel, 'which' 参数可以是tab panel的title(标题)或者index(下标).这个方法从1.3版本开始可用.

tab panel属性是定义在panel组件里,下面是一些常见的属性:

id

string

tab panel的id属性.

title

tab panel 标题文本.

content

tab panel 内容.

href

一个URL加载远程数据内容来填充tab panel.

cache

True 将缓存 tab panel, 当href被设置时该选项有效.

iconCls

一个icon 的css样式显示在tab panel标题上.

 tab panel宽度.

tab panel高度.

一些新增的属性.

closable

当设置为 true时, tab panel将显示一个可关闭按钮,可以点击关闭tab panel.

selected

当设置为true时, tab panel将被选中.



以上如果有错误信息请指出,thanks!