Tabs( 选项卡)

一． 加载方式

//class 加载方式
<div id="box" class="easyui-tabs" style="width:500px;height:250px;">

<div title="Tab1">
tab1
</div>

<div title="Tab2" data-options="closable:true">
tab2
</div>

<div title="Tab3"
data-options="iconCls:'icon-reload',closable:true">
tab3
</div>
</div>

//JS 加载调用
$('#box').tabs({
//...
});

二．属性列表

//属性设置
$('#box').tabs({
width : 500,
height : 300,
plain : true,
fit : true,
border : true,
scrollIncrement : 1,
scrollDuration : 1000,
tools : [{
iconCls : 'icon-add',
handler : function () {
alert('添加!');
},

},{}],
tools : '#tab-tools',
toolPosition : 'left',
tabPosition : 'left',
headerWidth : 300,
tabWidth : 100,
tabHeight : 50,
selected : 1,
showHeader : false,
});
<div id="tt">
<a class="icon-add" onclick="javascript:alert('add')"></a>
<a class="icon-edit" onclick="javascript:alert('edit')"></a>
<a class="icon-cut" onclick="javascript:alert('cut')"></a>
<a class="icon-help" onclick="javascript:alert('help')"></a>
</div>　　

三．事件列表

$('#box').tabs({
onLoad : function (panel) {
alert(panel);
},
onSelect : function (title,index) {
alert(title + '|' + index);

},
onUnselect : function (title, index) {
alert(title + '|' + index);
},
onBeforeClose : function (title, index) {
alert(title + '|' + index);
return false;
},
onClose : function (title, index) {
alert(title + '|' + index);
},
onAdd : function (title, index) {
alert(title + '|' + index);
},
onUpdate : function (title, index) {
alert(title + '|' + index);
},
onContextMenu : function (e, title, index) {
alert(e + '|' + title + '|' + index);
}
});

三．方法列表

//返回属性对象
console.log($('#box').tabs('options'));
//返回所有选项卡面板
console.log($('#box').tabs('tabs'));
//新增一个选项卡
$('#box').tabs('add', {
title : '新面板',
selected : false,
});
//选择指定下标的选项卡
$('#box').tabs('select', 1);
//取消选择指定下标的选项卡
$('#box').tabs('select', 0);
//关闭指定下标的选项卡
$('#box').tabs('close', 1);
//重新调整面板布局和大小
$('#box').tabs('resize');

//指定下标的选项卡是否存在
console.log($('#box').tabs('exists', 4));
//获取指定下标的选项卡
console.log($('#box').tabs('getTab', 1));
//获取指定面板的索引
console.log($('#box').tabs('getTabIndex','#tab2'));
//获取被选定的选项卡
console.log($('#box').tabs('getSelected'));
//显示选项卡标题
$('#box').tabs('showHeader');
//隐藏选项卡标题
$('#box').tabs('hideHeader');
//更新一个选项卡
$('#box').tabs('update', {
tab : $('#tab2'),
options : {
Title : '新标题',
}
});
//禁用指定下标或标题的选项卡
$('#box').tabs('disableTab', 1);
$('#box').tabs('disableTab', 'Tab2');
//启用指定下标或标题的选项卡
$('#box').tabs('enableTab', 1);
$('#box').tabs('enableTab', 'Tab2');
//滚动选项卡标题，正值向左，负值向右
$('#box').tabs('scrollBy', 100);
PS：我们可以使用$.fn.tabs.defaults 重写默认值对象。
$.fn.tabs.defaults.border = false;
五．选项卡面板
选项卡面板继承了 panel 一些属性，以下是公共属性。