jQuery EasyUI API 中文文档 - 标签页/选项卡（Tabs）

Tabs 标签页/选项卡

用$.fn.tabs.defaults重写defaults。

依赖

• panel
• linkbutton

用法示例

创建tabs

1. 经由标记创建Tabs

从标记创建Tabs更容易，我们不需要写任何JavaScript代码。记住把 'easyui-tabs' 类添加到<div/>标记，每个tab panel 经由子<div/>标记被创建，其用法与Panel一样。

1. <div id="tt" class="easyui-tabs" style="width:500px;height:250px;">

2. <div title="Tab1" style="padding:20px;display:none;">

3.         tab1  

4. </div>

5. <div title="Tab2" closable="true" style="overflow:auto;padding:20px;display:none;">

6.         tab2  

7. </div>

8. <div title="Tab3" iconCls="icon-reload" closable="true" style="padding:20px;display:none;">

9.         tab3  

10. </div>

11. </div>

2. 编程创建Tabs

现在我们编程创建 Tabs，我们同时捕捉 'onSelect' 事件。

1. $('#tt').tabs({  

2.     border:false,  

3.     onSelect:function(title){  

4.         alert(title+' is selected');  

5.     }  

6. }); 

增加新的 tab panel

1. // 增加一个新的 tab panel

2. $('#tt').tabs('add',{  

3.     title:'New Tab',  

4.     content:'Tab Body',  

5.     closable:true

6. }); 

获取选中的 Tab

1. // 获取选中的 tab panel 和它的 tab 对象 

2. var pp = $('#tt').tabs('getSelected');  

3. var tab = pp.panel('options').tab;    // 相应的 tab 对象 

特性

事件

方法

Tab Panel

Tab panel 特性被定义在 panel 组件里，下面是一些常用的特性。

一些附加的特性