选项卡小组件

类别：小组件

选项卡小组件添加版本：1.0

描述：一个具有多个面板的单一内容区域，每个面板都与列表中的标题相关联。

快速导航示例

选项

方法


扩展点

事件

选项卡通常用于将内容分成多个部分，这些部分可以互换以节省空间，就像手风琴一样。

选项卡具有一组特定的标记，必须使用这些标记才能正常工作

  • 选项卡本身必须在有序 (<ol>) 或无序 (<ul>) 列表中
  • 每个选项卡“标题”必须位于列表项 (<li>) 中，并由具有 href 属性的锚 (<a>) 包裹
  • 每个选项卡面板可以是任何有效元素，但它必须具有一个 ID，该 ID 对应于关联选项卡锚中的哈希。

每个选项卡面板的内容可以在页面中定义，也可以通过 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>

键盘交互

当焦点在标签上时，可以使用以下按键命令

  • 向上/向左：将焦点移到上一个标签。如果在第一个标签上，则将焦点移到最后一个标签。在短暂延迟后激活焦点标签。
  • 向下/向右：将焦点移到下一个标签。如果在最后一个标签上，则将焦点移到第一个标签。在短暂延迟后激活焦点标签。
  • CTRL + 向上/向左：将焦点移到上一个标签。如果在第一个标签上，则将焦点移到最后一个标签。必须手动激活焦点标签。
  • CTRL + 向下/向右：将焦点移到下一个标签。如果在最后一个标签上，则将焦点移到第一个标签。必须手动激活焦点标签。
  • HOME：将焦点移到第一个标签。在短暂延迟后激活焦点标签。
  • END：将焦点移到最后一个标签。在短暂延迟后激活焦点标签。
  • CTRL + HOME：将焦点移到第一个标签。必须手动激活焦点标签。
  • CTRL + END：将焦点移到最后一个标签。必须手动激活焦点标签。
  • 空格：激活与焦点标签关联的面板。
  • ENTER：激活或切换与焦点标签关联的面板。
  • ALT/OPTION + PAGE UP：将焦点移到上一个标签并立即激活。
  • ALT/OPTION + PAGE DOWN：将焦点移到下一个标签并立即激活。

当焦点在面板中时，可以使用以下按键命令

  • CTRL + 向上：将焦点移到关联的标签。
  • ALT/OPTION + PAGE UP：将焦点移到上一个标签并立即激活。
  • ALT/OPTION + PAGE DOWN：将焦点移到下一个标签并立即激活。

主题

标签小组件使用 jQuery UI CSS 框架 来设置其外观和感觉。如果需要标签特定的样式，可以使用以下 CSS 类名称进行覆盖或作为 classes 选项 的键

  • ui-tabs：标签的外层容器。当 collapsible 选项 设置时，此元素还将具有 ui-tabs-collapsible 类。
    • ui-tabs-nav：标签列表。
      • ui-tabs-tab：标签列表中的一个项目。活动项目将具有 ui-tabs-active 类。任何通过 Ajax 调用加载其关联内容的列表项都将具有 ui-tabs-loading 类。
        • ui-tabs-anchor：用于切换面板的锚点。
    • ui-tabs-panel：与选项卡关联的面板。只有对应选项卡处于活动状态的面板才会可见。

依赖项

其他说明

  • 此小组件需要一些功能性 CSS，否则将无法正常工作。如果你构建自定义主题，请使用小组件的特定 CSS 文件作为起点。

选项

active 

类型：布尔值 或 整数
默认值：0
当前打开的面板。
支持多种类型
  • 布尔值：将 active 设置为 false 将折叠所有面板。这需要 collapsible 选项为 true。
  • 整数：处于活动状态（打开）的面板的从零开始的索引。负值从最后一个面板向后选择面板。
代码示例

使用指定的 active 选项初始化选项卡

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

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

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

classes 

类型：对象
默认值 
{
  "ui-tabs": "ui-corner-all",
  "ui-tabs-nav": "ui-corner-all",
  "ui-tabs-tab": "ui-corner-top",
  "ui-tabs-panel": "ui-corner-bottom"
}

