.tabs()
Categories: UI
.tabs( [ options ] )
Plugin: jQuery.ui.tabs
Description: Apply the Tabs widget for each element in the set of matched elements
-
.tabs( [ options ] )
version added: 1.0options A map of additional options pass to the widget.
Tabs are generally used to break content into multiple sections that can be swapped to save space, much like an accordion.
By default a tab widget will swap between tabbed sections onClick, but the events can be changed to onHover through an option. Tab content can be loaded via Ajax by setting an href on a tab.
NOTE: Tabs created dynamically using .tabs( "add", ... ) are given an id of ui-tabs-NUM, where NUM is an auto-incrementing id. If you use this naming convention for your own elements, you may encounter problems.
Events
A series of events fire when interacting with a tabs interface:
- tabsselect, tabsload, tabsshow (in that order)
- tabsadd, tabsremove
- tabsenable, tabsdisable
Event binding example:
$('#example').bind('tabsselect', function(event, ui) { // Objects available in the function context: ui.tab // anchor element of the selected (clicked) tab ui.panel // element, that contains the selected/clicked tab contents ui.index // zero-based index of the selected (clicked) tab });
Note that if a handler for the tabsselect event returns false, the clicked tab will not become selected (useful for example if switching to the next tab requires a form validation).
Ajax mode
Tabs supports loading tab content via Ajax in an unobtrusive manner.
The HTML you need is slightly different from the one that is used for static tabs: A list of links pointing to existing resources (from where the content gets loaded) and no additional containers at all (unobtrusive!). The containers' markup is going to be created on the fly:
<div id="example"> <ul> <li><a href="ahah_1.html"><span>Content 1</span></a></li> <li><a href="ahah_2.html"><span>Content 2</span></a></li> <li><a href="ahah_3.html"><span>Content 3</span></a></li> </ul> </div>
Obviously this degrades gracefully - the links, e.g. the content, will still be accessible with JavaScript disabled.
Note that if you wish to reuse an existing container, you could do so by matching a title attribute and the container's id:
<li><a href="hello/world.html" title="Todo Overview"> ... </a></li>
and a container like:
<div id="Todo_Overview"> ... </div>
(Note how white space is replaced with an underscore)
This is useful if you want a human readable hash in the URL instead of a cryptic generated one.
Back button and bookmarking
Tabs 2 already supported this functionality, although the history plugin needs a rewrite first (it doesn't support Safari 3 and is in general a little inflexible) before it can be build back into the tabs. It is planned and Klaus is working on it whenever he finds the time. Actual bugs in the UI Tabs plugin itself always have higher priority though.
How to...
...retrieve the index of the currently selected tab
var $tabs = $('#example').tabs(); var selected = $tabs.tabs('option', 'selected'); // => 0
...open links in the current tab instead of leaving the page
"Hijax" links after tab content has been loaded:
$('#example').tabs({ load: function(event, ui) { $('a', ui.panel).click(function() { $(ui.panel).load(this.href); return false; }); } });
...select a tab from a text link instead of clicking a tab itself
var $tabs = $('#example').tabs(); // first tab selected $('#my-text-link').click(function() { // bind click event to link $tabs.tabs('select', 2); // switch to third tab return false; });
...prevent switching to the tab on click depending on form validation
Returning false in the tabs select handler prevents the clicked tab from becoming selected.
$('#example').tabs({ select: function(event, ui) { var isValid = ... // form validation returning true or false return isValid; } });
...immediately select a just added tab
var $tabs = $('#example').tabs({ add: function(event, ui) { $tabs.tabs('select', '#' + ui.panel.id); } });
...follow a tab's URL instead of loading its content via ajax
Note that opening a tab in a new window is unexpected, e.g. inconsistent behaviour exposing a usablity problem (http://www.useit.com/alertbox/tabs.html).
$('#example').tabs({ select: function(event, ui) { var url = $.data(ui.tab, 'load.tabs'); if( url ) { location.href = url; return false; } return true; } });
...prevent a FOUC (Flash of Unstyled Content) before tabs are initialized
Add the necessary classes to hide an inactive tab panel to the HTML right away - note that this will not degrade gracefully with JavaScript being disabled:
<div id="example" class="ui-tabs"> ... <div id="a-tab-panel" class="ui-tabs-hide"> </div> ... </div>
Why does...
...my slider, Google Map, sIFR etc. not work when placed in a hidden (inactive) tab?
Any component that requires some dimensional computation for its initialization won't work in a hidden tab, because the tab panel itself is hidden via display: none
so that any elements inside won't report their actual width and height (0 in most browsers).
There's an easy workaround. Use the off-left technique for hiding inactive tab panels. E.g. in your style sheet replace the rule for the class selector ".ui-tabs .ui-tabs-hide" with
.ui-tabs .ui-tabs-hide { position: absolute; left: -10000px; }
For Google maps you can also resize the map once the tab is displayed like this:
$('#example').bind('tabsshow', function(event, ui) { if (ui.panel.id == "map-tab") { resizeMap(); } });resizeMap() will call Google Maps' checkResize() on the particular map.
-
create
This event is triggered when tabs is created.
-
select
This event is triggered when clicking a tab.
-
load
This event is triggered after the content of a remote tab has been loaded.
-
show
This event is triggered when a tab is shown.
-
add
This event is triggered when a tab is added.
-
remove
This event is triggered when a tab is removed.
-
enable
This event is triggered when a tab is enabled.
-
disable
This event is triggered when a tab is disabled.
-
destroy
-
.tabs( "destroy" )
version added: 1.0
Remove the tabs functionality completely. This will return the element back to its pre-init state.
-
-
disable
-
.tabs( "disable" )
version added: 1.0
Disable the tabs.
-
-
enable
-
.tabs( "enable" )
version added: 1.0
Enable the tabs.
-
-
option
-
.tabs( "option" , optionName , [value] )
version added: 1.0
Get or set any tabs option. If no value is specified, will act as a getter.
-
-
option
-
.tabs( "option" , options )
version added: 1.0
Set multiple tabs options at once by providing an options object.
-
-
widget
-
.tabs( "widget" )
version added: 1.0
Returns the .ui-tabs element.
-
-
add
-
.tabs( "add" , url , label , [index] )
version added: 1.0
Add a new tab. The second argument is 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. The third is the zero-based position where to insert the new tab. Optional, by default a new tab is appended at the end.
-
-
remove
-
.tabs( "remove" , index )
version added: 1.0
Remove a tab. The second argument is the zero-based index of the tab to be removed.
-
-
enable
-
.tabs( "enable" , index )
version added: 1.0
Enable a disabled tab. To enable more than one tab at once reset the disabled property like:
$('#example').tabs("option","disabled",[]);
. The second argument is the zero-based index of the tab to be enabled. -
-
disable
-
.tabs( "disable" , index )
version added: 1.0
Disable a tab. The selected tab cannot be disabled. To disable more than one tab at once use:
$('#example').tabs("option","disabled", [1, 2, 3]);
The second argument is the zero-based index of the tab to be disabled. -
-
select
-
.tabs( "select" , index )
version added: 1.0
Select a tab, as if it were clicked. The second argument is the 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).
-
-
load
-
.tabs( "load" , index )
version added: 1.0
Reload the content of an Ajax tab programmatically. This method always loads the tab content from the remote location, even if cache is set to true. The second argument is the zero-based index of the tab to be reloaded.
-
-
url
-
.tabs( "url" , index , url )
version added: 1.0
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. The second argument is the zero-based index of the tab of which its URL is to be updated. The third is a URL the content of the tab is loaded from.
-
-
length
-
.tabs( "length" )
version added: 1.0
Retrieve the number of tabs of the first matched tab pane.
-
-
abort
-
.tabs( "abort" )
version added: 1.0
Terminate all running tab ajax requests and animations.
-
-
rotate
-
.tabs( "rotate" , ms , [continuing] )
version added: 1.0
Set up an automatic rotation through tabs of a tab pane. The second argument is an amount of time in milliseconds until the next tab in the cycle gets activated. Use 0 or null to stop the rotation. The third controls whether or not to continue the rotation after a tab has been selected by a user. Default: false.
-