UI/Tabs
From jQuery JavaScript Library
Organize your content into navigable tabs.
Contents |
Depends on
- renamed "ui.core.js" from "ui.base.js"
- Optional, for using the cookie option: jquery.cookie.js
Example
Documentation
Events
Certain events are fired when interacting with a tabs interface: tabsselect, tabsload, tabsshow (in that order), tabsadd, tabsremove, tabsenable, tabsdisable.
Example:
$('.ui-tabs-nav').bind('tabsselect', function(event, ui) {
ui.instance // internal widget instance
ui.options // options used to intialize this widget
ui.tab // anchor element of the currently shown tab
ui.panel // element, that contains the contents of the currently shown tab
});
Note that if a handler for the tabsselect event returns false, the clicked tab will not be 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="container">
<ul>
<li><a href="ahah_1.html">Content 1</a></li>
<li><a href="ahah_2.html">Content 2</a></li>
<li><a href="ahah_3.html">Content 3</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.
FAQ
Does UI Tabs support back button and bookmarking of tabs?
Tabs 2 already supported that 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 can I...
...retrieve the currently selected tab?
var $tabs = $('#example').tabs();
var selected = $tabs.data('selected.tabs');
...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(ui) {
var isValid = ... // form validation returning true or false
return isValid;
}
});
...immediately select a just added tab?
var $tabs = $('#example').tabs({
add: function(ui) {
$tabs.tabs('select', '#' + ui.panel.id);
}
});
...open a tab in a new window instead?
Note that opening a tab in a new window is unexpected, e.g. inconsistent behaviour exposing a serious usablity problem (http://www.useit.com/alertbox/tabs.html).
$('#example').tabs({
select: function(ui) {
location.href = $.data(ui.tab, 'load.tabs');
return false;
}
});