Documentation

Getting Started

API Reference

Plugins

Support

About jQuery

Toolbox

Views

Personal tools

UI/Tabs/tabs

From jQuery JavaScript Library

Jump to: navigation, search

« Back to UI/Tabs

[edit]

tabs( [options] )

The method that you use to create a new tabs interface.

Arguments:

options (Optional)	Options
A set of key/value pairs that configures the tabs interface. All options are optional.

Options:

Name	Type
selected	Number	Default: 0
Zero-based index of the tab to be selected on initialization. To set all tabs to unselected set this option to null.
Code Sets second tab as selected on initialization. $('.selector').tabs({ selected: 1 });
Code Sets all tabs unselected on initialization. $('.selector').tabs({ selected: null });
unselect	Boolean	Default: false
Whether or not to hide an already selected tab on click.
Code Enables toggling visibility of selected tabs on click. $('.selector').tabs({ unselect: true });
event	String	Default: click
The type of event to be used for selecting a tab.
Code Sets event to mouseover. $('.selector').tabs({ event: 'mouseover' });
disabled	Array<Number>	Default: []
An array containing the position of the tabs (zero-based index) that should be disabled on initialization.
Code Disables second and third tab on initialization. $('.selector').tabs({ disabled: [1, 2] });
cookie	Object
Store the latest active (clicked) tab in a cookie. The cookie is used to determine the active tab on the next page load. Requires cookie plugin. The object needs to have key/value pairs of the form the cookie plugin expects as options. Available options: { expires: 7, path: '/', domain: 'jquery.com', secure: true }
Code Store active tab in a cookie that expires after 30 days. $('.selector').tabs({ cookie: { expires: 30 } });
spinner	String	Default: Loading…
The HTML content of this string is shown in a tab title while remote content is loading. Pass in empty string to deactivate that behavior.
Code Disables tab title changing while loading tab content. $('.selector').tabs({ spinner: '' });
cache	Boolean	Default: false
Wether or not to cache remote tabs content, e.g. load only once or with every click. Cached content is being lazy loaded, e.g once and only once for the first click. Note that to prevent the actual Ajax requests from being cached by the browser you need to provide an extra cache: false flag to ajaxOptions.
Code Enables cache. $('.selector').tabs({ cache: true });
ajaxOptions	Options
Additional Ajax options to consider when loading tab content (see $.ajax).
Code Make synchronous requests when loading tab content. $('.selector').tabs({ ajaxOptions: { async: false } });
idPrefix	String	Default: ui-tabs-
If the remote tab, its anchor element that is, has no title attribute to generate an id from, an id/fragment identifier is created from this prefix and a unique id returned by $.data(el), for example "ui-tabs-54".
fx	Options, Array<Options>
Enable animations for hiding and showing tab panels. The duration option can be a string representing one of the three predefined speeds ("slow", "normal", "fast") or the duration in milliseconds to run an animation (default is "normal").
Code Enables fade in/out animations. $('.selector').tabs({ fx: { opacity: 'toggle' } });
Code Enables slide up/down animations. $('.selector').tabs({ fx: { height: 'toggle' } });
Code Enables combined slide and fade animations and overrides default duration. $('.selector').tabs({ fx: { height: 'toggle', opacity: 'toggle', duration: 'fast' } });
Code Enable slide down animation for showing a panel while using no animation for hiding. $('.selector').tabs({ fx: [null, { height: 'show' }] });
tabTemplate	String	Default: <li><a href="#{href}"><span>#{label}</span></a></li>
HTML template from which a new tab is created and added. The placeholders #{href} and #{label} are replaced with the url and tab label that are passed as arguments to the add method.
panelTemplate	String	Default: <div></div>
HTML template from which a new tab panel is created in case of adding a tab with the add method or when creating a panel for a remote tab on the fly.
select	function(event,ui)
Function that gets called when clicking a tab.
load	function(event,ui)
Function that gets called after the content of a remote tab has been loaded.
show	function(event,ui)
Function that gets called when a tab is shown.
add	function(event,ui)
Function that gets called when a tab was added.
remove	function(event,ui)
Function that gets called when a tab was removed.
enable	function(event,ui)
Function that gets called when a tab was enabled.
disable	function(event,ui)
Function that gets called when a tab was disabled.

Examples:

Demo
View Source

A simple jQuery UI Tabs interface.

