Jquery Easyui选项卡组件Tab使用详解（10）

<div class="easyui-tabs" style="width: 400px;height: 250px">  <div title="Tab1" data-options="closable:true">   tab1  </div>  <div title="Tab2" data-options="closable:true">   tab2  </div>  <div title="Tab3" data-options="iconCls:'icon-reload',closable:true">   tab3  </div></div>

 <div id="box" style="width: 400px;height: 250px">  <div title="Tab1" data-options="closable:true">   tab1  </div>  <div title="Tab2" data-options="closable:true">   tab2  </div>  <div title="Tab3" data-options="iconCls:'icon-reload',closable:true">   tab3  </div> </div> <script>  $(function () {   $('#box').tabs({    // 选项卡容器宽度    width : 500,    // 项卡容器高度    height: 400,    // 是否不显示控制面板背景。    plain : false,    // 选项卡是否将铺满它所在的容器    fit : false,    // 是否显示选项卡容器边框    border : true,    // 选项卡滚动条每次滚动的像素值    scrollIncrement : 200,    // 每次滚动动画持续的时间    scrollDuration : 400,    // 工具栏添加在选项卡面板头的左侧或右侧    tools:[{     iconCls : 'icon-add',     handler : function () {      alert('添加!');     },    }],    // 工具栏位置    toolPosition : 'left',    // 选项卡位置    tabPosition : 'left',    // 选项卡标题宽度，在 tabPosition 属性设置为'left'或'right'的时候才有效    headerWidth : 300,    // 标签条的宽度    tabWidth : 250,    // 标签条的高度    tabHeight : 25,    // 初始化选中一个 tab 页, 从0开始    selected : 2,    // 是否显示 tab 页标题    showHeader: true   }) ;  }); </script>

 $(function () {   $('#box').tabs({    // 在 ajax 选项卡面板加载完远程数据的时候触发。    onLoad : function (pannel) {     alert(panel);    },    // 用户在选择一个选项卡面板的时候触发    onSelect : function (title,index) {     alert(title + '|' + index);    },    // 用户在取消选择一个选项卡面板的时候触发。    // (选择另一个时，先触发上一个的此方法，再触发下一个的onSelect方法)    onUnselect : function (title, index) {     alert(title + '|' + index);    },    // 在选项卡面板关闭的时候触发，返回false 取消关闭操作    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);//可以使用$.fn.tabs.defaults 重写默认值对象。$.fn.tabs.defaults.border = false;