❮ Api Highlight Effect Jqueryui Examples ❯

jQuery UI API - Tabs Widget

Usage

Description: A single content area with multiple panels, each 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, similar to an accordion.

Tabs have a particular markup that must be used in order for them to work correctly:

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

The content of each tab panel can be defined in-page or can be loaded via Ajax. Both methods are automatically handled based on the href of the tab's anchor. By default, tabs are activated on click, but this behavior can be changed or overridden using the event option.

Here is some sample markup:

<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

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

UP/LEFT: Move focus to the previous tab. If on the first tab, move focus to the last tab. Activate the focused tab after a short delay.
DOWN/RIGHT: Move focus to the next tab. If on the last tab, move focus to the first tab. Activate the focused tab after a short delay.
HOME: Move focus to the first tab. Activate the focused tab after a short delay.
END: Move focus to the last tab. Activate the focused tab after a short delay.
SPACE: Activate the panel associated with the focused tab.
ENTER: Activate or toggle the panel associated with the focused tab.
ALT+PAGE UP: Move focus to the previous tab and activate it immediately.
ALT+PAGE DOWN: Move focus to the next tab and activate it immediately.

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

CTRL+UP: Move focus to the associated tab.
ALT+PAGE UP: Move focus to the previous tab and activate it immediately.
ALT+PAGE DOWN: Move focus to the next tab and activate it immediately.

Theming

The Tabs Widget uses the jQuery UI CSS Framework to define its appearance and style. If you need to use styles specific to tabs, you can use the following CSS class names:

ui-tabs: The outer container of the tabs. This element will also have a ui-tabs-collapsible class when the collapsible option is set.
ui-tabs-nav: The tab list.
List items activated in navigation will have a ui-tabs-active class. List items whose content is loaded via Ajax call will have a ui-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 activated.

Dependencies

UI Core
Widget Factory
Effects Core (optional; when used with show and hide options)

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.

Example

A simple jQuery UI Tabs.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Tabs Widget 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>The first tab is active by default:</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>

View Demo