$("#example > ul").tabs();

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)">
<script type="text/javascript" src="http://dev.jquery.com/view/tags/ui/1.5/ui/ui.core.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/tags/ui/1.5/ui/ui.tabs.js"></script>
  <script>
  $(document).ready(function(){
    $("#example > ul").tabs();
  });
  </script>
  
</head>
<body>
  
        <div id="example" class="flora">
            <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>First tab is selected by default.</p>
            </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>
</body>
</html>

Name	Type

[edit]

tabs( "add", url, label, [index] )

Add a new tab.

Arguments:

"add"	String

url	String
Either a URL consisting of a fragment identifier only to create an in-page tab or a full url (relative or absolute, no cross-domain support) to turn the new tab into an Ajax (remote) tab.
label	String
The label of the tab to be added.
index (Optional)	Number
Zero-based position where to insert the new tab. Optional, by default a new tab is appended at the end.

Examples:

Code

Append a new in-page tab.

$(".selector").tabs("add", '#fragment-identifier', 'New Tab');

Code

Insert a new in-page tab at the second position.

$(".selector").tabs("add", '#fragment-identifier', 'New Tab', 1);

Code

Append a new remote tab.

$(".selector").tabs("add", '/load/content/url', 'New Tab');

Name	Type

[edit]

tabs( "remove", index )

Remove a tab.

Arguments:

"remove"	String

index	Number
Zero-based index of the tab to be removed.

Examples:

Code

Remove second tab.

$(".selector").tabs("remove", 1);

Name	Type

[edit]

tabs( "enable", index )

Enable a disabled tab.

To enable more than one tab at once reset the disabled property like: $('#example').data('disabled.tabs', []);

Arguments:

"enable"	String

index	Number
Zero-based index of the tab to be enabled.

Examples:

Code

Enable second tab.

$(".selector").tabs("enable", 1);

Name	Type

[edit]

tabs( "disable", index )

Disable a tab.

The selected tab cannot be disabled. To disable more than one tab at once use: $('#example').data('disabled.tabs', [1, 2, 3]);

Arguments:

"disable"	String

index	Number
Zero-based index of the tab to be disabled.

Examples:

Code

Disable second tab.

$(".selector").tabs("disable", 1);

Name	Type

[edit]

tabs( "select", index )

Select a tab, i.e., simulate a click programmatically.

Arguments:

"select"	String

index	Number, String
Zero-based index of the tab to be selected or the id selector of the panel the tab is associated with (the tab's href fragment identifier, e.g. hash, points to the panel's id).

Examples:

Code

Select second tab.

$(".selector").tabs("select", 1);

Code

Select tab that is associated with a panel that has the id "foo".

$(".selector").tabs("select", '#foo');

Name	Type

[edit]

tabs( "load", index )

Reload the content of an Ajax tab programmatically.

This method always loads the tab content from the remote location, even is cache is set to true.

Arguments:

"load"	String

index	Number
Zero-based index of the tab to be reloaded.

Examples:

Code

Reload second tab.

$(".selector").tabs("load", 1);

Name	Type

[edit]

tabs( "url", index, url )

Change the url from which an Ajax (remote) tab will be loaded.

The specified URL will be used for subsequent loads. Note that you can not only change the URL for an existing remote tab with this method, but also turn an in-page tab into a remote tab.

Arguments:

"url"	String

index	Number
Zero-based index of the tab of which its URL is to be updated.
url	String
A URL the content of the tab is loaded from.

Examples:

Code

Set the URL of an Ajax tab to load content from.

$(".selector").tabs("url", '/changed/url');

Name	Type

[edit]

tabs( "destroy" )

Destroy tabs interface and revert HTML to the state before creating tabs.

Arguments:

"destroy"	String

[edit]

tabs( "length" )

Retrieve the number of tabs of the first matched tab pane.

Arguments:

"length"	String

[edit]

tabs( "rotate", ms, [continuing] )

Set up an automatic rotation through tabs of a tab pane.

Part of the UI Tabs extension package.

Arguments:

"rotate"	String

ms	Number
Amount of time in milliseconds until the next tab in the cycle gets activated. Use 0 or null to stop the rotation.
continuing (Optional)	Boolean
Whether or not to continue the rotation after a tab has been selected by a user. Default: false.

Examples:

Code

Start rotation with an interval of 5 seconds.

$(".selector").tabs('rotate', 5000);

Code

Stop rotation.

$(".selector").tabs('rotate', null);

Name	Type

Retrieved from "http://docs.jquery.com/UI/Tabs/tabs"

Categories: UI/Tabs/tabs | API | Core/$