jQuery UI - Tabs Demos & Documentation
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Tabs - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
<li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
</div>
<div id="tabs-3">
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
</div>
</div>
</body>
</html>
Description: A single content area with multiple panels, each associated with a header in a list.
Options
active Type: Boolean or Integer
Default:
0
Which panel is currently open.
Multiple types supported:
- Boolean: Setting
active
tofalse
will collapse all panels. This requires thecollapsible
option to betrue
. - Integer: The zero-based index of the panel that is active (open). A negative value selects panels going backward from the last panel.
disabled Type: Boolean or Array
Default:
false
Which tabs are disabled.
Multiple types supported:
- Boolean: Enable or disable all tabs.
- Array: An array containing the zero-based indexes of the tabs that should be disabled, e.g.,
[ 0, 2 ]
would disable the first and third tab.
event Type: String
Default:
"click"
The type of event that the tabs should react to in order to activate the tab. To activate on hover, use
"mouseover"
.
heightStyle Type: String
Default:
"auto"
Controls the height of the tabs widget and each panel. Possible values:
"auto"
: All panels will be set to the height of the tallest panel."fill"
: Expand to the available height based on the tabs' parent height."content"
: Each panel will be only as tall as its content.
hide Type: Boolean or Number or String or Object
Default:
null
If and how to animate the hiding of the panel.
Multiple types supported:
- Boolean: When set to
false
, no animation will be used and the panel will be hidden immediately.When set totrue
, the panel will fade out with the default duration and the default easing. - Number: The panel will fade out with the specified duration and the default easing.
- String: The panel will be hidden using the specified effect.The value can either be the name of a built-in jQuery animateion method, such as
"slideUp"
, or the name of a jQuery UI effect, such as"fold"
.In either case the effect will be used with the default duration and the default easing. - Object: If the value is an object, then
effect
,duration
, andeasing
properties may be provided. If theeffect
property contains the name of a jQuery method, then that method will be used; otherwise it is assumed to be the name of a jQuery UI effect. When using a jQuery UI effect that supports additional settings, you may include those settings in the object and they will be passed to the effect. Ifduration
oreasing
is omitted, then the default values will be used. Ifeffect
is omitted, then"fadeOut"
will be used.
show Type: Boolean or Number or String or Object
Default:
null
If and how to animate the showing of the panel.
Multiple types supported:
- Boolean: When set to
false
, no animation will be used and the panel will be shown immediately.When set totrue
, the panel will fade in with the default duration and the default easing. - Number: The panel will fade in with the specified duration and the default easing.
- String: The panel will be shown using the specified effect.The value can either be the name of a built-in jQuery animateion method, such as
"slideDown"
, or the name of a jQuery UI effect, such as"fold"
.In either case the effect will be used with the default duration and the default easing. - Object: If the value is an object, then
effect
,duration
, andeasing
properties may be provided. If theeffect
property contains the name of a jQuery method, then that method will be used; otherwise it is assumed to be the name of a jQuery UI effect. When using a jQuery UI effect that supports additional settings, you may include those settings in the object and they will be passed to the effect. Ifduration
oreasing
is omitted, then the default values will be used. Ifeffect
is omitted, then"fadeIn"
will be used.
Methods
destroy()
Removes the tabs functionality completely. This will return the element back to its pre-init state.
disable()
Disables all tabs.
enable()
Enables all tabs.
option( optionName ) Returns: Object
Gets the value currently associated with the specified
optionName
.
-
optionNameType: StringThe name of the option to get.
option() Returns: PlainObject
Gets an object containing key/value pairs representing the current tabs options hash.
option( optionName, value )
Sets the value of the tabs option associated with the specified
optionName
.
option( options )
Sets one or more options for the tabs.
-
optionsType: ObjectA map of option-value pairs to set.
refresh()
Process any tabs that were added or removed directly in the DOM and recompute the height of the tab panels. Results depend on the content and the
heightStyle
option.
widget() Returns: jQuery
Returns a
jQuery
object containing the tabs container.
Events
activate( event, ui )
Triggered after a tab has been activated (after animation completes). If the tabs were previously collapsed,
ui.oldTab
and
ui.oldPanel
will be empty jQuery objects. If the tabs are collapsing,
ui.newTab
and
ui.newPanel
will be empty jQuery objects.
beforeActivate( event, ui )
Triggered directly after a tab is activated. Can be canceled to prevent the tab from activating. If the tabs are currently collapsed,
ui.oldTab
and
ui.oldPanel
will be empty jQuery objects. If the tabs are collapsing,
ui.newTab
and
ui.newPanel
will be empty jQuery objects.
beforeLoad( event, ui )
Triggered when a remote tab is about to be loaded, after the
beforeActivate
event. Can be canceled to prevent the tab panel from loading content; though the panel will still be activated. This event is triggered just before the Ajax request is made, so modifications can be made to
ui.jqXHR
and
ui.ajaxSettings
.
-
eventType: Event
-
uiType: Object
-
tabType: jQueryThe tab that is being loaded.
-
panelType: jQueryThe panel which will be populated by the Ajax response.
-
jqXHRType: jqXHRThe
jqXHR
object that is requesting the content. -
ajaxSettingsType: ObjectThe settings that will be used by
jQuery.ajax
to request the content.
-
create( event, ui )
Triggered when the tabs are created. If the tabs are collapsed,
ui.tab
and
ui.panel
will be empty jQuery objects.
load( event, ui )
Triggered after a remote tab has been loaded.
Tabs are generally used to break content into multiple sections that can be swapped to save space, much like an accordion.
The content for each tab panel can be defined in-page or can be loaded via Ajax; both are handled automatically based on the href
of the anchor associated with the tab. By default tabs are activated on click, but the events can be changed to hover via the event
option.
Keyboard interaction
When focus is on a tab, the following key commands are available:
- UP/LEFT: Move focus to the previous tab. If on first tab, moves focus to last tab. Activate focused tab after a short delay.
- DOWN/RIGHT: Move focus to the next tab. If on last tab, moves focus to first tab. Activate focused tab after a short delay.
- HOME: Move focus to the first tab. Activate focused tab after a short delay.
- END: Move focus to the last tab. Activate focused tab after a short delay.
- SPACE: Activate panel associated with focused tab.
- ENTER: Activate or toggle panel associated with focused tab.
- ALT+PAGE UP: Move focus to the previous tab and immediately activate.
- ALT+PAGE DOWN: Move focus to the next tab and immediately activate.
When focus is in a panel, the following key commands are available:
- CTRL+UP: Move focus to associated tab.
- ALT+PAGE UP: Move focus to the previous tab and immediately activate.
- ALT+PAGE DOWN: Move focus to the next tab and immediately activate.
Additional Notes:
- This widget requires some functional CSS, otherwise it won't work. If you build a custom theme, use the widget's 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 demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/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>First tab is active by default:</p>
<pre><code>$( "#tabs" ).tabs(); </code></pre>
</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>