EasyUI 标签页

   Tabs 有多个可以动态地添加或移除的面板（panel）。 您可以使用 Tabs 来在相同的页面上显示不同的实体。Tabs 一次仅仅显示一个面板（panel），每个面板（panel）都有标题、图标和关闭按钮。 当 Tabs 被选中时，将显示对应的面板（panel）的内容。

1、用法

（1）、通过标记创建选项卡（Tabs）

   从标记创建选项卡（Tabs）更容易，我们不需要写任何 JavaScript 代码。记住把 'easyui-tabs' class 添加到 <div> 标记。每个选项卡面板（tab panel）通过子 <div> 标记被创建，其用法与面板（panel）一样。

<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）、编程创建选项卡（Tabs）

现在我们编程创建选项卡（Tabs），我们同时捕捉 'onSelect' 事件。

$('#tt').tabs({    border:false,    onSelect:function(title){alert(title+' is selected');    }});

（3）、添加新的选项卡面板（tab panel）

    通过迷你工具添加一个新的选项卡面板（tab panel），迷你工具图标（8x8）放置在关闭按钮前。

// 添加一个新的选项卡面板（tab panel）$('#tt').tabs('add',{    title:'New Tab',    content:'Tab Body',    closable:true,    tools:[{iconCls:'icon-mini-refresh',handler:function(){alert('refresh');}    }]});

（4）、获取选中的选项卡（Tab）

// 获取选中的选项卡面板（tab panel）和它的选项卡（tab）对象var pp = $('#tt').tabs('getSelected');var tab = pp.panel('options').tab; // 相应的选项卡（tab）对象

2、属性

名称

类型

描述

默认值

width

number

选项卡（Tabs）容器的宽度。

auto

height

number

选项卡（Tabs）容器的高度。

auto

plain

boolean

当设置为 true 时，就不用背景容器图片来呈现 tab 条。

false

fit

boolean

当设置为 true 时，就设置选项卡（Tabs）容器的尺寸以适应它的父容器。

false

border

boolean

当设置为 true 时，就显示选项卡（Tabs）容器边框。

true

scrollIncrement

number

每按一次 tab 滚动按钮，滚动的像素数。

100

scrollDuration

number

每一个滚动动画应该持续的毫秒数。

400

tools

array,selector

放置在头部的左侧或右侧的工具栏，可能的值：
1、数组，指示工具组，每个工具选项都和链接按钮（Linkbutton）一样。
2、选择器，指示包含工具的 <div>。

null

toolPosition

string

工具栏位置。可能的值：'left'、'right'。该属性自版本 1.3.2 起可用。

right

tabPosition

string

选项卡（tab）位置。可能的值：'top'、'bottom'、'left'、'right'。

该属性自版本 1.3.2 起可用。

top

headerWidth

number

选项卡（tab）头部宽度，只有当 tabPosition 设置为 'left' 或 'right' 

时才有效。该属性自版本 1.3.2 起可用。

150

tabWidth

number

tab 条的宽度。该属性自版本 1.3.4 起可用。

auto

tabHeight

number

tab 条的高度。该属性自版本 1.3.4 起可用。

27

selected

number

初始化选定的选项卡索引。该属性自版本 1.3.5 起可用。

0

showHeader

boolean

当设置为 true 时，显示选项卡（tab）头部。该属性自版本 1.3.5 起可用。

true

3、事件

名称

参数

描述

onLoad       

panel

当一个 ajax 选项卡面板（tab panel）完成加载远程数据时触发。

onSelect

title,index

当用户选择一个选项卡面板（tab panel）时触发。

onUnselect

title,index

当用户未选择一个选项卡面板（tab panel）时触发。该事件自版本 1.3.5 起可用。

onBeforeClose

title,index

当一个选项卡面板（tab panel）被关闭前触发，返回 false 就取消关闭动作。

onClose

title,index

当用户关闭一个选项卡面板（tab panel）时触发。

onAdd

title,index

当一个新的选项卡面板（tab panel）被添加时触发。

onUpdate

title,index

当一个选项卡面板（tab panel）被更新时触发。

onContextMenu

e, title,index

当一个选项卡面板（tab panel）被右键点击时触发。

4、方法

名称

参数

描述

options

none

返回选项卡（tabs）选项（options）。

tabs

none

返回全部的选项卡面板（tab panel）。

