Latest web development tutorials

jQuery UI API - tab member (Tabs Widget)

category

Widgets (Widgets)

usage

Description: A multi-panel single content area, each panel in the list title.

New Version: 1.0

Tabs (Tabs) is normally used content into a plurality of sections, in order to save space, like the accordion (accordion) the same.

Tabs (Tabs) has a specific set of tags that must be used in order to work properly tabs:

  • Tabs (Tabs) must be an ordered ( <ol> ) or unordered ( <ul> ) list
  • "Title" tag of each page must be a list item ( <li> internal), and must be used with a href attribute of the anchor ( <a> ) package.
  • Each tag plate can be any valid page element, but it must have a id, anchor hash associated with the id corresponding tabs.

The contents of each plate tab page can be defined in the page is good, or may be loaded via Ajax. Both methods are based on the relevant page of the anchor tag href automatic process. By default, when you click on the tab to activate, but by event options you can change or override event.

Here are some sample tags: 

<Div id = "tabs">
  <Ul>
    <Li> <a href="#fragment-1"> a </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 cursor to the previous tab. If the label on the first page, then move the focus to the last tab. In a short delay after the activation of the focused tab.
  • DOWN / RIGHT: Move cursor to the next tab. If a label on the last page, then move the focus to the first tab. In a short delay after the activation of the focused tab.
  • HOME: Move cursor to the first tab. In a short delay after the activation of the focused tab.
  • END: Move cursor to the last tab. In a short delay after the activation of the focused tab.
  • SPACE: activation associated with the focused tab panel.
  • ENTER: Activate or switch associated with the focused tab panel.
  • ALT + PAGE UP: Move cursor to the previous tab and immediately activated.
  • ALT + PAGE DOWN: Move cursor to the next tab, and activated immediately.

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

  • CTRL + UP: Move cursor to the relevant tab.
  • ALT + PAGE UP: Move cursor to the previous tab and immediately activated.
  • ALT + PAGE DOWN: Move cursor to the next tab, and activated immediately.

Theming

Tab member (Tabs Widget) using jQuery UI CSS framework to define the look and feel of its style. If you need to use the specified style tabs, you can use the following CSS class name:

  • ui-tabs : the outer container tab. When you set a collapsible -time options, the additional elements are provided with a ui-tabs-collapsible , class.
    • ui-tabs-nav : tab list.
      • Navigation list item will be activated with a ui-tabs-active , class. Content loaded via Ajax call will appear with a list of items ui-tabs-loading , class.
        • ui-tabs-anchor : Switchboard for anchors.
    • ui-tabs-panel : the tab-related panels. Only the corresponding tab is visible only when activated.

rely

Additional information

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

Examples

A simple jQuery UI tabs (Tabs). 

<! Doctype html>
<Html lang = "en">
<Head>
  <Meta charset = "utf-8">
  <Title> tab member (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> a </ 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 tag is enabled 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>