本文实例为大家分享了Jquery Easyui选项卡组件的实现代码，供大家参考，具体内容如下
加载方式
Class加载
JS调用加载
Box" style="width: 400px;height: 250px">
属性列表
事件列表
Box').tabs({
// 在 ajax 选项卡面板加载完远程数据的时候触发。
onLoad : function (pannel) {
alert(panel);
},// 用户在选择一个选项卡面板的时候触发
onSelect : function (title,index) {
alert(title + '|' + index);
},// 用户在取消选择一个选项卡面板的时候触发。
// (选择另一个时，先触发上一个的此方法，再触发下一个的onSelect方法)
onUnselect : function (title,// 在选项卡面板关闭的时候触发，返回false 取消关闭操作
onBeforeClose : function (title,index) {
alert(title + '|' + index);
return false;
},// 在关闭一个选项卡面板的时候触发
onClose : function (title,// 在添加一个新选项卡面板的时候触发
onAdd : function (title,// 在更新一个选项卡面板的时候触发
onUpdate : function (title,// 在右键点击一个选项卡面板的时候触发
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);
//可以使用$.fn.tabs.defaults 重写默认值对象。
$.fn.tabs.defaults.border = false;