resize

none

调整选项卡（tabs）容器的尺寸并做布局。

add

options

添加一个新的选项卡面板（tab panel），options 参数是一个配置对象，更多详细信息请参见

选项卡面板（tab panel）属性。
当添加一个新的选项卡面板（tab panel）时，它将被选中。
如需添加一个未选中的选项卡面板（tab panel），请记得设置 'selected' 属性为 false。

close

which

关闭一个选项卡面板（tab panel），'which' 参数可以是要被关闭的选项卡面板

（tab panel）的标题（title）或索引（index）。

getTab

which

获取指定的选项卡面板（tab panel），'which' 参数可以是选项卡面板（tab panel）

的标题（title）或索引（index）。

getTabIndex

tab

获取指定的选项卡面板（tab panel）索引。

getSelected

none

获取选中的选项卡面板（tab panel）。下面的实例演示如何获取选中的选项卡面板

（tab panel）的索引。

select

which

选择一个选项卡面板（tab panel），'which' 参数可以是选项卡面板（tab panel）的标题

（title）或索引（index）。

unselect

which

选择一个选项卡面板（tab panel），'which' 参数可以是选项卡面板（tab panel）的标题

（title）或索引（index）。该方法自版本 1.3.5 起可用。

showHeader

none

显示选项卡（tabs）头部。该方法自版本 1.3.5 起可用。

hideHeader

none

隐藏选项卡（tabs）头部。该方法自版本 1.3.5 起可用。

exists

which

指示指定的面板是否已存在，'which' 参数可以是选项卡面板（tab panel）的标题（title）

或索引（index）。

update

param

更新指定的选项卡面板（tab panel），param 参数包含两个属性：
tab：被更新的选项卡面板（tab panel）。
options：面板（panel）的选项（options）。

enableTab

which

启用指定的选项卡面板（tab panel），'which' 参数可以是选项卡面板（tab panel）

的标题（title）或索引（index）。该方法自版本 1.3 起可用。

disableTab

which

禁用指定的选项卡面板（tab panel），'which' 参数可以是选项卡面板（tab panel）

的标题（title）或索引（index）。该方法自版本 1.3 起可用。

scrollBy

deltaX

通过指定的像素数滚动选项卡（tab）头部，负值表示滚动到右边，正值表示滚动到左边。

该方法自版本 1.3.2 起可用。

5、选项卡面板（Tab Panel）

  选项卡面板（tab panel）属性被定义在面板（panel）组件里，下面是一些常用的属性。

名称

类型

描述

默认值

id

string

选项卡面板（tab panel）的 id 属性。

null

title

string

选项卡面板（tab panel）的标题文字。

 

content

string

选项卡面板（tab panel）的内容。

 

href

string

加载远程内容来填充选项卡面板（tab panel）的 URL。

null

cache

boolean

当设置为 true 时，在设定了有效的 href 特性时缓存这个选项卡面板（tab panel）。

true

iconCls

string

显示在选项卡面板（tab panel）标题上的图标的 CSS class。

null

width

number

选项卡面板（tab panel）的宽度。

auto

height

number

选项卡面板（tab panel）的高度。

auto

collapsible

boolean

当设置为 true 时，允许选项卡面板（tab panel）可折叠。

false

一些附加的属性。

名称

类型

描述

默认值

closable 

boolean  

当设置为 true 时，选项卡面板（tab panel）将显示一个关闭按钮，点击它就能关闭这

个选项卡面板（tab panel）。

false

selected

boolean

当设置为 true 时，选项卡面板（tab panel）将被选中。

false

 

6、示例

（1）、基础选项卡

<!DOCTYPE html><html><head><meta charset="UTF-8"><link rel="stylesheet" type="text/css" href="../css/easyui.css"><link rel="stylesheet" type="text/css" href="../css/icon.css"><link rel="stylesheet" type="text/css" href="../css/demo.css"><script type="text/javascript" src="../js/jquery.min.js"></script><script type="text/javascript" src="../js/jquery.easyui.min.js"></script></head><body><h2>Basic Tabs</h2><p>Click tab strip to swap tab panel content.</p><div style="margin:20px 0 10px 0;"></div><div class="easyui-tabs" style="width:700px;height:250px"><div title="About" style="padding:10px"><p style="font-size:14px">jQuery EasyUI framework helps you build your web pages easily.</p><ul><li>easyui is a collection of user-interface plugin based on jQuery.</li><li>easyui provides essential functionality for building modem, interactive, javascript applications.</li><li>using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.</li><li>complete framework for HTML5 web page.</li><li>easyui save your time and scales while developing your products.</li><li>easyui is very easy but powerful.</li></ul></div><div title="My Documents" style="padding:10px"><ul class="easyui-tree" data-options="url:'tree_data1.json',method:'get',animate:true"></ul></div><div title="Help" data-options="iconCls:'icon-help',closable:true" style="padding:10px">This is the help content.</div></div></body></html>

 

