@author YHC
$.fn.tabs.defaults覆盖默认值
tabs显示一个panel的集合,每一次仅仅只是显示一个tab panel,所有tab panel都有标题和一些小的工具按钮,包含close按钮和其他自定义按钮;
使用示例:
创建示例
创建 tabs
1.创建tabs通过标记;
从标记创建tabs非常简单,我们不需要写任何的javascript代码,记得添加"easyui-panel"样式给div标记,每个tab panel的创建通过子div标记,使用和panel是一样的.
<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">
<div title="Tab1" style="padding:20px;display:none;">
tab1
</div>
<div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">
tab2
</div>
<div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">
tab3
</div>
</div>
2.通过编程的方式创建tabs
现在我们用编程的方式创建tabs,并且捕捉"onSelect"事件;
$('#tt').tabs({
border:false,
onSelect:function(title){
alert(title+' is selected');
}
});
添加一个新的 tab panel
添加一个新的tab panel和小工具,小工具的icon(8*8)放在关闭按钮前面;
// add a new tab panel
$('#tt').tabs('add',{
title:'New Tab',
content:'Tab Body',
closable:true,
tools:[{
iconCls:'icon-mini-refresh',
handler:function(){
alert('refresh');
}
}]
});
得到选中 Tab
// 得到当前选中的tab panel和他的tab对象
var pp = $('#tt').tabs('getSelected');
var tab = pp.panel('options').tab; // 对应的tab对象
属性
| Name | Type | Description | Default |
|---|---|---|---|
| width | number | tab容器的宽度 . | auto |
| height | number | tab容器的高度. | auto |
| plain | boolean | 如果设置True渲染tab 没有背景图片. | false |
| fit | boolean | 如果设置True将设置tabs容器的大小,适应父容器大小. | false |
| border | boolean | True显示tabs容器border. | true |
| scrollIncrement | number | 每次tab滚动按钮被按下时滚动的一个像素值 | 100 |
| scrollDuration | number | 每一个滚动动作持续的时间的毫秒值. | 400 |
| tools | array,selector |
右边的工具栏. 可用值: 1. 一个指定的工具数组, 每个tool的选项和linkbutton相同. 2. 一个选择器指向<div/>包含的工具集合. 代码示例: 使用数组定义工具. $('#tt').tabs({
tools:[{
iconCls:'icon-add',
handler:function(){
alert('add')
}
},{
iconCls:'icon-save',
handler:function(){
alert('save')
}
}]
});
使用一个存在的DOM容器哦定义工具. $('#tt').tabs({
tools:'#tab-tools'
});
<div id="tab-tools">
<a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-add"></a>
<a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-save"></a>
</div>
|
null |
事件
| Name | Parameters | Description |
|---|---|---|
| onLoad | panel | ajax tab panel加载远程服务器端数据结束时候触发. |
| onSelect | title,index | 当用户选中一个tab panel的时候触发. |
| onBeforeClose | title,index |
在tab panel关闭之前触发,该方法返回false将取消关闭动作. 下面的示例展示,如何显示一个confirm对话框在关闭tabpanel关闭之前.
$('#tt').tabs({
onBeforeClose: function(title){
return confirm('Are you sure you want to close ' + title);
}
});
// using the async confirm dialog
$('#tt').tabs({
onBeforeClose: function(title,index){
var target = this;
$.messager.confirm('Confirm','Are you sure you want to close '+title,function(r){
if (r){
var opts = $(target).tabs('options');
var bc = opts.onBeforeClose;
opts.onBeforeClose = function(){}; // allowed to close now
$(target).tabs('close',index);
opts.onBeforeClose = bc; // restore the event function
}
});
return false; // prevent from closing
}
});
|
| onClose | title,index | 当用户关闭一个tab panel的时候触发. |
| onAdd | title,index | 当一个新的tab panel被添加进来的时候触发. |
| onUpdate | title,index | 当一个tab panel更新的时候触发. |
| onContextMenu | e, title,index | 当在一个tab panel上右键的时候触发. |
方法
| Name | Parameter | Description |
|---|---|---|
| options | none | 返回 tab panel 的 options选项. |
| tabs | none | 返回所有的 tab panel对象. |
| resize | none | 调整tab 容器的大小布局. |
| add | options |
添加一个新的tab panel, 这个 options的参数是一个配置对象, 请见tab panel 属性获得更多详细信息. 当添加一个新的tab panel的时候,它将成为当前被选中panel. 添加一个不选中的tab panel,请记住设置 'selected' 属性为false. // 代码示例 添加一个新的补选中的tab panel $('#tt').tabs('add',{
title: 'new tab',
selected: false
//...
});
|
| close | which | 关闭一个 tab panel, 'which' 参数可以是tab panel的title(标题)和index(下标)然后将其关闭. |
| getTab | which | 得到一个特定的 tab panel, 'which'参数可以是tab panel的title(标题)和index(下标) |
| getTabIndex | tab | 得到一个特定的tab panel的下标. |
| getSelected | none |
得到选中的tab panel. 以下示例展示 如果得到当前选择的tab panel的下标.
var tab = $('#tt').tabs('getSelected');
var index = $('#tt').tabs('getTabIndex',tab);
alert(index);//输出下标
|
| select | which | 选中一个 tab panel, 'which' 参数可以是tab panel的title(标题)或者index(下标) . |
| exists | which | 指明如果一个特定的tab panel是存在的, 'which' 参数可以是tab panel的title(标题)或者index(下标). |
| update | param |
更新特定的 tab panel,param 参数包含2个属性: tab: 需要更新的tab panel. options: panel options配置选项. 示例代码: //更新选择的panel的内容和标题
var tab = $('#tt').tabs('getSelected'); //得到选中的panel
$('#tt').tabs('update', {
tab: tab,
options: {
title: 'New Title',
href: 'get_content.php' // 请求新的内容的URL
}
});
|
| enableTab | which |
启用一个特定的 tab panel,'which' 参数可以是tab panel的title(标题)或者是index(下标). 这个方法从1.3版本以后可用.
示例代码: $('#tt').tabs('enableTab', 1); //启用第二个tab panel
$('#tt').tabs('enableTab', 'Tab2');//启用标题为'Tab2'的tab panel
|
| disableTab | which |
禁用特定的 tab panel, 'which' 参数可以是tab panel的title(标题)或者index(下标).这个方法从1.3版本开始可用.
示例代码: $('#tt').tabs('disableTab', 1); //禁用第二个tab panel.
|
Tab Panel
tab panel属性是定义在panel组件里,下面是一些常见的属性:
| Name | Type | Description | Default |
|---|---|---|---|
| id | string | tab panel的id属性. | null |
| title | string | tab panel 标题文本. | |
| content | string | tab panel 内容. | |
| href | string | 一个URL加载远程数据内容来填充tab panel. | null |
| cache | boolean | True 将缓存 tab panel, 当href被设置时该选项有效. | true |
| iconCls | string | 一个icon 的css样式显示在tab panel标题上. | null |
| width | number | tab panel宽度. | auto |
| height | number | tab panel高度. | auto |
一些新增的属性.
| Name | Type | Description | Default |
|---|---|---|---|
| closable | boolean | 当设置为 true时, tab panel将显示一个可关闭按钮,可以点击关闭tab panel. | false |
| selected | boolean | 当设置为true时, tab panel将被选中. | false |
以上如果有错误信息请指出,thanks!