# 加载方式 ## Class加载 ``` <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> ``` ## JS调用加载 ``` <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> ``` # 属性列表 | 属性名| 值 | 说明| | --- | --- | | width | number | 选项卡容器宽度。默认值 auto。| | height| number| 选项卡容器高度。默认值 auto。| | plain| boolean| 设置为 true 时，将不显示控制面板背景。默认值 false。| | fit | boolean| 设置为 true 时，选项卡的大小将铺满它所在的容器。默认值 false。| | border | boolean| 设置为 true 时，显示选项卡容器边框。默认值 true。| | scrollIncrement| number| 选项卡滚动条每次滚动的像素值。默认值100。| | scrollDuration | number| 每次滚动动画持续的时间，单位：毫秒。默认值400。| | tools| array,selector| 工具栏添加在选项卡面板头的左侧或右侧。可用的值有：1. 一个工具菜单数组，每个工具选项都和 linkbutton 相同。2. 一个指向```<div/>```容器工具菜单的选择器。默认值null。| | toolPosition| string| 工具栏位置。可用值：'left','right'。默认值 right。| | tabPosition| string| 选 项 卡 位 置 。 可 用 值 ：'top','bottom','left','right'。默认值：top。| | headerWidth| number| 选项卡标题宽度，在 tabPosition 属性设置为'left'或'right'的时候才有效。默认值：150。| | tabWidth | number| 标签条的宽度。默认值：auto。| | tabHeight| number | 标签条的高度。默认值：27。| | selected| number | 初始化选中一个 tab 页。默认值：0。| | showHeader | boolean| 设置为 true 时，显示 tab 页标题。默认值：true。| # 事件列表 | 事件名 | 传参 | 说明 | | --- | --- | | onLoad| panel| 在 ajax 选项卡面板加载完远程数据的时候触发。| | onSelect | title,index| 用户在选择一个选项卡面板的时候触发。| | onUnselect| title,index| 用户在取消选择一个选项卡面板的时候触发。| | onBeforeClose| title,index| 在选项卡面板关闭的时候触发，返回false 取消关闭操作。下面的例子展示了在关闭选项卡面板之前以何种方式显示确认对话框。| | onClose | title,index | 在用户关闭一个选项卡面板的时候触发。| | onAdd | title,index | 在添加一个新选项卡面板的时候触发。| | onUpdate | title,index | 在更新一个选项卡面板的时候触发。| | onContextMenu | e,title,index | 在右键点击一个选项卡面板的时候触发。| *** ``` $(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); } }) ; }); ``` # 方法列表 | 方法名 | 参数 | 说明 | | --- | --- | | options | none | 返回选项卡属性。| | tabs | none | 返回所有选项卡面板。| | resize | none | 调整选项卡容器大小和布局。| | add | options | 添加一个新选项卡面板，选项参数是一个配置对象，查看选项卡面板属性的更多细节。在添加一个新选项卡面板的时候它将变成可选的。添加一个非选中状态的选项卡面板时，记得设置'selected'属性为 false。| | close | which | 关闭一个选项卡面板，'which'参数可以是选项卡面板的标题或者索引，以指定要关闭的面板。| | getTab | which | 获取指定选项卡面板，'which'参数可以是选项卡面板的标题或者索引。| | getTabIndex | tab | 获取指定选项卡面板的索引。| | getSelected | none | 获取选择的选项卡面板。下面的例子展示了如何获取选择的选项卡面板索引。| | select | which | 选择一个选项卡面板，'which'参数可以是选项卡面板的标题或者索引。| | unselect | which | 取消选择一个选项卡面板，'which'参数可以是选项卡面板的标题或者索引。| | showHeader | none | 显示选项卡的标签头。| | hideHeader | none | 隐藏选项卡的标签头。| | exists | which | 表明指定的面板是否存在，'which'参数可以是选项卡面板的标题或索引。| | update | param | 更新指定的选项卡面板，'param'参数包含2个属性：tab：要更新的选项卡面板。| options：面板的属性。| | enableTab | which | 启用指定的选项卡面板，'which'参数可以是选项卡面板的标题或索引。| | disableTab | which | 禁用指定的选项卡面板，'which'参数可以是选项卡面板的标题或索引。| | scrollBy | deltaX | 滚动选项卡标题指定的像素数量，负值则向右滚动，正值则向左滚动。| *** ``` //返回属性对象 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; ```