（2）、带下拉菜单的选项卡

<!DOCTYPE html><html><head><meta charset="UTF-8"><link rel="stylesheet" type="text/css" href="../css/easyui.css"><link rel="stylesheet" type="text/css" href="../css/icon.css"><link rel="stylesheet" type="text/css" href="../css/demo.css"><script type="text/javascript" src="../js/jquery.min.js"></script><script type="text/javascript" src="../js/jquery.easyui.min.js"></script></head><body><div style="margin:20px 0;"></div><div id="tt" style="width:700px;height:250px"><div title="About" style="padding:10px"><p style="font-size:14px">jQuery EasyUI framework helps you build your web pages easily.</p><ul><li>easyui is a collection of user-interface plugin based on jQuery.</li><li>easyui provides essential functionality for building modem, interactive, javascript applications.</li><li>using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.</li><li>complete framework for HTML5 web page.</li><li>easyui save your time and scales while developing your products.</li><li>easyui is very easy but powerful.</li></ul></div><div title="My Documents" style="padding:10px"><ul class="easyui-tree" data-options="url:'tree_data1.json',method:'get',animate:true"></ul></div><div title="Help" style="padding:10px">This is the help content.</div></div><div id="mm"><div>Welcome</div><div>Help Contents</div><div data-options="iconCls:'icon-search'">Search</div><div>Dynamic Help</div></div><script>$(function(){var p = $('#tt').tabs().tabs('tabs')[2];var mb = p.panel('options').tab.find('a.tabs-inner');mb.menubutton({menu:'#mm',iconCls:'icon-help'}).click(function(){$('#tt').tabs('select',2);});});</script></body></html> 

（3）、选项卡鼠标经过事件

<!DOCTYPE html><html><head><meta charset="UTF-8"><link rel="stylesheet" type="text/css" href="../css/easyui.css"><link rel="stylesheet" type="text/css" href="../css/icon.css"><link rel="stylesheet" type="text/css" href="../css/demo.css"><script type="text/javascript" src="../js/jquery.min.js"></script><script type="text/javascript" src="../js/jquery.easyui.min.js"></script></head><body><div style="margin:20px 0;"></div><div id="tt" class="easyui-tabs" style="width:700px;height:250px"><div title="About" style="padding:10px"><p style="font-size:14px">jQuery EasyUI framework helps you build your web pages easily.</p><ul><li>easyui is a collection of user-interface plugin based on jQuery.</li><li>easyui provides essential functionality for building modem, interactive, javascript applications.</li><li>using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.</li><li>complete framework for HTML5 web page.</li><li>easyui save your time and scales while developing your products.</li><li>easyui is very easy but powerful.</li></ul></div><div title="My Documents" style="padding:10px"><ul class="easyui-tree" data-options="url:'tree_data1.json',method:'get',animate:true"></ul></div><div title="Help" data-options="iconCls:'icon-help',closable:true" style="padding:10px">This is the help content.</div></div><script type="text/javascript">$(function(){var tabs = $('#tt').tabs().tabs('tabs');for(var i=0; i<tabs.length; i++){tabs[i].panel('options').tab.unbind().bind('mouseenter',{index:i},function(e){$('#tt').tabs('select', e.data.index);});}});</script></body></html> 

（4）、带图片的选项卡