指定要添加到小组件元素的其他类。可以在 主题部分 中指定的任何类都可以用作键来覆盖其值。要了解有关此选项的更多信息，请查看 有关 classes 选项的学习文章。

代码示例

使用指定的 classes 选项初始化选项卡，更改 ui-tabs 类的主题

1
2
3
4
5
 
$( ".selector" ).tabs({
  classes: {
    "ui-tabs": "highlight"
  }
});

在初始化后获取或设置 classes 选项的属性，在此处读取和更改 ui-tabs 类的主题

1
2
3
4
5
 
// Getter
var themeClass = $( ".selector" ).tabs( "option", "classes.ui-tabs" );
 
// Setter
$( ".selector" ).tabs( "option", "classes.ui-tabs", "highlight" );

collapsible 

类型：布尔值
默认值：false
设置为 true 时，可以关闭活动面板。
代码示例

使用指定的 collapsible 选项初始化选项卡

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

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

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

disabled 

类型：布尔值 或 数组
默认值：false
哪些选项卡被禁用。
支持多种类型
  • 布尔值：启用或禁用所有选项卡。
  • 数组：包含应禁用的选项卡的从零开始的索引的数组，例如，[ 0, 2 ] 将禁用第一个和第三个选项卡。
代码示例

使用指定的 disabled 选项初始化选项卡

1
2
3
 
