jQuery UI API - Tabs Widget

Category

Widgets

Usage

Description:A single content area with multiple panels, each panel associated with a header in a list.

Version added:1.0

Tabs are generally used to break content into multiple sections that can be swapped to save space, much like an accordion.

Tabs have a specific markup requirement that must be followed in order for the tabs to work:

  • Tabs must be within an ordered (<ol>) or unordered (<ul>) list.
  • Each tab's "title" must be inside a list item (<li>), and must be wrapped with an anchor having ahrefattribute (<a>).
  • Each tab panel can be any valid element, but it must have an id that corresponds to the hash in the anchor of the associated tab.

The content of each tab panel can be defined in the page, or loaded via Ajax. Both of these are automatically handled based on the tab-associated anchor'shrefare automatically handled. By default, tabs are activated on click, but can be changed or overridden via theeventoption.

The following is some sample markup:

<div id="tabs">
  <ul>
    <li><a href="../index.html">一</a></li>
    <li><a href="../index.html">二</a></li>
    <li><a href="../index.html">三</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

When focus is on a tab, the following keyboard commands are available:

  • UP/LEFT: Moves focus to the previous tab. If on the first tab, moves focus to the last tab. Activates the focused tab after a short delay.
  • DOWN/RIGHT: Moves focus to the next tab. If on the last tab, moves focus to the first tab. Activates the focused tab after a short delay.
  • HOME: Moves focus to the first tab. Activates the focused tab after a short delay.
  • END: Moves focus to the last tab. Activates the focused tab after a short delay.
  • SPACE: Activates the panel associated with the focused tab.
  • ENTER: Activates or toggles the panel associated with the focused tab.
  • ALT+PAGE UP: Moves focus to the previous tab and activates it immediately.
  • ALT+PAGE DOWN: Moves focus to the next tab and activates it immediately.

When focus is on a panel, the following keyboard commands are available:

  • CTRL+UP: Moves focus to the associated tab.
  • ALT+PAGE UP: Moves focus to the previous tab and activates it immediately.
  • ALT+PAGE DOWN: Moves focus to the next tab and activates it immediately.

Theming

The Tabs Widget uses thejQuery UI CSS Frameworkto define its look and feel styles. If you need to use tabs-specific styles, the following CSS class names can be used:

  • ui-tabs: The outer container of the tabs. When thecollapsibleoption is set, this element will additionally have aui-tabs-collapsible class。
    • ui-tabs-nav: The tab list.
      • The active list item in the navigation will have aui-tabs-activeclass. List items whose content is loaded via Ajax will have aui-tabs-loading class。
        • ui-tabs-anchor: The anchor used to switch panels.
    • ui-tabs-panel: The panel associated with the tab. It is only visible when its corresponding tab is active.

Dependencies

Additional Notes

  • This widget requires some functional CSS, otherwise it will not work. If you create a custom theme, use the widget-specific CSS file as a starting point.

Examples

A simple 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="../index.html"><span>一</span></a></li>
    <li><a href="../index.html"><span>二</span></a></li>
    <li><a href="../index.html"><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>

Other Extensions