<!DOCTYPE html><html><head><meta charset="UTF-8"><link rel="stylesheet" type="text/css" href="../css/easyui.css"><link rel="stylesheet" type="text/css" href="../css/icon.css"><link rel="stylesheet" type="text/css" href="../css/demo.css"><script type="text/javascript" src="../js/jquery.min.js"></script><script type="text/javascript" src="../js/jquery.easyui.min.js"></script></head><body><h2>Tabs with Images</h2><p>The tab strip can display big images.</p><div style="margin:20px 0;"></div><div class="easyui-tabs" data-options="tabWidth:100,tabHeight:60" style="width:700px;height:250px"><div title="<span class='tt-inner'><img src='images/modem.png'/><br>Modem</span>" style="padding:10px"><p>A modem (modulator-demodulator) is a device that modulates an analog carrier signal to encode digital information, and also demodulates such a carrier signal to decode the transmitted information.</p></div><div title="<span class='tt-inner'><img src='images/scanner.png'/><br>Scanner</span>" style="padding:10px"><p>In computing, an image scanner—often abbreviated to just scanner—is a device that optically scans images, printed text, handwriting, or an object, and converts it to a digital image.</p></div><div title="<span class='tt-inner'><img src='images/pda.png'/><br>Pda</span>" style="padding:10px"><p>A personal digital assistant (PDA), also known as a palmtop computer, or personal data assistant, is a mobile device that functions as a personal information manager. PDAs are largely considered obsolete with the widespread adoption of smartphones.</p></div><div title="<span class='tt-inner'><img src='images/tablet.png'/><br>Tablet</span>" style="padding:10px"><p>A tablet computer, or simply tablet, is a one-piece mobile computer. Devices typically have a touchscreen, with finger or stylus gestures replacing the conventional computer mouse.</p></div></div><style scoped="scoped">.tt-inner{display:inline-block;line-height:12px;padding-top:5px;}.tt-inner img{border:0;}</style></body></html>

 

（5）、选项卡工具组

<!DOCTYPE html><html><head><meta charset="UTF-8"><link rel="stylesheet" type="text/css" href="../css/easyui.css"><link rel="stylesheet" type="text/css" href="../css/icon.css"><link rel="stylesheet" type="text/css" href="../css/demo.css"><script type="text/javascript" src="../js/jquery.min.js"></script><script type="text/javascript" src="../js/jquery.easyui.min.js"></script></head><body><h2>Tabs Tools</h2><p>Click the buttons on the top right of tabs header to add or remove tab panel.</p><div style="margin:20px 0;"></div><div id="tt" class="easyui-tabs" data-options="tools:'#tab-tools'" style="width:700px;height:250px"></div><div id="tab-tools"><a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-add'" onclick="addPanel()"></a><a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-remove'" onclick="removePanel()"></a></div><script type="text/javascript">var index = 0;function addPanel(){index++;$('#tt').tabs('add',{title: 'Tab'+index,content: '<div style="padding:10px">Content'+index+'</div>',closable: true});}function removePanel(){var tab = $('#tt').tabs('getSelected');if (tab){var index = $('#tt').tabs('getTabIndex', tab);$('#tt').tabs('close', index);}}</script></body></html>

 

 

（6）、选项卡位置

<!DOCTYPE html><html><head><meta charset="UTF-8"><link rel="stylesheet" type="text/css" href="../css/easyui.css"><link rel="stylesheet" type="text/css" href="../css/icon.css"><link rel="stylesheet" type="text/css" href="../css/demo.css"><script type="text/javascript" src="../js/jquery.min.js"></script><script type="text/javascript" src="../js/jquery.easyui.min.js"></script></head><body><div style="margin:20px 0;"><span>Position:</span><select onchange="$('#tt').tabs({tabPosition:this.value})"><option value="top">Top</option><option value="bottom">Bottom</option><option value="left">Left</option><option value="right">Right</option></select></div><div id="tt" class="easyui-tabs" style="width:700px;height:250px"><div title="About" style="padding:10px"><p style="font-size:14px">jQuery EasyUI framework helps you build your web pages easily.</p><ul><li>easyui is a collection of user-interface plugin based on jQuery.</li><li>easyui provides essential functionality for building modem, interactive, javascript applications.</li><li>using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.</li><li>complete framework for HTML5 web page.</li><li>easyui save your time and scales while developing your products.</li><li>easyui is very easy but powerful.</li></ul></div><div title="My Documents" style="padding:10px"><ul class="easyui-tree" data-options="url:'tree_data1.json',method:'get',animate:true"></ul></div><div title="Help" data-options="iconCls:'icon-help',closable:true" style="padding:10px">This is the help content.</div></div></body></html>