Tabs Widget

Categories: Widgets

Tabs Widgetversion added: 1.0

Description: 一种多panel（面板）的单内容区，每个panel（面板）与列表中的标题相关。

QuickNavExamples

Options

Methods

Events

选项卡（Tabs）通常用于把内容分成多个部分，以便节省空间，就像折叠面板（accordion）一样。

选项卡（Tabs）有一组必须使用的特定标记，以便选项卡能正常工作：

  • 选项卡（Tabs）必须在一个有序的（<ol>）或无序的（<ul>）列表中
  • 每个选项卡的 "title" 必须在一个列表项（<li>）的内部，且必须用一个带有 href 属性的锚（<a>）包裹。
  • 每个选项卡panel（面板）可以是任意有效的元素，但是它必须带有一个 id，该 id 与相关选项卡的锚中的哈希相对应。

每个选项卡panel（面板）的内容可以在页面中定义好，或者可以通过 Ajax 加载。这两种方式都是基于与选项卡相关的锚的 href 上自动处理的。默认情况下，选项卡在点击时激活，但是通过 event 选项可以改变或覆盖事件。

下面是一些样品标记：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<div id="tabs">
  <ul>
    <li><a href="#fragment-1">One</a></li>
    <li><a href="#fragment-2">Two</a></li>
    <li><a href="#fragment-3">Three</a></li>
  </ul>
  <div id="fragment-1">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
  <div id="fragment-2">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
  <div id="fragment-3">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
</div>

键盘交互（Keyboard interaction）

当焦点在选项卡上时，下面的键盘命令可用：

  • UP/LEFT：移动焦点到上一个选项卡。如果在第一个选项卡上，则移动焦点到最后一个选项卡。在一个短暂的延迟后激活获得焦点的选项卡。
  • DOWN/RIGHT：移动焦点到下一个选项卡。如果在最后一个选项卡上，则移动焦点到第一个选项卡。在一个短暂的延迟后激活获得焦点的选项卡。
  • HOME：移动焦点到第一个选项卡。在一个短暂的延迟后激活获得焦点的选项卡。
  • END：移动焦点到最后一个选项卡。在一个短暂的延迟后激活获得焦点的选项卡。
  • SPACE：激活与获得焦点的选项卡相关的panel（面板）。
  • ENTER：激活或切换与获得焦点的选项卡相关的panel（面板）。
  • ALT+PAGE UP：移动焦点到上一个选项卡，并立即激活。
  • ALT+PAGE DOWN：移动焦点到下一个选项卡，并立即激活。

当焦点在panel（面板）上时，下面的键盘命令可用：

  • CTRL+UP：移动焦点到相关的选项卡。
  • ALT+PAGE UP：移动焦点到上一个选项卡，并立即激活。
  • ALT+PAGE DOWN：移动焦点到下一个选项卡，并立即激活。

主题（Theming）

选项卡部件（Tabs Widget）使用 jQuery UI CSS 框架 来定义它的外观和感观的样式。如果需要使用选项卡指定的样式，则可以使用下面的 CSS class 名称：

  • ui-tabs：选项卡的外层容器。当设置了 collapsible 选项时，该元素会另外带有一个 ui-tabs-collapsible class。
    • ui-tabs-nav：选项卡列表。
      • 导航中激活的列表项会带有一个 ui-tabs-active class。内容通过 Ajax 调用加载的列表项会带有一个 ui-tabs-loading class。
        • ui-tabs-anchor：用于切换panel（面板）的锚。
    • ui-tabs-panel：与选项卡相关的panel（面板）。只有与其对应的选项卡激活时才可见。

依赖（Dependencies）

Additional Notes:

  • 该部件要求一些功能性的 CSS，否则将无法工作。如果您创建了一个自定义的主题，请使用小部件指定的 CSS 文件作为起点。

Options

activeType: Boolean or Integer

