场景

效果

EasyUI中Tabs标签页的简单使用_代码实例

属性


tabs

none

返回全部的标签页面板（tab panel）。

resize

none

调整标签页（tabs）容器的尺寸并做布局。

add

options

添加一个新的标签页面板（tab panel），options 参数是一个配置对象，更多详细信息请参见标签页面板（tab panel）属性。

当添加一个新的标签页面板（tab panel）时，它将被选中。

如需添加一个未选中的标签页面板（tab panel），请记得设置 'selected' 属性为 false。

 


  1. // add a unselected tab panel
  2. $('#tt').tabs('add',{
  3. title: 'new tab',
  4. selected: false
  5. //...
  6. });

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）的索引。

 


  1. var tab = $('#tt').tabs('getSelected');
  2. var index = $('#tt').tabs('getTabIndex',tab);
  3. alert(index);

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）。


代码实例：

 


  1. // update the selected panel with new title and content
  2. var tab = $('#tt').tabs('getSelected'); // get selected panel
  3. $('#tt').tabs('update', {
  4. tab: tab,
  5. options: {
  6. title: 'New Title',
  7. href: 'get_content.php' // the new content URL
  8. }
  9. });
  10.  
  11. // call 'refresh' method for tab panel to update its content
  12. var tab = $('#tt').tabs('getSelected'); // get selected panel
  13. tab.panel('refresh', 'get_content.php');

enableTab

which

启用指定的标签页面板（tab panel），'which' 参数可以是标签页面板（tab panel）的标题（title）或索引（index）。该方法自版本 1.3 起可用。


代码实例：

 


  1. $('#tt').tabs('enableTab', 1); // enable the second tab panel
  2. $('#tt').tabs('enableTab', 'Tab2'); enable the tab panel that has 'Tab2' title

disableTab

which

禁用指定的标签页面板（tab panel），'which' 参数可以是标签页面板（tab panel）的标题（title）或索引（index）。该方法自版本 1.3 起可用。


代码实例：

 


  1. $('#tt').tabs('disableTab', 1); // disable the second tab panel.

scrollBy

deltaX

通过指定的像素数滚动标签页（tab）头部，负值表示滚动到右边，正值表示滚动到左边。该方法自版本 1.3.2 起可用。


代码实例：

 


  1. // scroll the tab header to left
  2. $('#tt').tabs('scroll', 10);

标签页面板（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

实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css">
    <script type="text/javascript" src="/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<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>
</body>
</html>