jQuery UI 部件库
jQuery UI 教程
jQuery UI 主题

标签页部件（Tabs Widget）

所属类别

小部件（Widgets）

用法

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

版本新增：1.0

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

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

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

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

下面是一些样品标记：

<div id="tabs">
  <ul>
    <li><a href="#fragment-1">一</a></li>
    <li><a href="#fragment-2">二</a></li>
    <li><a href="#fragment-3">三</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>

键盘交互

当焦点在标签页上时，下面的键盘命令可用：

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

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

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

主题化

标签页部件（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：用于切换面板的锚。
    • ui-tabs-panel：与标签页相关的面板。只有与其对应的标签页激活时才可见。

依赖

附加说明

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

实例

一个简单的 jQuery UI 标签页（Tabs）。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>标签页部件（Tabs Widget）演示</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>一</span></a></li>
    <li><a href="#fragment-2"><span>二</span></a></li>
    <li><a href="#fragment-3"><span>三</span></a></li>
  </ul>
  <div id="fragment-1">
    <p>第一个标签是默认激活的：</p>
    <code>$( "#tabs" ).tabs(); </code>
  </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>