Default: 0
当前打开哪一个panel（面板）。
支持多个类型：
  • Boolean:设置 active 为 false 将折叠所有的panel（面板）。这要求 collapsible 选项必须为 true。
  • Integer: 激活打开的panel（面板）索引，以零为基础。负值则表示从最后一个panel（面板）后退选择panel（面板）。
Code examples:

初始化带有指定 active选项的 Tab（选项卡）：

1
 
$( ".selector" ).tabs({ active: 1 });

在初始化后，获取或设置active 选项：

1
2
3
4
5
 
// getter
var active = $( ".selector" ).tabs( "option", "active" );
 
// setter
$( ".selector" ).tabs( "option", "active", 1 );

collapsibleType: Boolean

Default: false
当设置为 true时，激活的panel（面板）可以被关闭。
Code examples:

初始化带有指定 collapsible选项的 Tab（选项卡）：

1
 
$( ".selector" ).tabs({ collapsible: true });

在初始化后，获取或设置collapsible 选项：

1
2
3
4
5
 
// getter
var collapsible = $( ".selector" ).tabs( "option", "collapsible" );
 
// setter
$( ".selector" ).tabs( "option", "collapsible", true );

disabledType: Boolean or Array

Default: false
哪些标签被禁用。
支持多个类型：
  • Boolean: 启用或禁用所有选项卡。
  • Array: 一个数组。包含从零开始计数的应该禁用选项卡的索引，例如，[ 0, 2 ]将禁用第一和第三个选项卡。
Code examples:

初始化带有指定 disabled选项的 Tab（选项卡）：

1
 
$( ".selector" ).tabs({ disabled: [ 0, 2 ] });

在初始化后，获取或设置disabled 选项：

1
2
3
4
5
 
// getter
var disabled = $( ".selector" ).tabs( "option", "disabled" );
 
// setter
$( ".selector" ).tabs( "option", "disabled", [ 0, 2 ] );

eventType: String

Default: "click"
激活选项卡的事件类型。 要悬停（hover）激活选项卡，用"mouseover"。
Code examples:

初始化带有指定 event选项的 Tab（选项卡）：

1
 
$( ".selector" ).tabs({ event: "mouseover" });

在初始化后，获取或设置event 选项：

1
2
3
4
5
 
// getter
var event = $( ".selector" ).tabs( "option", "event" );
 
// setter
$( ".selector" ).tabs( "option", "event", "mouseover" );

heightStyleType: String

Default: "content"
控制Tab（选项卡）部件和每个panel（面板）的高度。 可能的值：
  • "auto": 所有的panel（面板）将会被设置为最高的panel（面板）的高度。
  • "fill": 基于 tabs 的父元素的高度，扩展到可用的高度。
  • "content": 每个panel（面板）的高度取决于它的内容。
Code examples:

初始化带有指定 heightStyle选项的 Tab（选项卡）：

1
 
$( ".selector" ).tabs({ heightStyle: "fill" });

在初始化后，获取或设置heightStyle 选项：

1
2
3
4
5
 
// getter
var heightStyle = $( ".selector" ).tabs( "option", "heightStyle" );
 
// setter
$( ".selector" ).tabs( "option", "heightStyle", "fill" );

hideType: Boolean or Number or String or Object

Default: null
panel（面板）隐藏时的动画效果。
支持多个类型：
  • Boolean: 当设置为false， 将不使用动画效果，该panel（面板）会立即被隐藏。 如果设置为true， 该panel（面板）将会以默认的持续时间和默认的效果淡出。
  • Number: 该panel（面板）将以指定的时间和默认的效果淡出。
  • String: 该panel（面板）将使用指定的效果被隐藏。 该值可以是一个jQuery内置的动画方法的名称， 如"slideUp"， 或一个 jQuery UI 效果的名称， 如"fold"。 在这两种情况下，将使用默认持续时间和默认的动画效果。
  • Object: 如果该值是一个对象， 那么 effect, delay, duration, 和easing可能要提供。  如果 effect 属性包含一个jQuery方法的名称， 那么该方法将被使用; 否则它被假定为是一个jQuery UI的效果的名称。 当使用jQuery UI 支持额外设置 的效果 ， 你可以在对象中包含那些设置 并且它们将被传递到的效果。如果duration持续时间或easing属性被省略， 那么默认值将被使用。 如果effect被省略， 那么"fadeOut" 将被使用。如果delay被省略， 那么将不使用延迟。