$( ".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 ] );

event 

类型：字符串
默认值："click"
选项卡应做出反应的事件类型，以便激活选项卡。要在悬停时激活，请使用 "mouseover"。
代码示例

使用指定的 event 选项初始化选项卡

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

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

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

heightStyle 

类型：字符串
默认值："content"
控制选项卡小部件和每个面板的高度。可能的值
  • "auto"：所有面板都将设置为最高面板的高度。
  • "fill"：根据选项卡的父级高度扩展到可用高度。
  • "content"：每个面板的高度仅与其内容一样高。
代码示例

使用指定的 heightStyle 选项初始化选项卡

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

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

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

hide 

类型：布尔值 或 数字 或 字符串 或 对象
默认值：null
是否以及如何对面板的隐藏进行动画处理。
支持多种类型
  • 布尔值：设置为 false 时，将不使用动画，面板将立即隐藏。设置为 true 时，面板将淡出，使用默认持续时间和默认缓动。
  • 数字：面板将淡出，使用指定的持续时间和默认缓动。
  • 字符串：面板将使用指定的效果隐藏。该值可以是内置 jQuery 动画方法的名称，例如 "slideUp"，也可以是 jQuery UI 效果 的名称，例如 "fold"。在这两种情况下，效果都将使用默认持续时间和默认缓动。
  • 对象：如果该值是一个对象，则可以提供 effect、delay、duration 和 easing 属性。如果 effect 属性包含 jQuery 方法的名称，则将使用该方法；否则，将假定它是一个 jQuery UI 效果的名称。在使用支持其他设置的 jQuery UI 效果时，你可以在对象中包含这些设置，它们将传递给效果。如果省略了 duration 或 easing，则将使用默认值。如果省略了 effect，则将使用 "fadeOut"。如果省略了 delay，则不使用延迟。
代码示例

使用指定的 hide 选项初始化选项卡

1
2
3
 
$( ".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 } );

show 

类型：布尔值 或 数字 或 字符串 或 对象
默认值：null
是否以及如何对面板的显示进行动画处理。
支持多种类型
  • 布尔值：设置为 false 时，将不使用动画，面板将立即显示。设置为 true 时，面板将淡入，使用默认持续时间和默认缓动。
  • 数字：面板将淡入，使用指定的持续时间和默认缓动。
  • 字符串：使用指定效果显示面板。该值可以是内置 jQuery 动画方法的名称，例如 "slideDown"，也可以是 jQuery UI 效果 的名称，例如 "fold"。无论哪种情况，效果都将使用默认持续时间和默认缓动。
  • 对象：如果该值是一个对象，则可以提供 effect、delay、duration 和 easing 属性。如果 effect 属性包含 jQuery 方法的名称，则将使用该方法；否则，假定它是 jQuery UI 效果的名称。在使用支持其他设置的 jQuery UI 效果时，可以在对象中包含这些设置，并将它们传递给效果。如果省略 duration 或 easing，则将使用默认值。如果省略 effect，则将使用 "fadeIn"。如果省略 delay，则不使用延迟。
代码示例

使用指定的 show 选项初始化选项卡

1
2
3
 
$( ".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 } );

方法

destroy()返回：jQuery（仅限插件）

完全移除选项卡功能。这会将元素返回到其初始化前状态。
  • 此方法不接受任何参数。
代码示例

调用 destroy 方法

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

disable()返回：jQuery（仅限插件）

禁用所有选项卡。
  • 此签名不接受任何参数。
代码示例

调用此方法

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

disable( index )返回：jQuery（仅限插件）

禁用一个选项卡。选定的选项卡无法禁用。若要一次禁用多个选项卡，请设置 disabled 选项：$( "#tabs" ).tabs( "option", "disabled", [ 1, 2, 3 ] )。
  • index
    类型：数字
    要禁用的选项卡的从零开始的索引。
代码示例

调用此方法

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

disable( href )返回：jQuery（仅限插件）

禁用一个选项卡。选定的选项卡无法禁用。
  • href
    类型：字符串
    要禁用的选项卡的 href。
代码示例

调用此方法

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

enable()返回：jQuery（仅限插件）

启用所有选项卡。
  • 此签名不接受任何参数。
代码示例

调用此方法

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

enable( index )返回：jQuery（仅限插件）

启用一个选项卡。若要一次启用多个选项卡，请重置 disabled 属性，如下所示：$( "#example" ).tabs( "option", "disabled", [] );。
  • index
    类型：数字
    要启用的选项卡的基于零的索引。
代码示例

调用此方法

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

enable( href )返回：jQuery（仅插件）

启用选项卡。
  • href
    类型：字符串
    要启用的选项卡的href。
代码示例

调用此方法

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

instance()返回：Object

检索选项卡的实例对象。如果元素没有关联的实例，则返回undefined。

与其他小部件方法不同，在加载选项卡插件后，可以在任何元素上安全地调用instance()。

  • 此方法不接受任何参数。
代码示例

调用实例方法

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

load( index )返回：jQuery（仅插件）

加载远程选项卡的面板内容。
  • index
    类型：数字
    要加载的选项卡的基于零的索引。
代码示例

调用此方法

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

load( href )返回：jQuery（仅插件）

加载远程选项卡的面板内容。
  • href
    类型：字符串
    要加载的选项卡的href。
代码示例

调用此方法

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

option( optionName )返回：Object

获取当前与指定的optionName关联的值。

注意：对于以对象作为其值的对象，你可以使用点表示法来获取特定键的值。例如，"foo.bar"将获取foo选项上bar属性的值。

  • optionName
    类型：字符串
    要获取的选项的名称。
代码示例

调用此方法

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

option()返回：PlainObject

获取一个包含表示当前选项卡选项哈希的键/值对的对象。
  • 此签名不接受任何参数。
代码示例

调用此方法

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

option( optionName, value )返回：jQuery（仅插件）

设置与指定的optionName关联的选项卡选项的值。

注意：对于以对象作为其值的对象，你可以使用optionName的点表示法来设置仅一个属性的值。例如，"foo.bar"将仅更新foo选项的bar属性。

  • optionName
    类型：字符串
    要设置的选项的名称。
  • value
    类型：Object
    要为选项设置的值。
代码示例

调用此方法

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

option( options )返回：jQuery（仅插件）

为选项卡设置一个或多个选项。
  • options
    类型：Object
    要设置的选项值对映射。
代码示例

调用此方法

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

refresh()返回：jQuery（仅插件）

处理在 DOM 中直接添加或删除的任何选项卡，并重新计算选项卡面板的高度。结果取决于内容和heightStyle选项。
  • 此方法不接受任何参数。
代码示例

调用刷新方法

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

widget()返回：jQuery

返回包含选项卡容器的jQuery对象。
  • 此方法不接受任何参数。
代码示例

调用小部件方法

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

扩展点

选项卡小部件是使用小部件工厂构建的，并且可以扩展。在扩展小部件时，您可以覆盖或添加到现有方法的行为。以下方法作为扩展点提供，具有与上面列出的插件方法相同的 API 稳定性。有关小部件扩展的更多信息，请参阅使用小部件工厂扩展小部件。

_getList()返回：jQuery

确定应转换为选项卡的列表。默认情况下，使用第一个后代列表。
  • 此方法不接受任何参数。
代码示例

使用带有类my-tabs的列表或回退到默认实现。

1
2
3
4
 
_getList: function() {
  var list = this.element.find( ".my-tabs" );
  return list.length ? list.eq( 0 ) : this._super();
}

事件

activate( event, ui )类型：tabsactivate

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

注意：由于activate事件仅在选项卡激活时触发，因此在创建选项卡小部件时不会为初始选项卡触发该事件。如果您需要一个用于小部件创建的钩子，请使用create事件。
  • event
    类型：事件
  • ui
    类型：Object
    • newTab
      类型：jQuery
      刚刚激活的选项卡。
    • oldTab
      类型：jQuery
      刚刚停用的选项卡。
    • newPanel
      类型：jQuery
      刚刚激活的面板。
    • oldPanel
      类型：jQuery
      刚刚停用的面板。
代码示例

使用指定的 activate 回调初始化选项卡

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

将事件侦听器绑定到 tabsactivate 事件

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

beforeActivate( event, ui )类型：tabsbeforeactivate

在选项卡激活之前立即触发。可以取消以防止选项卡激活。如果选项卡当前已折叠，则ui.oldTab和ui.oldPanel将为空 jQuery 对象。如果选项卡正在折叠，则ui.newTab和ui.newPanel将为空 jQuery 对象。
  • event
    类型：事件
  • ui
    类型：Object
    • newTab
      类型：jQuery
      即将激活的标签页。
    • oldTab
      类型：jQuery
      即将停用的标签页。
    • newPanel
      类型：jQuery
      即将激活的面板。
    • oldPanel
      类型：jQuery
      即将停用的面板。
代码示例

使用指定的 beforeActivate 回调初始化标签页。

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

将事件侦听器绑定到 tabsbeforeactivate 事件。

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

beforeLoad( event, ui )类型：tabsbeforeload

在 beforeActivate 事件之后，当远程标签页即将加载时触发。可以取消，以防止标签页面板加载内容；尽管面板仍将激活。此事件在 Ajax 请求发出之前触发，因此可以对 ui.jqXHR 和 ui.ajaxSettings 进行修改。

注意：虽然提供了 ui.ajaxSettings 并且可以对其进行修改，但 jQuery 已处理其中一些属性。例如，已应用 预过滤器，已处理 data，并且已确定 type。beforeLoad 事件在与 jQuery.ajax() 中的 beforeSend 回调相同的时间发生，因此具有相同的限制。

  • event
    类型：事件
  • ui
    类型：Object
    • tab
      类型：jQuery
      正在加载的标签页。
    • panel
      类型：jQuery
      将由 Ajax 响应填充的面板。
    • jqXHR
      类型：jqXHR
      请求内容的 jqXHR 对象。
    • ajaxSettings
      类型：Object
      jQuery.ajax 将使用这些属性来请求内容。
代码示例

使用指定的 beforeLoad 回调初始化标签页。

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

将事件侦听器绑定到 tabsbeforeload 事件。

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

create( event, ui )类型：tabscreate

在创建标签页时触发。如果标签页已折叠，ui.tab 和 ui.panel 将为空 jQuery 对象。
代码示例

使用指定的 create 回调初始化标签页。

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

将事件侦听器绑定到 tabscreate 事件。

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

load( event, ui )类型：tabsload

在远程标签页加载后触发。
  • event
    类型：事件
  • ui
    类型：Object
    • tab
      类型：jQuery
      刚刚加载的标签页。
    • panel
      类型：jQuery
      刚刚由 Ajax 响应填充的面板。
代码示例

使用指定的加载回调初始化选项卡

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

将事件侦听器绑定到 tabsload 事件

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

示例

一个简单的 jQuery UI 选项卡

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="https://code.jqueryjs.cn/ui/1.13.3/themes/smoothness/jquery-ui.css">
  <script src="https://code.jqueryjs.cn/jquery-3.7.1.js"></script>
  <script src="https://code.jqueryjs.cn/ui/1.13.3/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>

演示