Api Tabs

## Category (#) ## Usage **Description:** A multi-panel, single-content area where each panel is associated with a header in a list. **Added in version:** 1.0 Tabs are typically used to break content into multiple sections to save space, similar to an accordion. Tabs require a specific set of markup to function correctly: * Tabs must be within an ordered (`

`) and must be wrapped in an anchor (``) with an `href` attribute. * Each tab panel can be any valid element, but it must have an `id` that corresponds to the hash in the associated tab's anchor. The content for each tab panel can be defined in the page or loaded via Ajax. Both methods are handled automatically based on the `href` of the anchor associated with the tab. By default, tabs activate on click, but this can be changed or overridden via the [`event`](#) option. Here is some sample markup:
- One
- Two
- Three
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.
### Keyboard Interaction When 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 immediately. * ALT+PAGE DOWN: Move focus to the next tab and activate immediately. When 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 immediately. * ALT+PAGE DOWN: Move focus to the next tab and activate immediately. ### Theming The Tabs widget uses the (#) to define its look and feel. To style tabs specifically, you can use the following CSS class names: * `ui-tabs`: The outer container for the tabs. When the [`collapsible`](#) option is set, this element will also have a `ui-tabs-collapsible` class. * `ui-tabs-nav`: The tab list. * The active list item in the navigation will have a `ui-tabs-active` class. List items with content loaded via Ajax will have a `ui-tabs-loading` class. * `ui-tabs-anchor`: The anchor used to toggle the panel. * `ui-tabs-panel`: The panel associated with a tab. Only visible when its corresponding tab is active. ### Dependencies (optional; used with the [`show`](#) and [`hide`](#) options) ### Additional Notes * This widget requires some functional CSS to work properly. If you are creating a custom theme, use the widget-specific CSS file as a starting point. ## Example A simple jQuery UI Tabs. Tabs Widget Demo
- One
- Two
- Three
The first tab is active by default:
$( "#tabs" ).tabs();

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. 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.
$( "#tabs" ).tabs();

YouTip

Api Tabs

📂 Categories