Code examples:

初始化带有指定 hide选项的 Tab（选项卡）：

1
 
$( ".selector" ).tabs({ hide: { effect: "explode", duration: 1000 } });

在初始化后，获取或设置hide 选项：

1
2
3
4
5
 
// getter
var hide = $( ".selector" ).tabs( "option", "hide" );
 
// setter
$( ".selector" ).tabs( "option", "hide", { effect: "explode", duration: 1000 } );

showType: Boolean or Number or String or Object

Default: null
panel（面板）显示时的动画效果。
支持多个类型：
  • Boolean: 当设置为false， 将不使用动画效果，该panel（面板）会立即被隐藏。 如果设置为true， 该panel（面板）将会以默认的持续时间和默认的效果淡出。
  • Number: 该panel（面板）将以指定的时间和默认的效果淡出。
  • String: 该panel（面板）将使用指定的效果被隐藏。 该值可以是一个jQuery内置的动画方法的名称， 如"slideUp"， 或一个 jQuery UI 效果的名称， 如"fold"。 在这两种情况下，将使用默认持续时间和默认的动画效果。
  • Object: 如果该值是一个对象， 那么 effect, delay, duration, 和easing可能要提供。  如果 effect 属性包含一个jQuery方法的名称， 那么该方法将被使用; 否则它被假定为是一个jQuery UI的效果的名称。 当使用jQuery UI 支持额外设置 的效果 ， 你可以在对象中包含那些设置 并且它们将被传递到的效果。如果duration持续时间或easing属性被省略， 那么默认值将被使用。 如果effect被省略， 那么"fadeOut" 将被使用。如果delay被省略， 那么将不使用延迟。
Code examples:

初始化带有指定 show选项的 Tab（选项卡）：

1
 
$( ".selector" ).tabs({ show: { effect: "blind", duration: 800 } });

在初始化后，获取或设置show 选项：

1
2
3
4
5
 
// getter
var show = $( ".selector" ).tabs( "option", "show" );
 
// setter
$( ".selector" ).tabs( "option", "show", { effect: "blind", duration: 800 } );

Methods

destroy()Returns: jQuery (plugin only)

完全移除 Tab（选项卡） 功能. 这将使元素返回到之前的初始化状态。
  • 该方法不接受任何参数。
Code examples:

调用 destroy 方法：

1
 
$( ".selector" ).tabs( "destroy" );

disable()Returns: jQuery (plugin only)

禁用全部的 tabs（选项卡）。
  • 该方法不接受任何参数。
Code examples:

调用该方法：

1
 
$( ".selector" ).tabs( "disable" );

disable( index )Returns: jQuery (plugin only)

禁用某个 tabs（选项卡）。选定的选项卡不能被禁用。  要一次禁用多个选项卡， 设置disabled 选项： $( "#tabs" ).tabs( "option", "disabled", [ 1, 2, 3 ] ).
  • index
    Type: Number or String
    哪个 tabs（选项卡）被禁用。
Code examples:

调用该方法：

1
 
$( ".selector" ).tabs( "disable", 1 );

enable()Returns: jQuery (plugin only)

启用全部的 tabs（选项卡）。
  • 该方法不接受任何参数。
Code examples:

调用该方法：

1
 
$( ".selector" ).tabs( "enable" );

enable( index )Returns: jQuery (plugin only)

