EasyUI-标签(Tabs)用法

用法示例

创建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 组件里，下面是一些常用的特性。

一些附加的特性

jQuery
EasyUI 标签(Tabs)用法

[ad#content]这里介绍一下标签(Tabs)用法以及参数，首先我们可以先看一下面板功能可以做什么，下图就是一个面板的实例。

同样我们来通过一个小例子来学习一下这些参数，HTML代码如下：

1       
<div
id="tt" 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"
icon="icon-reload" closable="true"
style="padding:20px;display:none;">

9       
        tab3

10   
    </div>

11   
</div>

然后按照《jQuery EasyUI框架使用文档》包含必要文件后，只要在$(function(){ }); 里添加一行代码来生成面板：

12   
$(‘#tt‘).tabs(options);

也可以给面板函数添加一些参数:

13   
$(‘#tt‘).tabs(‘add‘,{

14   
    title:‘New Tab‘,

15   
    content:‘Tab Body‘,

16   
    closable:true

17   
});

参数

事件

方法

标签面板属性

总结发布jQuery
EasyUI 中文API—Layout(Tabs)

Tabs【标签】

创建一个tab标签

使用说明

使用到的头文件：easyui.css、icon.css、jquery-1.4.2.min.js、jquery.easyui.min.js

HTML代码

1        
<div id="tt" 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" icon="icon-reload" closable="true" style="padding:20px;display:none;">

9        
        tab3

10          </div>

11      </div>

JQuery代码

12      //创建一个标签容器

13      $(‘#tt‘).tabs(options);

14

15      //增加一个tab面板

16      $(‘#tt‘).tabs(‘add‘,{

17          title:‘New Tab‘,

18          content:‘Tab Body‘,

19          closable:true

20      });

Tabs Container特性说明

Tabs Container事件说明

Tabs Container方法说明

Tab Panel特性说明

有些觉得翻译的牵强，肯定也有错的地方，谢谢指出来。