tabs(选项卡) · easyUI

### Tabs（选项卡）使用$.fn.tabs.defaults重写默认值对象。选项卡显示一批面板。但在同一个时间只会显示一个面板。每个选项卡面板都有头标题和一些小的按钮工具菜单，包括关闭按钮和其他自定义按钮。 ![](https://box.kancloud.cn/2016-07-19_578d9134cd561.png) #### #### 依赖关系 - [panel](#) - [linkbutton](#) #### #### 使用案例 ##### 创建面板 1. 通过标签创建选项卡通过标签可以更容易的创建选项卡，我们不需要写任何Javascript代码。只需要给<div/>标签添加一个类ID'easyui-tabs'。每个选项卡面板都通过子<div/>标签进行创建，用法和panel(面板)相同。 1. **<div** id="tt" class="easyui-tabs" style="width:500px;height:250px;"**>** 1. **<div** title="Tab1" style="padding:20px;display:none;"**>** 1. tab1 1. **</div>** 1. **<div** title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;"**>** 1. tab2 1. **</div>** 1. **<div** title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;"**>** 1. tab3 1. **</div>** 1. **</div>** <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. 通过Javascript创建选项卡下面的代码演示如何使用Javascript创建选项卡，当该选项卡被选择时将会触发'onSelect'事件。 1. $('#tt').tabs({ 1. border:false, 1. onSelect:function(title){ 1. alert(title+' is selected'); 1. } 1. }); $('#tt').tabs({ border:false, onSelect:function(title){ alert(title+' is selected'); } }); ##### 添加新的选项卡面板添加一个新的包含小工具菜单的选项卡面板，小工具菜单图标(8x8)被放置在关闭按钮之前。 1. // add a new tab panel 1. $('#tt').tabs('add',{ 1. title:'New Tab', 1. content:'Tab Body', 1. closable:true, 1. tools:[{ 1. iconCls:'icon-mini-refresh', 1. handler:function(){ 1. alert('refresh'); 1. } 1. }] 1. }); // 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'); } }] }); ##### 获取选择的选项卡 1. // get the selected tab panel and its tab object 1. var pp = $('#tt').tabs('getSelected'); 1. var tab = pp.panel('options').tab; // the corresponding tab object // get the selected tab panel and its tab object var pp = $('#tt').tabs('getSelected'); var tab = pp.panel('options').tab; // the corresponding tab object #### 属性 <table class="doc-table"><tbody><tr><th><strong>属性名</strong></th> <th><strong>属性值类型</strong></th> <th><strong>描述</strong></th> <th><strong>默认值</strong></th></tr><tr><td>width</td> <td>number</td> <td>选项卡容器宽度。</td> <td>auto</td></tr><tr><td>height</td> <td>number</td> <td>选项卡容器高度。</td> <td>auto</td></tr><tr><td>plain</td> <td>boolean</td> <td>设置为true时，将不显示控制面板背景。</td> <td>false</td></tr><tr><td>fit</td> <td>boolean</td> <td>设置为true时，选项卡的大小将铺满它所在的容器。</td> <td>false</td></tr><tr><td>border</td> <td>boolean</td> <td>设置为true时，显示选项卡容器边框。</td> <td>true</td></tr><tr><td>scrollIncrement</td> <td>number</td> <td>选项卡滚动条每次滚动的像素值。</td> <td>100</td></tr><tr><td>scrollDuration</td> <td>number</td> <td>每次滚动动画持续的时间，单位：毫秒。</td> <td>400</td></tr><tr><td>tools</td> <td>array,selector</td> <td>工具栏添加在选项卡面板头的左侧或右侧。可用的值有：<br/>1. 一个工具菜单数组，每个工具选项都和linkbutton相同。<br/>2. 一个指向<div/>容器工具菜单的选择器。<br/><br/>代码示例： <p>通过数组定义工具菜单。</p><pre>$('#tt').tabs({ tools:[{ iconCls:'icon-add', handler:function(){ alert('添加') } },{ iconCls:'icon-save', handler:function(){ alert('保存') } }] }); </pre> <p>通过存在的DOM容器定义工具菜单。</p><pre>$('#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> </pre></td> <td>null</td></tr><tr><td>toolPosition</td> <td>string</td> <td>工具栏位置。可用值：'left','right'。<strong><font color="#ff0000">（该属性自1.3.2版开始可用）</font></strong></td> <td>right</td></tr><tr><td>tabPosition</td> <td>string</td> <td>选项卡位置。可用值：'top','bottom','left','right'。<strong><font color="#ff0000">（该属性自1.3.2版开始可用）</font></strong></td> <td>top</td></tr><tr><td>headerWidth</td> <td>number</td> <td>选项卡标题宽度，在tabPosition属性设置为'left'或'right'的时候才有效。<strong><font color="#ff0000">（该属性自1.3.2版开始可用）</font></strong></td> <td>150</td></tr><tr><td>tabWidth</td> <td>number</td> <td>标签条的宽度。<strong><font color="#ff0000">（该属性自1.3.4版开始可用）</font></strong></td> <td>auto</td></tr><tr><td>tabHeight</td> <td>number</td> <td>标签条的高度。<strong><font color="#ff0000">（该属性自1.3.4版开始可用）</font></strong></td> <td>27</td></tr><tr><td>selected</td> <td>number</td> <td>初始化选中一个tab页。<strong><font color="#ff0000">（该属性自1.3.5版开始可用）</font></strong></td> <td>0</td></tr><tr><td>showHeader</td> <td>boolean</td> <td>设置为true时，显示tab页标题。<strong><font color="#ff0000">（该属性自1.3.5版开始可用）</font></strong></td> <td>true</td></tr></tbody></table> #### #### 事件 | **事件名** | **事件参数** | **描述** | |-----|-----|-----| | onLoad | panel | 在ajax选项卡面板加载完远程数据的时候触发。 | | onSelect | title,index | 用户在选择一个选项卡面板的时候触发。 | | onUnselect | title,index | 用户在取消选择一个选项卡面板的时候触发。**（该属性自1.3.5版开始可用）** | | onBeforeClose | title,index | 在选项卡面板关闭的时候触发，返回false取消关闭操作。下面的例子展示了在关闭选项卡面板之前以何种方式显示确认对话框。 ~~~ $('#tt').tabs({ onBeforeClose: function(title){ return confirm('您确认想要关闭 ' + title); } }); // 使用异步确认对话框 $('#tt').tabs({ onBeforeClose: function(title,index){ var target = this; $.messager.confirm('确认','你确认想要关闭'+title,function(r){ if (r){ var opts = $(target).tabs('options'); var bc = opts.onBeforeClose; opts.onBeforeClose = function(){}; // 允许现在关闭 $(target).tabs('close',index); opts.onBeforeClose = bc; // 还原事件函数 } }); return false; // 阻止关闭 } }); ~~~ | | onClose | title,index | 在用户关闭一个选项卡面板的时候触发。 | | onAdd | title,index | 在添加一个新选项卡面板的时候触发。 | | onUpdate | title,index | 在更新一个选项卡面板的时候触发。 | | onContextMenu | e, title,index | 在右键点击一个选项卡面板的时候触发。 | #### #### 方法 <table class="doc-table"><tbody><tr><th><strong>方法名</strong></th> <th><strong>方法参数</strong></th> <th><strong>描述</strong></th></tr><tr><td>options</td> <td>none</td> <td>返回选项卡属性。</td></tr><tr><td>tabs</td> <td>none</td> <td>返回所有选项卡面板。</td></tr><tr><td>resize</td> <td>none</td> <td>调整选项卡容器大小和布局。</td></tr><tr><td>add</td> <td>options</td> <td>添加一个新选项卡面板，选项参数是一个配置对象，查看选项卡面板属性的更多细节。在添加一个新选项卡面板的时候它将变成可选的。<br/>添加一个非选中状态的选项卡面板时，记得设置'selected'属性为false。<pre>// 添加一个未选中状态的选项卡面板 $('#tt').tabs('add',{ title: '新选项卡面板', selected: false //... }); </pre></td></tr><tr><td>close</td> <td>which</td> <td>关闭一个选项卡面板，'which'参数可以是选项卡面板的标题或者索引，以指定要关闭的面板。</td></tr><tr><td>getTab</td> <td>which</td> <td>获取指定选项卡面板，'which'参数可以是选项卡面板的标题或者索引。</td></tr><tr><td>getTabIndex</td> <td>tab</td> <td>获取指定选项卡面板的索引。</td></tr><tr><td>getSelected</td> <td>none</td> <td>获取选择的选项卡面板。下面的例子展示了如何获取选择的选项卡面板索引。<pre>var tab = $('#tt').tabs('getSelected'); var index = $('#tt').tabs('getTabIndex',tab); alert(index); </pre></td></tr><tr><td>select</td> <td>which</td> <td>选择一个选项卡面板，'which'参数可以是选项卡面板的标题或者索引。</td></tr><tr><td>unselect</td> <td>which</td> <td>取消选择一个选项卡面板，'which'参数可以是选项卡面板的标题或者索引。<strong><font color="#ff0000">（该方法自1.3.5版开始可用）</font></strong></td></tr><tr><td>showHeader</td> <td>none</td> <td>显示选项卡的标签头。<strong><font color="#ff0000">（该方法自1.3.5版开始可用）</font></strong></td></tr><tr><td>hideHeader</td> <td>none</td> <td>隐藏选项卡的标签头。<strong><font color="#ff0000">（该方法自1.3.5版开始可用）</font></strong></td></tr><tr><td>exists</td> <td>which</td> <td>表明指定的面板是否存在，'which'参数可以是选项卡面板的标题或索引。</td></tr><tr><td>update</td> <td>param</td> <td>更新指定的选项卡面板，'param'参数包含2个属性：<br/>tab：要更新的选项卡面板。<br/>options：面板的属性。<br/><br/>代码示例： <pre>// 更新选择的面板的新标题和内容 var tab = $('#tt').tabs('getSelected'); // 获取选择的面板 $('#tt').tabs('update', { tab: tab, options: { title: '新标题', href: 'get_content.php' // 新内容的URL } }); </pre><pre>// 调用 'refresh' 方法更新选项卡面板的内容 var tab = $('#tt').tabs('getSelected'); // 获取选择的面板tab.panel('refresh', 'get_content.php'); </pre></td></tr><tr><td>enableTab</td> <td>which</td> <td>启用指定的选项卡面板，'which'参数可以是选项卡面板的标题或索引。<strong><font color="#ff0000">（该方法自1.3版开始可用）</font></strong> <p>代码示例：</p><pre>$('#tt').tabs('enableTab', 1); // 启用第二个选项卡面板 $('#tt').tabs('enableTab', 'Tab2'); // 启用标题为Tab2的选项卡面板 </pre></td></tr><tr><td>disableTab</td> <td>which</td> <td>禁用指定的选项卡面板，'which'参数可以是选项卡面板的标题或索引。<strong><font color="#ff0000">（该方法自1.3版开始可用）</font></strong> <p>代码示例：</p> <p><font color="#008000">$('#tt').tabs('disableTab', 1); // 禁用第二个选项卡面板<br/></font></p></td></tr><tr><td>scrollBy</td> <td>deltaX</td> <td>滚动选项卡标题指定的像素数量，负值则向右滚动，正值则向左滚动。<strong><font color="#ff0000">（该方法自1.3版开始可用）</font></strong> <p>代码示例：</p><pre>// 滚动选项卡标题到左边$('#tt').tabs('scroll', 10);</pre></td></tr></tbody></table> #### #### 选项卡面板选项卡面板属性与[panel](#)组件属性的定义类似，下面是2个组件的一些公共属性。 | **属性名** | **属性值类型** | **描述** | **默认值** | |-----|-----|-----|-----| | id | string | 选项卡面板的ID属性。 | null | | title | string | 选项卡面板的标题文本。 | | | content | string | 选项卡面板的内容。 | | | href | string | 从URL加载远程数据内容填充到选项卡面板。 | null | | cache | boolean | 如果为true，在'href'属性设置了有效值的时候缓存选项卡面板。 | true | | iconCls | string | 定义了一个图标的CSS类ID显示到选项卡面板标题。 | null | | width | number | 选项卡面板宽度。 | auto | | height | number | 选项卡面板高度。 | auto | | collapsible | boolean | 如果为true，则允许选项卡摺叠。 | false | 下面的是选项卡面板新增且独有的属性。 | **属性名** | **属性值类型** | **描述** | **默认值** | |-----|-----|-----|-----| | closable | boolean | 在设置为true的时候，选项卡面板将显示一个关闭按钮，在点击的时候会关闭选项卡面板。 | false | | selected | boolean | 在设置为true的时候，选项卡面板会被选中。 | false |