启用某个 tabs（选项卡）。  要一次要启多个选项卡，可以重置disabled属性，如： $( "#example" ).tabs( "option", "disabled", [] );.
Code examples:

调用该方法：

1
 
$( ".selector" ).tabs( "enable", 1 );

load( index )Returns: jQuery (plugin only)

加载远程选项卡的面板内容。
Code examples:

调用 load 方法：

1
 
$( ".selector" ).tabs( "load", 1 );

option( optionName )Returns: Object

获取当前与指定的 optionName 关联的值。
  • optionName
    Type: String
    要获取值的选项的名称。
Code examples:

调用该方法：

1
 
var isDisabled = $( ".selector" ).tabs( "option", "disabled" );

option()Returns: PlainObject

获取一个包含键/值对的对象，键/值对表示当前 tabs 选项哈希。
  • 该方法不接受任何参数。
Code examples:

调用该方法：

1
 
var options = $( ".selector" ).tabs( "option" );

option( optionName, value )Returns: jQuery (plugin only)

设置与指定的 optionName 关联的 tabs 选项的值。
  • optionName
    Type: String
    要设置的选项的名称。
  • value
    Type: Object
    要为选项设置的值。
Code examples:

调用该方法：

1
 
$( ".selector" ).tabs( "option", "disabled", true );

option( options )Returns: jQuery (plugin only)

为 tabs（选项卡） 设置一个或多个选项。
  • options
    Type: Object
    要设置的 option-value 对。
Code examples:

调用该方法：

1
 
$( ".selector" ).tabs( "option", { disabled: true } );

refresh()Returns: jQuery (plugin only)

处理任何在 DOM 中直接添加或移除的标题和面板，并重新计算 tabs（选项卡） 的高度。结果取决于内容和 heightStyle 选项。
  • 该方法不接受任何参数。
Code examples:

调用 refresh 方法：

1
 
$( ".selector" ).tabs( "refresh" );

widget()Returns: jQuery

返回一个包含 tabs（选项卡） 的 jQuery 对象。
  • 该方法不接受任何参数。
Code examples:

调用 widget 方法：

1
 
var widget = $( ".selector" ).tabs( "widget" );

Events

activate( event, ui )Type: tabsactivate

面板被激活后触发（在动画完成之后）。如果 tabs（选项卡） 之前是关闭的，则 ui.oldTab 和 ui.oldPanel 将是空的 jQuery 对象。如果 tabs（选项卡） 正在折叠，则 ui.newTab 和 ui.newPanel 将是空的 jQuery 对象。

注意： 由于 activate 事件只有在面板激活时才能触发，当创建 tabs（选项卡） 部件时，最初的面板不会触发该事件。如果您需要一个用于部件创建的钩，请使用 create 事件。
  • event
    Type: Event
  • ui
    Type: Object
    • newTab
      Type: jQuery
      刚被激活的选项卡。
    • oldTab
      Type: jQuery
      刚被取消激活的选项卡。
    • newPanel
      Type: jQuery
      刚被激活的面板。
    • oldPanel
      Type: jQuery
      刚被取消激活的面板。
Code examples:

初始化带有指定 activate 回调的 Tab（选项卡面板）：

1
2
3
 
$( ".selector" ).tabs({
  activate: function( event, ui ) {}
});

绑定一个事件监听器到 tabsactivate 事件：

1
 
$( ".selector" ).on( "tabsactivate", function( event, ui ) {} );

beforeActivate( event, ui )Type: tabsbeforeactivate

tabs（选项卡）被激活前直接触发。可以取消以防止tabs（选项卡）被激活。如果 tabs（选项卡） 当前是关闭的，则 ui.oldTab 和 ui.oldPanel 将是空的 jQuery 对象。如果 accordion 正在折叠，则 ui.newTab 和 ui.newPanel 将是空的 jQuery 对象。
  • event
    Type: Event
  • ui
    Type: Object
    • newTab
      Type: jQuery
      刚被激活的选项卡。
    • oldTab
      Type: jQuery
      刚被取消激活的选项卡。
    • newPanel
      Type: jQuery
      刚被激活的面板。
    • oldPanel
      Type: jQuery
      刚被取消激活的面板。
