topical media & game development
lib-jquery-style-custom-development-bundle-docs-tabs.htm / htm
<ul class="UIAPIPlugin-toc">
<li><a href="#overview">Overview</a></li>
<li><a href="#options">Options</a></li>
<li><a href="#events">Events</a></li>
<li><a href="#methods">Methods</a></li>
<li><a href="#theming">Theming</a></li>
</ul>
<div class="UIAPIPlugin">
<h1>jQuery UI Tabs</h1>
<div id="overview">
<h2 class="top-header">Overview</h2>
<div id="overview-main">
<p>Tabs are generally used to break content into multiple sections that can be swapped to save space, much like an accordion.</p>
<p>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.</p>
<table id="toc" class="toc" summary="Contents"><tr><td><div id="toctitle"><h2>Contents</h2></div>
<ul>
<li class="toclevel-1"><a href="#Events"><span class="tocnumber">1</span> <span class="toctext">Events</span></a></li>
<li class="toclevel-1"><a href="#Ajax_mode"><span class="tocnumber">2</span> <span class="toctext">Ajax mode</span></a>
<ul>
<li class="toclevel-2"><a href="#Back_button_and_bookmarking"><span class="tocnumber">2.1</span> <span class="toctext">Back button and bookmarking</span></a></li>
</ul>
</li>
<li class="toclevel-1"><a href="#How_to..."><span class="tocnumber">3</span> <span class="toctext">How to...</span></a>
<ul>
<li class="toclevel-2"><a href="#...retrieve_the_index_of_the_currently_selected_tab"><span class="tocnumber">3.1</span> <span class="toctext">...retrieve the index of the currently selected tab</span></a></li>
<li class="toclevel-2"><a href="#...open_links_in_the_current_tab_instead_of_leaving_the_page"><span class="tocnumber">3.2</span> <span class="toctext">...open links in the current tab instead of leaving the page</span></a></li>
<li class="toclevel-2"><a href="#...select_a_tab_from_a_text_link_instead_of_clicking_a_tab_itself"><span class="tocnumber">3.3</span> <span class="toctext">...select a tab from a text link instead of clicking a tab itself</span></a></li>
<li class="toclevel-2"><a href="#...prevent_switching_to_the_tab_on_click_depending_on_form_validation"><span class="tocnumber">3.4</span> <span class="toctext">...prevent switching to the tab on click depending on form validation</span></a></li>
<li class="toclevel-2"><a href="#...immediately_select_a_just_added_tab"><span class="tocnumber">3.5</span> <span class="toctext">...immediately select a just added tab</span></a></li>
<li class="toclevel-2"><a href="#...open_a_tab_in_a_new_window_instead"><span class="tocnumber">3.6</span> <span class="toctext">...open a tab in a new window instead</span></a></li>
<li class="toclevel-2"><a href="#...prevent_a_FOUC_.28Flash_of_Unstyled_Content.29_before_tabs_are_initialized"><span class="tocnumber">3.7</span> <span class="toctext">...prevent a FOUC (Flash of Unstyled Content) before tabs are initialized</span></a></li>
</ul>
</li>
<li class="toclevel-1"><a href="#Why_does..."><span class="tocnumber">4</span> <span class="toctext">Why does...</span></a>
<ul>
<li class="toclevel-2"><a href="#...my_slider.2C_Google_Map.2C_sIFR_etc._not_work_when_placed_in_a_hidden_.28inactive.29_tab.3F"><span class="tocnumber">4.1</span> <span class="toctext">...my slider, Google Map, sIFR etc. not work when placed in a hidden (inactive) tab?</span></a></li>
</ul>
</li>
</ul>
</td></tr></table><script type="text/javascript"> if (window.showTocToggle) { var tocShowText = "show"; var tocHideText = "hide"; showTocToggle(); } </script>
<div class="editsection" style="float:right;margin-left:5px;">[<a href="http://docs.jquery.com/action/edit/Template:UIAPIPlugin?section=1" title="Template:UIAPIPlugin">edit</a>]</div><a name="Events"></a><h2>Events</h2>
<p>A series of events fire when interacting with a tabs interface:
</p>
<ul><li> tabsselect, tabsload, tabsshow (in that order)
</li><li> tabsadd, tabsremove
</li><li> tabsenable, tabsdisable
</li></ul>
<p>Event binding example:
</p>
<pre>$('#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
});</pre>
<p>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).
</p>
<div class="editsection" style="float:right;margin-left:5px;">[<a href="http://docs.jquery.com/action/edit/Template:UIAPIPlugin?section=2" title="Template:UIAPIPlugin">edit</a>]</div><a name="Ajax_mode"></a><h2> Ajax mode </h2>
<p>Tabs supports loading tab content via Ajax in an unobtrusive manner.
</p><p>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:
</p>
<pre>
<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>
</pre>
<p>Obviously this degrades gracefully - the links, e.g. the content, will still be accessible with JavaScript disabled.
</p><p>Note that if you wish to reuse an existing container, you
could do so by matching a title attribute and the container's id:
</p>
<pre>
<li><a href="hello/world.html" title="Todo Overview"> ... </a></li>
</pre>
<p>and a container like:
</p>
<pre>
<div id="Todo_Overview"> ... </div>
</pre>
<p>(Note how white space is replaced with an underscore)
</p><p>This is useful if you want a human readable hash in the URL instead of
a cryptic generated one.
</p>
<div class="editsection" style="float:right;margin-left:5px;">[<a href="http://docs.jquery.com/action/edit/Template:UIAPIPlugin?section=3" title="Template:UIAPIPlugin">edit</a>]</div><a name="Back_button_and_bookmarking"></a><h3>Back button and bookmarking</h3>
<p>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.
</p>
<div class="editsection" style="float:right;margin-left:5px;">[<a href="http://docs.jquery.com/action/edit/Template:UIAPIPlugin?section=4" title="Template:UIAPIPlugin">edit</a>]</div><a name="How_to..."></a><h2>How to...</h2>
<div class="editsection" style="float:right;margin-left:5px;">[<a href="http://docs.jquery.com/action/edit/Template:UIAPIPlugin?section=5" title="Template:UIAPIPlugin">edit</a>]</div><a name="...retrieve_the_index_of_the_currently_selected_tab"></a><h3>...retrieve the index of the currently selected tab</h3>
<pre>var tabs.tabs('option', 'selected'); // => 0</pre>
<div class="editsection" style="float:right;margin-left:5px;">[<a href="http://docs.jquery.com/action/edit/Template:UIAPIPlugin?section=6" title="Template:UIAPIPlugin">edit</a>]</div><a name="...open_links_in_the_current_tab_instead_of_leaving_the_page"></a><h3>...open links in the current tab instead of leaving the page</h3>
<p>"Hijax" links after tab content has been loaded:
</p>
<pre>$('#example').tabs({
load: function(event, ui) {
$('a', ui.panel).click(function() {
$(ui.panel).load(this.href);
return false;
});
}
});</pre>
<div class="editsection" style="float:right;margin-left:5px;">[<a href="http://docs.jquery.com/action/edit/Template:UIAPIPlugin?section=7" title="Template:UIAPIPlugin">edit</a>]</div><a name="...select_a_tab_from_a_text_link_instead_of_clicking_a_tab_itself"></a><h3>...select a tab from a text link instead of clicking a tab itself</h3>
<pre>var tabs.tabs('select', 2); // switch to third tab
return false;
});</pre>
<div class="editsection" style="float:right;margin-left:5px;">[<a href="http://docs.jquery.com/action/edit/Template:UIAPIPlugin?section=8" title="Template:UIAPIPlugin">edit</a>]</div><a name="...prevent_switching_to_the_tab_on_click_depending_on_form_validation"></a><h3>...prevent switching to the tab on click depending on form validation</h3>
<p>Returning false in the tabs select handler prevents the clicked tab from becoming selected.
</p>
<pre>$('#example').tabs({
select: function(event, ui) {
var isValid = ... // form validation returning true or false
return isValid;
}
});</pre>
<div class="editsection" style="float:right;margin-left:5px;">[<a href="http://docs.jquery.com/action/edit/Template:UIAPIPlugin?section=9" title="Template:UIAPIPlugin">edit</a>]</div><a name="...immediately_select_a_just_added_tab"></a><h3>...immediately select a just added tab</h3>
<pre>var tabs.tabs('select', '#' + ui.panel.id);
}
});</pre>
<div class="editsection" style="float:right;margin-left:5px;">[<a href="http://docs.jquery.com/action/edit/Template:UIAPIPlugin?section=10" title="Template:UIAPIPlugin">edit</a>]</div><a name="...open_a_tab_in_a_new_window_instead"></a><h3>...open a tab in a new window instead</h3>
<p>Note that opening a tab in a new window is unexpected, e.g.
inconsistent behaviour exposing a usablity problem (<a href="http://www.useit.com/alertbox/tabs.html" class="external free" title="http://www.useit.com/alertbox/tabs.html">http://www.useit.com/alertbox/tabs.html>).
</p>
<pre>$('#example').tabs({
select: function(event, ui) {
location.href = .ajax).</p>
</div>
<div class="option-examples">
<h4>Code examples</h4>
<dl class="option-examples-list">
<dt>
Initialize a tabs with the <code>ajaxOptions</code> option specified.
</dt>
<dd>
<pre><code>$('.selector').tabs({ ajaxOptions: { async: false } });</code></pre>
</dd>
<dt>
Get or set the <code>ajaxOptions</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var ajaxOptions = $('.selector').tabs('option', 'ajaxOptions');
//setter
$('.selector').tabs('option', 'ajaxOptions', { async: false });</code></pre>
</dd>
</dl>
</div>
</li>
<li class="option" id="option-cache">
<div class="option-header">
<h3 class="option-name"><a href="#option-cache">cache</a></h3>
<dl>
<dt class="option-type-label">Type:</dt>
<dd class="option-type">Boolean</dd>
<dt class="option-default-label">Default:</dt>
<dd class="option-default">false</dd>
</dl>
</div>
<div class="option-description">
<p>Whether 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.</p>
</div>
<div class="option-examples">
<h4>Code examples</h4>
<dl class="option-examples-list">
<dt>
Initialize a tabs with the <code>cache</code> option specified.
</dt>
<dd>
<pre><code>$('.selector').tabs({ cache: true });</code></pre>
</dd>
<dt>
Get or set the <code>cache</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var cache = $('.selector').tabs('option', 'cache');
//setter
$('.selector').tabs('option', 'cache', true);</code></pre>
</dd>
</dl>
</div>
</li>
<li class="option" id="option-collapsible">
<div class="option-header">
<h3 class="option-name"><a href="#option-collapsible">collapsible</a></h3>
<dl>
<dt class="option-type-label">Type:</dt>
<dd class="option-type">Boolean</dd>
<dt class="option-default-label">Default:</dt>
<dd class="option-default">false</dd>
</dl>
</div>
<div class="option-description">
<p>Set to true to allow an already selected tab to become unselected again upon reselection.</p>
</div>
<div class="option-examples">
<h4>Code examples</h4>
<dl class="option-examples-list">
<dt>
Initialize a tabs with the <code>collapsible</code> option specified.
</dt>
<dd>
<pre><code>$('.selector').tabs({ collapsible: true });</code></pre>
</dd>
<dt>
Get or set the <code>collapsible</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var collapsible = $('.selector').tabs('option', 'collapsible');
//setter
$('.selector').tabs('option', 'collapsible', true);</code></pre>
</dd>
</dl>
</div>
</li>
<li class="option" id="option-cookie">
<div class="option-header">
<h3 class="option-name"><a href="#option-cookie">cookie</a></h3>
<dl>
<dt class="option-type-label">Type:</dt>
<dd class="option-type">Object</dd>
<dt class="option-default-label">Default:</dt>
<dd class="option-default">null</dd>
</dl>
</div>
<div class="option-description">
<p>Store the latest selected tab in a cookie. The cookie is then used to determine the initially selected tab if the <i>selected</i> option is not defined. Requires cookie plugin. The object needs to have key/value pairs of the form the cookie plugin expects as options. Available options (example): { expires: 7, path: '/', domain: 'jquery.com', secure: true }. Since jQuery UI 1.7 it is also possible to define the cookie name being used via <i>name</i> property.</p>
</div>
<div class="option-examples">
<h4>Code examples</h4>
<dl class="option-examples-list">
<dt>
Initialize a tabs with the <code>cookie</code> option specified.
</dt>
<dd>
<pre><code>$('.selector').tabs({ cookie: { expires: 30 } });</code></pre>
</dd>
<dt>
Get or set the <code>cookie</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var cookie = $('.selector').tabs('option', 'cookie');
//setter
$('.selector').tabs('option', 'cookie', { expires: 30 });</code></pre>
</dd>
</dl>
</div>
</li>
<li class="option" id="option-deselectable">
<div class="option-header">
<h3 class="option-name"><a href="#option-deselectable">deselectable</a></h3>
<dl>
<dt class="option-type-label">Type:</dt>
<dd class="option-type">Boolean</dd>
<dt class="option-default-label">Default:</dt>
<dd class="option-default">false</dd>
</dl>
</div>
<div class="option-description">
<p>deprecated in jQuery UI 1.7, use collapsible.</p>
</div>
<div class="option-examples">
<h4>Code examples</h4>
<dl class="option-examples-list">
<dt>
Initialize a tabs with the <code>deselectable</code> option specified.
</dt>
<dd>
<pre><code>$('.selector').tabs({ deselectable: true });</code></pre>
</dd>
<dt>
Get or set the <code>deselectable</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var deselectable = $('.selector').tabs('option', 'deselectable');
//setter
$('.selector').tabs('option', 'deselectable', true);</code></pre>
</dd>
</dl>
</div>
</li>
<li class="option" id="option-disabled">
<div class="option-header">
<h3 class="option-name"><a href="#option-disabled">disabled</a></h3>
<dl>
<dt class="option-type-label">Type:</dt>
<dd class="option-type">Array<Number></dd>
<dt class="option-default-label">Default:</dt>
<dd class="option-default">[]</dd>
</dl>
</div>
<div class="option-description">
<p>An array containing the position of the tabs (zero-based index) that should be disabled on initialization.</p>
</div>
<div class="option-examples">
<h4>Code examples</h4>
<dl class="option-examples-list">
<dt>
Initialize a tabs with the <code>disabled</code> option specified.
</dt>
<dd>
<pre><code>$('.selector').tabs({ disabled: [1, 2] });</code></pre>
</dd>
<dt>
Get or set the <code>disabled</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var disabled = $('.selector').tabs('option', 'disabled');
//setter
$('.selector').tabs('option', 'disabled', [1, 2]);</code></pre>
</dd>
</dl>
</div>
</li>
<li class="option" id="option-event">
<div class="option-header">
<h3 class="option-name"><a href="#option-event">event</a></h3>
<dl>
<dt class="option-type-label">Type:</dt>
<dd class="option-type">String</dd>
<dt class="option-default-label">Default:</dt>
<dd class="option-default">'click'</dd>
</dl>
</div>
<div class="option-description">
<p>The type of event to be used for selecting a tab.</p>
</div>
<div class="option-examples">
<h4>Code examples</h4>
<dl class="option-examples-list">
<dt>
Initialize a tabs with the <code>event</code> option specified.
</dt>
<dd>
<pre><code>$('.selector').tabs({ event: 'mouseover' });</code></pre>
</dd>
<dt>
Get or set the <code>event</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var event = $('.selector').tabs('option', 'event');
//setter
$('.selector').tabs('option', 'event', 'mouseover');</code></pre>
</dd>
</dl>
</div>
</li>
<li class="option" id="option-fx">
<div class="option-header">
<h3 class="option-name"><a href="#option-fx">fx</a></h3>
<dl>
<dt class="option-type-label">Type:</dt>
<dd class="option-type">Options, Array<Options></dd>
<dt class="option-default-label">Default:</dt>
<dd class="option-default">null</dd>
</dl>
</div>
<div class="option-description">
<p>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").</p>
</div>
<div class="option-examples">
<h4>Code examples</h4>
<dl class="option-examples-list">
<dt>
Initialize a tabs with the <code>fx</code> option specified.
</dt>
<dd>
<pre><code>$('.selector').tabs({ fx: { opacity: 'toggle' } });</code></pre>
</dd>
<dt>
Get or set the <code>fx</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var fx = $('.selector').tabs('option', 'fx');
//setter
$('.selector').tabs('option', 'fx', { opacity: 'toggle' });</code></pre>
</dd>
</dl>
</div>
</li>
<li class="option" id="option-idPrefix">
<div class="option-header">
<h3 class="option-name"><a href="#option-idPrefix">idPrefix</a></h3>
<dl>
<dt class="option-type-label">Type:</dt>
<dd class="option-type">String</dd>
<dt class="option-default-label">Default:</dt>
<dd class="option-default">'ui-tabs-'</dd>
</dl>
</div>
<div class="option-description">
<p>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
(C) Æliens
20/2/2008
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.