Code examples:

初始化带有指定 beforeActivate 回调的 Tab（选项卡面板）：

1
2
3
 
$( ".selector" ).tabs({
  beforeActivate: function( event, ui ) {}
});

绑定一个事件监听器到 tabsbeforeactivate 事件：

1
 
$( ".selector" ).on( "tabsbeforeactivate", function( event, ui ) {} );

beforeLoad( event, ui )Type: tabsbeforeload

在一个远程选项卡被加载之前，beforeActivate事件之后，触发该事件。可以取消，以防止 tabs（选项卡）面板加载内容;虽然面板仍然会被激活。 该事件被触发Ajax请求发送之前，这样可以使用ui.jqXHR 和 ui.ajaxSettings修改。

注意： 虽然ui.ajaxSettings被提供，并且可以被修改， 其中的一些设置已经通过jQuery处理。 例如，prefilters已经被应用，data已被处理，还有type已经确定。 ， 因为beforeSend作为jQuery.ajax()的回调，beforeLoad 事件同时是发生的，因此具有相同的限制。

  • event
    Type: Event
  • ui
    Type: Object
    • tab
      Type: jQuery
      正在加载的选项卡。
    • panel
      Type: jQuery
      将Ajax响应填充的面板。
    • jqXHR
      Type: jqXHR
      被请求内容的 jqXHR 对象。
    • ajaxSettings
      Type: Object
      用于由jQuery.ajax请求内容的设置。
Code examples:

初始化带有指定 beforeLoad 回调的 Tab（选项卡面板）：

1
2
3
 
$( ".selector" ).tabs({
  beforeLoad: function( event, ui ) {}
});

绑定一个事件监听器到 tabsbeforeload 事件：

1
 
$( ".selector" ).on( "tabsbeforeload", function( event, ui ) {} );

create( event, ui )Type: tabscreate

当创建 tabs（选项卡) 时触发。如果 tabs（选项卡) 是关闭的，ui.tab 和 ui.panel 将是空的 jQuery 对象。
Code examples:

初始化带有指定 create 回调的 Tab（选项卡面板）：

1
2
3
 
$( ".selector" ).tabs({
  create: function( event, ui ) {}
});

绑定一个事件监听器到 tabscreate 事件：

1
 
$( ".selector" ).on( "tabscreate", function( event, ui ) {} );

load( event, ui )Type: tabsload

远程选项卡加载后触发该事件。
  • event
    Type: Event
  • ui
    Type: Object
    • tab
      Type: jQuery
      刚加载的选项卡。
    • panel
      Type: jQuery
      刚刚填充的Ajax响应的面板。
Code examples:

初始化带有指定 load 回调的 Tab（选项卡面板）：

1
2
3
 
$( ".selector" ).tabs({
  load: function( event, ui ) {}
});

绑定一个事件监听器到 tabsload 事件：

1
 
$( ".selector" ).on( "tabsload", function( event, ui ) {} );

Example:

一个简单的 jQuery UI 选项卡（Tabs）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>tabs demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
 
<div id="tabs">
  <ul>
    <li><a href="#fragment-1"><span>One</span></a></li>
    <li><a href="#fragment-2"><span>Two</span></a></li>
    <li><a href="#fragment-3"><span>Three</span></a></li>
  </ul>
  <div id="fragment-1">
    <p>First tab is active by default:</p>
    <pre><code>$( "#tabs" ).tabs(); </code></pre>
  </div>
  <div id="fragment-2">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
  <div id="fragment-3">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
</div>
 
<script>
$( "#tabs" ).tabs();
</script>
 
</body>
</html>

Demo: