source: ether_statistics/web/resources/js/jquery-ui-1.8.16.custom/development-bundle/docs/tabs.html @ 569

Last change on this file since 569 was 569, checked in by vmipsl, 12 years ago

Nouveau projet
File size: 50.6 KB
Line 
1
2<ul class="UIAPIPlugin-toc">
3<li><a href="#overview">Overview</a></li>
4<li><a href="#options">Options</a></li>
5<li><a href="#events">Events</a></li>
6<li><a href="#methods">Methods</a></li>
7<li><a href="#theming">Theming</a></li>
8</ul>
9<div class="UIAPIPlugin">
10  <h1>jQuery UI Tabs</h1>
11  <div id="overview">
12    <h2 class="top-header">Overview</h2>
13    <div id="overview-main">
14        <p>Tabs are generally used to break content into multiple sections that can be swapped to save space, much like an accordion.</p>
15<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>
16<p><em>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.</em></p>
17<table id="toc" class="toc" summary="Contents"><tr><td><div id="toctitle"><h2>Contents</h2></div>
18<ul>
19<li class="toclevel-1"><a href="#Events"><span class="tocnumber">1</span> <span class="toctext">Events</span></a></li>
20<li class="toclevel-1"><a href="#Ajax_mode"><span class="tocnumber">2</span> <span class="toctext">Ajax mode</span></a>
21<ul>
22<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>
23</ul>
24</li>
25<li class="toclevel-1"><a href="#How_to..."><span class="tocnumber">3</span> <span class="toctext">How to...</span></a>
26<ul>
27<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>
28<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>
29<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>
30<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>
31<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>
32<li class="toclevel-2"><a href="#...follow_a_tab.27s_URL_instead_of_loading_its_content_via_ajax"><span class="tocnumber">3.6</span> <span class="toctext">...follow a tab's URL instead of loading its content via ajax</span></a></li>
33<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>
34</ul>
35</li>
36<li class="toclevel-1"><a href="#Why_does..."><span class="tocnumber">4</span> <span class="toctext">Why does...</span></a>
37<ul>
38<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>
39</ul>
40</li>
41</ul>
42</td></tr></table><script type="text/javascript"> if (window.showTocToggle) { var tocShowText = "show"; var tocHideText = "hide"; showTocToggle(); } </script>
43<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>
44<p>A series of events fire when interacting with a tabs interface:
45</p>
46<ul><li> tabsselect, tabsload, tabsshow (in that order)
47</li><li> tabsadd, tabsremove
48</li><li> tabsenable, tabsdisable
49</li></ul>
50<p>Event binding example:
51</p>
52<pre>$('#example').bind('tabsselect', function(event, ui) {
53
54    // Objects available in the function context:
55    ui.tab     // anchor element of the selected (clicked) tab
56    ui.panel   // element, that contains the selected/clicked tab contents
57    ui.index   // zero-based index of the selected (clicked) tab
58
59});</pre>
60<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).
61</p>
62<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>
63<p>Tabs supports loading tab content via Ajax in an unobtrusive manner.
64</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:
65</p>
66<pre>
67&lt;div id=&quot;example&quot;&gt;
68     &lt;ul&gt;
69         &lt;li&gt;&lt;a href=&quot;ahah_1.html&quot;&gt;&lt;span&gt;Content 1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
70         &lt;li&gt;&lt;a href=&quot;ahah_2.html&quot;&gt;&lt;span&gt;Content 2&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
71         &lt;li&gt;&lt;a href=&quot;ahah_3.html&quot;&gt;&lt;span&gt;Content 3&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
72     &lt;/ul&gt;
73&lt;/div&gt;
74</pre>
75<p>Obviously this degrades gracefully - the links, e.g. the content, will still be accessible with JavaScript disabled.
76</p><p>Note that if you wish to reuse an existing container, you
77could do so by matching a title attribute and the container's id:
78</p>
79<pre>
80&lt;li&gt;&lt;a href=&quot;hello/world.html&quot; title=&quot;Todo Overview&quot;&gt; ... &lt;/a&gt;&lt;/li&gt;
81</pre>
82<p>and a container like:
83</p>
84<pre>
85&lt;div id=&quot;Todo_Overview&quot;&gt; ... &lt;/div&gt;
86</pre>
87<p>(Note how white space is replaced with an underscore)
88</p><p>This is useful if you want a human readable hash in the URL instead of
89a cryptic generated one.
90</p>
91<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>
92<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.
93</p>
94<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>
95<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>
96<pre>var $tabs = $('#example').tabs();
97var selected = $tabs.tabs('option', 'selected'); // =&gt; 0</pre>
98<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>
99<p>"Hijax" links after tab content has been loaded:
100</p>
101<pre>$('#example').tabs({
102    load: function(event, ui) {
103        $('a', ui.panel).click(function() {
104            $(ui.panel).load(this.href);
105            return false;
106        });
107    }
108});</pre>
109<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>
110<pre>var $tabs = $('#example').tabs(); // first tab selected
111
112$('#my-text-link').click(function() { // bind click event to link
113    $tabs.tabs('select', 2); // switch to third tab
114    return false;
115});</pre>
116<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>
117<p>Returning false in the tabs select handler prevents the clicked tab from becoming selected.
118</p>
119<pre>$('#example').tabs({
120    select: function(event, ui) {
121        var isValid = ... // form validation returning true or false
122        return isValid;
123    }
124});</pre>
125<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>
126<pre>var $tabs = $('#example').tabs({
127    add: function(event, ui) {
128        $tabs.tabs('select', '#' + ui.panel.id);
129    }
130});</pre>
131<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="...follow_a_tab.27s_URL_instead_of_loading_its_content_via_ajax"></a><h3>...follow a tab's URL instead of loading its content via ajax</h3>
132<p>Note that opening a tab in a new window is unexpected, e.g.
133inconsistent 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</a>).
134</p>
135<pre>$('#example').tabs({
136    select: function(event, ui) {
137        var url = $.data(ui.tab, 'load.tabs');
138        if( url ) {
139            location.href = url;
140            return false;
141        }
142        return true;
143    }
144});</pre>
145<p><br />
146</p>
147<div class="editsection" style="float:right;margin-left:5px;">[<a href="http://docs.jquery.com/action/edit/Template:UIAPIPlugin?section=11" title="Template:UIAPIPlugin">edit</a>]</div><a name="...prevent_a_FOUC_.28Flash_of_Unstyled_Content.29_before_tabs_are_initialized"></a><h3>...prevent a FOUC (Flash of Unstyled Content) before tabs are initialized</h3>
148<p>Add the necessary classes to hide an inactive tab panel to the HTML right away - note that this will <b>not</b> degrade gracefully with JavaScript being disabled:
149</p>
150<pre>&lt;div id=&quot;example&quot; class=&quot;ui-tabs&quot;&gt;
151  ...
152  &lt;div id=&quot;a-tab-panel&quot; class=&quot;ui-tabs-hide&quot;&gt; &lt;/div&gt;
153  ...
154&lt;/div&gt;</pre>
155<div class="editsection" style="float:right;margin-left:5px;">[<a href="http://docs.jquery.com/action/edit/Template:UIAPIPlugin?section=12" title="Template:UIAPIPlugin">edit</a>]</div><a name="Why_does..."></a><h2>Why does...</h2>
156<div class="editsection" style="float:right;margin-left:5px;">[<a href="http://docs.jquery.com/action/edit/Template:UIAPIPlugin?section=13" title="Template:UIAPIPlugin">edit</a>]</div><a name="...my_slider.2C_Google_Map.2C_sIFR_etc._not_work_when_placed_in_a_hidden_.28inactive.29_tab.3F"></a><h3>...my slider, Google Map, sIFR etc. not work when placed in a hidden (inactive) tab?</h3>
157<p>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 <code>display: none</code> so that any elements inside won't report their actual width and height (0 in most browsers).
158</p><p>There's an easy workaround. Use the <em>off-left technique</em> for hiding inactive tab panels. E.g. in your style sheet replace the rule for the class selector ".ui-tabs .ui-tabs-hide" with
159</p>
160<pre>.ui-tabs .ui-tabs-hide {
161    position: absolute;
162    left: -10000px;
163}</pre>
164<p>For Google maps you can also resize the map once the tab is displayed like this:
165</p>
166<pre>$('#example').bind('tabsshow', function(event, ui) {
167    if (ui.panel.id == &quot;map-tab&quot;) {
168        resizeMap();
169    }
170});</pre>
171resizeMap() will call Google Maps' checkResize() on the particular map.
172    </div>
173    <div id="overview-dependencies">
174        <h3>Dependencies</h3>
175        <ul>
176<li>UI Core</li>
177<li>UI Widget</li>
178<li><strong>Optional:</strong> <a href="http://plugins.jquery.com/project/cookie" class="external text" title="http://plugins.jquery.com/project/cookie">jquery.cookie.js</a> for use with <a href="http://jqueryui.com/demos/tabs/#option-cookie" class="external text" title="http://jqueryui.com/demos/tabs/#option-cookie">cookie option</a> (also included in development-bundle&gt;external folder.)</li>
179</ul>
180    </div>
181    <div id="overview-example">
182        <h3>Example</h3>
183        <div id="overview-example" class="example">
184<ul><li><a href="#demo"><span>Demo</span></a></li><li><a href="#source"><span>View Source</span></a></li></ul>
185<p><div id="demo" class="tabs-container" rel="295">
186A simple jQuery UI Tabs.<br />
187</p>
188<pre>$(&quot;#tabs&quot;).tabs();
189</pre>
190<p></div><div id="source" class="tabs-container">
191</p>
192<pre>&lt;!DOCTYPE html&gt;
193&lt;html&gt;
194&lt;head&gt;
195  &lt;link href=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;
196  &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js&quot;&gt;&lt;/script&gt;
197  &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js&quot;&gt;&lt;/script&gt;
198 
199  &lt;script&gt;
200  $(document).ready(function() {
201    $(&quot;#tabs&quot;).tabs();
202  });
203  &lt;/script&gt;
204&lt;/head&gt;
205&lt;body style="font-size:62.5%;"&gt;
206 
207&lt;div id=&quot;tabs&quot;&gt;
208    &lt;ul&gt;
209        &lt;li&gt;&lt;a href=&quot;#fragment-1&quot;&gt;&lt;span&gt;One&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
210        &lt;li&gt;&lt;a href=&quot;#fragment-2&quot;&gt;&lt;span&gt;Two&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
211        &lt;li&gt;&lt;a href=&quot;#fragment-3&quot;&gt;&lt;span&gt;Three&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
212    &lt;/ul&gt;
213    &lt;div id=&quot;fragment-1&quot;&gt;
214        &lt;p&gt;First tab is active by default:&lt;/p&gt;
215        &lt;pre&gt;&lt;code&gt;$('#example').tabs();&lt;/code&gt;&lt;/pre&gt;
216    &lt;/div&gt;
217    &lt;div id=&quot;fragment-2&quot;&gt;
218        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
219        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
220    &lt;/div&gt;
221    &lt;div id=&quot;fragment-3&quot;&gt;
222        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
223        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
224        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
225    &lt;/div&gt;
226&lt;/div&gt;
227&lt;/body&gt;
228&lt;/html&gt;
229</pre>
230<p></div>
231</p><p></div>
232    </div>
233  </div>
234  <div id="options">
235    <h2 class="top-header">Options</h2>
236    <ul class="options-list">
237     
238<li class="option" id="option-disabled">
239  <div class="option-header">
240    <h3 class="option-name"><a href="#option-disabled">disabled</a></h3>
241    <dl>
242      <dt class="option-type-label">Type:</dt>
243        <dd class="option-type">Boolean</dd>
244     
245      <dt class="option-default-label">Default:</dt>
246        <dd class="option-default">false</dd>
247     
248    </dl>
249  </div>
250  <div class="option-description">
251    <p>Disables (true) or enables (false) the tabs. Can be set when initialising (first creating) the tabs.</p>
252  </div>
253  <div class="option-examples">
254    <h4>Code examples</h4>
255    <dl class="option-examples-list">
256   
257<dt>
258  Initialize a tabs with the <code>disabled</code> option specified.
259</dt>
260<dd>
261<pre><code>$( ".selector" ).tabs({ disabled: true });</code></pre>
262</dd>
263
264   
265<dt>
266  Get or set the <code>disabled</code> option, after init.
267</dt>
268<dd>
269<pre><code>//getter
270var disabled = $( ".selector" ).tabs( "option", "disabled" );
271//setter
272$( ".selector" ).tabs( "option", "disabled", true );</code></pre>
273</dd>
274
275    </dl>
276  </div>
277</li>
278
279
280<li class="option" id="option-ajaxOptions">
281  <div class="option-header">
282    <h3 class="option-name"><a href="#option-ajaxOptions">ajaxOptions</a></h3>
283    <dl>
284      <dt class="option-type-label">Type:</dt>
285        <dd class="option-type">Options</dd>
286     
287      <dt class="option-default-label">Default:</dt>
288        <dd class="option-default">null</dd>
289     
290    </dl>
291  </div>
292  <div class="option-description">
293    <p>Additional Ajax options to consider when loading tab content (see $.ajax).</p>
294  </div>
295  <div class="option-examples">
296    <h4>Code examples</h4>
297    <dl class="option-examples-list">
298   
299<dt>
300  Initialize a tabs with the <code>ajaxOptions</code> option specified.
301</dt>
302<dd>
303<pre><code>$( ".selector" ).tabs({ ajaxOptions: { async: false } });</code></pre>
304</dd>
305
306   
307<dt>
308  Get or set the <code>ajaxOptions</code> option, after init.
309</dt>
310<dd>
311<pre><code>//getter
312var ajaxOptions = $( ".selector" ).tabs( "option", "ajaxOptions" );
313//setter
314$( ".selector" ).tabs( "option", "ajaxOptions", { async: false } );</code></pre>
315</dd>
316
317    </dl>
318  </div>
319</li>
320
321
322<li class="option" id="option-cache">
323  <div class="option-header">
324    <h3 class="option-name"><a href="#option-cache">cache</a></h3>
325    <dl>
326      <dt class="option-type-label">Type:</dt>
327        <dd class="option-type">Boolean</dd>
328     
329      <dt class="option-default-label">Default:</dt>
330        <dd class="option-default">false</dd>
331     
332    </dl>
333  </div>
334  <div class="option-description">
335    <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>
336  </div>
337  <div class="option-examples">
338    <h4>Code examples</h4>
339    <dl class="option-examples-list">
340   
341<dt>
342  Initialize a tabs with the <code>cache</code> option specified.
343</dt>
344<dd>
345<pre><code>$( ".selector" ).tabs({ cache: true });</code></pre>
346</dd>
347
348   
349<dt>
350  Get or set the <code>cache</code> option, after init.
351</dt>
352<dd>
353<pre><code>//getter
354var cache = $( ".selector" ).tabs( "option", "cache" );
355//setter
356$( ".selector" ).tabs( "option", "cache", true );</code></pre>
357</dd>
358
359    </dl>
360  </div>
361</li>
362
363
364<li class="option" id="option-collapsible">
365  <div class="option-header">
366    <h3 class="option-name"><a href="#option-collapsible">collapsible</a></h3>
367    <dl>
368      <dt class="option-type-label">Type:</dt>
369        <dd class="option-type">Boolean</dd>
370     
371      <dt class="option-default-label">Default:</dt>
372        <dd class="option-default">false</dd>
373     
374    </dl>
375  </div>
376  <div class="option-description">
377    <p>Set to true to allow an already selected tab to become unselected again upon reselection.</p>
378  </div>
379  <div class="option-examples">
380    <h4>Code examples</h4>
381    <dl class="option-examples-list">
382   
383<dt>
384  Initialize a tabs with the <code>collapsible</code> option specified.
385</dt>
386<dd>
387<pre><code>$( ".selector" ).tabs({ collapsible: true });</code></pre>
388</dd>
389
390   
391<dt>
392  Get or set the <code>collapsible</code> option, after init.
393</dt>
394<dd>
395<pre><code>//getter
396var collapsible = $( ".selector" ).tabs( "option", "collapsible" );
397//setter
398$( ".selector" ).tabs( "option", "collapsible", true );</code></pre>
399</dd>
400
401    </dl>
402  </div>
403</li>
404
405
406<li class="option" id="option-cookie">
407  <div class="option-header">
408    <h3 class="option-name"><a href="#option-cookie">cookie</a></h3>
409    <dl>
410      <dt class="option-type-label">Type:</dt>
411        <dd class="option-type">Object</dd>
412     
413      <dt class="option-default-label">Default:</dt>
414        <dd class="option-default">null</dd>
415     
416    </dl>
417  </div>
418  <div class="option-description">
419    <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 <a href="http://plugins.jquery.com/project/cookie" class="external text" title="http://plugins.jquery.com/project/cookie">cookie plugin</a>, which can also be found in the development-bundle&gt;external folder from the download builder. The object needs to have key/value pairs of the form the cookie plugin expects as options. Available options (example): &#123; expires: 7, path: '/', domain: 'jquery.com', secure: true &#125;. Since jQuery UI 1.7 it is also possible to define the cookie name being used via <i>name</i> property.</p>
420  </div>
421  <div class="option-examples">
422    <h4>Code examples</h4>
423    <dl class="option-examples-list">
424   
425<dt>
426  Initialize a tabs with the <code>cookie</code> option specified.
427</dt>
428<dd>
429<pre><code>$( ".selector" ).tabs({ cookie: { expires: 30 } });</code></pre>
430</dd>
431
432   
433<dt>
434  Get or set the <code>cookie</code> option, after init.
435</dt>
436<dd>
437<pre><code>//getter
438var cookie = $( ".selector" ).tabs( "option", "cookie" );
439//setter
440$( ".selector" ).tabs( "option", "cookie", { expires: 30 } );</code></pre>
441</dd>
442
443    </dl>
444  </div>
445</li>
446
447
448<li class="option" id="option-deselectable">
449  <div class="option-header">
450    <h3 class="option-name"><a href="#option-deselectable">deselectable</a></h3>
451    <dl>
452      <dt class="option-type-label">Type:</dt>
453        <dd class="option-type">Boolean</dd>
454     
455      <dt class="option-default-label">Default:</dt>
456        <dd class="option-default">false</dd>
457     
458    </dl>
459  </div>
460  <div class="option-description">
461    <p>deprecated in jQuery UI 1.7, use collapsible.</p>
462  </div>
463  <div class="option-examples">
464    <h4>Code examples</h4>
465    <dl class="option-examples-list">
466   
467<dt>
468  Initialize a tabs with the <code>deselectable</code> option specified.
469</dt>
470<dd>
471<pre><code>$( ".selector" ).tabs({ deselectable: true });</code></pre>
472</dd>
473
474   
475<dt>
476  Get or set the <code>deselectable</code> option, after init.
477</dt>
478<dd>
479<pre><code>//getter
480var deselectable = $( ".selector" ).tabs( "option", "deselectable" );
481//setter
482$( ".selector" ).tabs( "option", "deselectable", true );</code></pre>
483</dd>
484
485    </dl>
486  </div>
487</li>
488
489
490<li class="option" id="option-disabled">
491  <div class="option-header">
492    <h3 class="option-name"><a href="#option-disabled">disabled</a></h3>
493    <dl>
494      <dt class="option-type-label">Type:</dt>
495        <dd class="option-type">Array&lt;Number&gt;</dd>
496     
497      <dt class="option-default-label">Default:</dt>
498        <dd class="option-default">[]</dd>
499     
500    </dl>
501  </div>
502  <div class="option-description">
503    <p>An array containing the position of the tabs (zero-based index) that should be disabled on initialization.</p>
504  </div>
505  <div class="option-examples">
506    <h4>Code examples</h4>
507    <dl class="option-examples-list">
508   
509<dt>
510  Initialize a tabs with the <code>disabled</code> option specified.
511</dt>
512<dd>
513<pre><code>$( ".selector" ).tabs({ disabled: [1, 2] });</code></pre>
514</dd>
515
516   
517<dt>
518  Get or set the <code>disabled</code> option, after init.
519</dt>
520<dd>
521<pre><code>//getter
522var disabled = $( ".selector" ).tabs( "option", "disabled" );
523//setter
524$( ".selector" ).tabs( "option", "disabled", [1, 2] );</code></pre>
525</dd>
526
527    </dl>
528  </div>
529</li>
530
531
532<li class="option" id="option-event">
533  <div class="option-header">
534    <h3 class="option-name"><a href="#option-event">event</a></h3>
535    <dl>
536      <dt class="option-type-label">Type:</dt>
537        <dd class="option-type">String</dd>
538     
539      <dt class="option-default-label">Default:</dt>
540        <dd class="option-default">'click'</dd>
541     
542    </dl>
543  </div>
544  <div class="option-description">
545    <p>The type of event to be used for selecting a tab.</p>
546  </div>
547  <div class="option-examples">
548    <h4>Code examples</h4>
549    <dl class="option-examples-list">
550   
551<dt>
552  Initialize a tabs with the <code>event</code> option specified.
553</dt>
554<dd>
555<pre><code>$( ".selector" ).tabs({ event: 'mouseover' });</code></pre>
556</dd>
557
558   
559<dt>
560  Get or set the <code>event</code> option, after init.
561</dt>
562<dd>
563<pre><code>//getter
564var event = $( ".selector" ).tabs( "option", "event" );
565//setter
566$( ".selector" ).tabs( "option", "event", 'mouseover' );</code></pre>
567</dd>
568
569    </dl>
570  </div>
571</li>
572
573
574<li class="option" id="option-fx">
575  <div class="option-header">
576    <h3 class="option-name"><a href="#option-fx">fx</a></h3>
577    <dl>
578      <dt class="option-type-label">Type:</dt>
579        <dd class="option-type">Options, Array&lt;Options&gt;</dd>
580     
581      <dt class="option-default-label">Default:</dt>
582        <dd class="option-default">null</dd>
583     
584    </dl>
585  </div>
586  <div class="option-description">
587    <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>
588  </div>
589  <div class="option-examples">
590    <h4>Code examples</h4>
591    <dl class="option-examples-list">
592   
593<dt>
594  Initialize a tabs with the <code>fx</code> option specified.
595</dt>
596<dd>
597<pre><code>$( ".selector" ).tabs({ fx: { opacity: 'toggle' } });</code></pre>
598</dd>
599
600   
601<dt>
602  Get or set the <code>fx</code> option, after init.
603</dt>
604<dd>
605<pre><code>//getter
606var fx = $( ".selector" ).tabs( "option", "fx" );
607//setter
608$( ".selector" ).tabs( "option", "fx", { opacity: 'toggle' } );</code></pre>
609</dd>
610
611    </dl>
612  </div>
613</li>
614
615
616<li class="option" id="option-idPrefix">
617  <div class="option-header">
618    <h3 class="option-name"><a href="#option-idPrefix">idPrefix</a></h3>
619    <dl>
620      <dt class="option-type-label">Type:</dt>
621        <dd class="option-type">String</dd>
622     
623      <dt class="option-default-label">Default:</dt>
624        <dd class="option-default">'ui-tabs-'</dd>
625     
626    </dl>
627  </div>
628  <div class="option-description">
629    <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 $.data(el), for example "ui-tabs-54".</p>
630  </div>
631  <div class="option-examples">
632    <h4>Code examples</h4>
633    <dl class="option-examples-list">
634   
635<dt>
636  Initialize a tabs with the <code>idPrefix</code> option specified.
637</dt>
638<dd>
639<pre><code>$( ".selector" ).tabs({ idPrefix: 'ui-tabs-primary' });</code></pre>
640</dd>
641
642   
643<dt>
644  Get or set the <code>idPrefix</code> option, after init.
645</dt>
646<dd>
647<pre><code>//getter
648var idPrefix = $( ".selector" ).tabs( "option", "idPrefix" );
649//setter
650$( ".selector" ).tabs( "option", "idPrefix", 'ui-tabs-primary' );</code></pre>
651</dd>
652
653    </dl>
654  </div>
655</li>
656
657
658<li class="option" id="option-panelTemplate">
659  <div class="option-header">
660    <h3 class="option-name"><a href="#option-panelTemplate">panelTemplate</a></h3>
661    <dl>
662      <dt class="option-type-label">Type:</dt>
663        <dd class="option-type">String</dd>
664     
665      <dt class="option-default-label">Default:</dt>
666        <dd class="option-default">'&lt;div&gt;&lt;/div&gt;'</dd>
667     
668    </dl>
669  </div>
670  <div class="option-description">
671    <p>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.</p>
672  </div>
673  <div class="option-examples">
674    <h4>Code examples</h4>
675    <dl class="option-examples-list">
676   
677<dt>
678  Initialize a tabs with the <code>panelTemplate</code> option specified.
679</dt>
680<dd>
681<pre><code>$( ".selector" ).tabs({ panelTemplate: '&lt;li&gt;&lt;/li&gt;' });</code></pre>
682</dd>
683
684   
685<dt>
686  Get or set the <code>panelTemplate</code> option, after init.
687</dt>
688<dd>
689<pre><code>//getter
690var panelTemplate = $( ".selector" ).tabs( "option", "panelTemplate" );
691//setter
692$( ".selector" ).tabs( "option", "panelTemplate", '&lt;li&gt;&lt;/li&gt;' );</code></pre>
693</dd>
694
695    </dl>
696  </div>
697</li>
698
699
700<li class="option" id="option-selected">
701  <div class="option-header">
702    <h3 class="option-name"><a href="#option-selected">selected</a></h3>
703    <dl>
704      <dt class="option-type-label">Type:</dt>
705        <dd class="option-type">Number</dd>
706     
707      <dt class="option-default-label">Default:</dt>
708        <dd class="option-default">0</dd>
709     
710    </dl>
711  </div>
712  <div class="option-description">
713    <p>Zero-based index of the tab to be selected on initialization. To set all tabs to unselected pass -1 as value.</p>
714  </div>
715  <div class="option-examples">
716    <h4>Code examples</h4>
717    <dl class="option-examples-list">
718   
719<dt>
720  Initialize a tabs with the <code>selected</code> option specified.
721</dt>
722<dd>
723<pre><code>$( ".selector" ).tabs({ selected: 3 });</code></pre>
724</dd>
725
726   
727<dt>
728  Get or set the <code>selected</code> option, after init.
729</dt>
730<dd>
731<pre><code>//getter
732var selected = $( ".selector" ).tabs( "option", "selected" );
733//setter
734$( ".selector" ).tabs( "option", "selected", 3 );</code></pre>
735</dd>
736
737    </dl>
738  </div>
739</li>
740
741
742<li class="option" id="option-spinner">
743  <div class="option-header">
744    <h3 class="option-name"><a href="#option-spinner">spinner</a></h3>
745    <dl>
746      <dt class="option-type-label">Type:</dt>
747        <dd class="option-type">String</dd>
748     
749      <dt class="option-default-label">Default:</dt>
750        <dd class="option-default">'&lt;em&gt;Loading&amp;#8230;&lt;/em&gt;'</dd>
751     
752    </dl>
753  </div>
754  <div class="option-description">
755    <p>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. An span element must be present in the A tag of the title, for the spinner content to be visible.</p>
756  </div>
757  <div class="option-examples">
758    <h4>Code examples</h4>
759    <dl class="option-examples-list">
760   
761<dt>
762  Initialize a tabs with the <code>spinner</code> option specified.
763</dt>
764<dd>
765<pre><code>$( ".selector" ).tabs({ spinner: 'Retrieving data...' });</code></pre>
766</dd>
767
768   
769<dt>
770  Get or set the <code>spinner</code> option, after init.
771</dt>
772<dd>
773<pre><code>//getter
774var spinner = $( ".selector" ).tabs( "option", "spinner" );
775//setter
776$( ".selector" ).tabs( "option", "spinner", 'Retrieving data...' );</code></pre>
777</dd>
778
779    </dl>
780  </div>
781</li>
782
783
784<li class="option" id="option-tabTemplate">
785  <div class="option-header">
786    <h3 class="option-name"><a href="#option-tabTemplate">tabTemplate</a></h3>
787    <dl>
788      <dt class="option-type-label">Type:</dt>
789        <dd class="option-type">String</dd>
790     
791      <dt class="option-default-label">Default:</dt>
792        <dd class="option-default">'&lt;li&gt;&lt;a href&#61;"#&#123;href&#125;"&gt;&lt;span&gt;#&#123;label&#125;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;'</dd>
793     
794    </dl>
795  </div>
796  <div class="option-description">
797    <p>HTML template from which a new tab is created and added. The placeholders #&#123;href&#125; and #&#123;label&#125; are replaced with the url and tab label that are passed as arguments to the add method.</p>
798  </div>
799  <div class="option-examples">
800    <h4>Code examples</h4>
801    <dl class="option-examples-list">
802   
803<dt>
804  Initialize a tabs with the <code>tabTemplate</code> option specified.
805</dt>
806<dd>
807<pre><code>$( ".selector" ).tabs({ tabTemplate: '&lt;div&gt;&lt;a href&#61;"#&#123;href&#125;"&gt;&lt;span&gt;#&#123;label&#125;&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;' });</code></pre>
808</dd>
809
810   
811<dt>
812  Get or set the <code>tabTemplate</code> option, after init.
813</dt>
814<dd>
815<pre><code>//getter
816var tabTemplate = $( ".selector" ).tabs( "option", "tabTemplate" );
817//setter
818$( ".selector" ).tabs( "option", "tabTemplate", '&lt;div&gt;&lt;a href&#61;"#&#123;href&#125;"&gt;&lt;span&gt;#&#123;label&#125;&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;' );</code></pre>
819</dd>
820
821    </dl>
822  </div>
823</li>
824
825    </ul>
826  </div>
827  <div id="events">
828    <h2 class="top-header">Events</h2>
829    <ul class="events-list">
830     
831<li class="event" id="event-create">
832  <div class="event-header">
833    <h3 class="event-name"><a href="#event-create">create</a></h3>
834    <dl>
835      <dt class="event-type-label">Type:</dt>
836        <dd class="event-type">tabscreate</dd>
837    </dl>
838  </div>
839  <div class="event-description">
840    <p>This event is triggered when tabs is created.</p>
841  </div>
842  <div class="event-examples">
843    <h4>Code examples</h4>
844    <dl class="event-examples-list">
845   
846<dt>
847  Supply a callback function to handle the <code>create</code> event as an init option.
848</dt>
849<dd>
850<pre><code>$( &quot;.selector&quot; ).tabs({
851   create: function(event, ui) { ... }
852});</code></pre>
853</dd>
854
855   
856<dt>
857  Bind to the <code>create</code> event by type: <code>tabscreate</code>.
858</dt>
859<dd>
860<pre><code>$( &quot;.selector&quot; ).bind( &quot;tabscreate&quot;, function(event, ui) {
861  ...
862});</code></pre>
863</dd>
864
865    </dl>
866  </div>
867</li>
868
869
870<li class="event" id="event-select">
871  <div class="event-header">
872    <h3 class="event-name"><a href="#event-select">select</a></h3>
873    <dl>
874      <dt class="event-type-label">Type:</dt>
875        <dd class="event-type">tabsselect</dd>
876    </dl>
877  </div>
878  <div class="event-description">
879    <p>This event is triggered when clicking a tab.</p>
880  </div>
881  <div class="event-examples">
882    <h4>Code examples</h4>
883    <dl class="event-examples-list">
884   
885<dt>
886  Supply a callback function to handle the <code>select</code> event as an init option.
887</dt>
888<dd>
889<pre><code>$( &quot;.selector&quot; ).tabs({
890   select: function(event, ui) { ... }
891});</code></pre>
892</dd>
893
894   
895<dt>
896  Bind to the <code>select</code> event by type: <code>tabsselect</code>.
897</dt>
898<dd>
899<pre><code>$( &quot;.selector&quot; ).bind( &quot;tabsselect&quot;, function(event, ui) {
900  ...
901});</code></pre>
902</dd>
903
904    </dl>
905  </div>
906</li>
907
908
909<li class="event" id="event-load">
910  <div class="event-header">
911    <h3 class="event-name"><a href="#event-load">load</a></h3>
912    <dl>
913      <dt class="event-type-label">Type:</dt>
914        <dd class="event-type">tabsload</dd>
915    </dl>
916  </div>
917  <div class="event-description">
918    <p>This event is triggered after the content of a remote tab has been loaded.</p>
919  </div>
920  <div class="event-examples">
921    <h4>Code examples</h4>
922    <dl class="event-examples-list">
923   
924<dt>
925  Supply a callback function to handle the <code>load</code> event as an init option.
926</dt>
927<dd>
928<pre><code>$( &quot;.selector&quot; ).tabs({
929   load: function(event, ui) { ... }
930});</code></pre>
931</dd>
932
933   
934<dt>
935  Bind to the <code>load</code> event by type: <code>tabsload</code>.
936</dt>
937<dd>
938<pre><code>$( &quot;.selector&quot; ).bind( &quot;tabsload&quot;, function(event, ui) {
939  ...
940});</code></pre>
941</dd>
942
943    </dl>
944  </div>
945</li>
946
947
948<li class="event" id="event-show">
949  <div class="event-header">
950    <h3 class="event-name"><a href="#event-show">show</a></h3>
951    <dl>
952      <dt class="event-type-label">Type:</dt>
953        <dd class="event-type">tabsshow</dd>
954    </dl>
955  </div>
956  <div class="event-description">
957    <p>This event is triggered when a tab is shown.</p>
958  </div>
959  <div class="event-examples">
960    <h4>Code examples</h4>
961    <dl class="event-examples-list">
962   
963<dt>
964  Supply a callback function to handle the <code>show</code> event as an init option.
965</dt>
966<dd>
967<pre><code>$( &quot;.selector&quot; ).tabs({
968   show: function(event, ui) { ... }
969});</code></pre>
970</dd>
971
972   
973<dt>
974  Bind to the <code>show</code> event by type: <code>tabsshow</code>.
975</dt>
976<dd>
977<pre><code>$( &quot;.selector&quot; ).bind( &quot;tabsshow&quot;, function(event, ui) {
978  ...
979});</code></pre>
980</dd>
981
982    </dl>
983  </div>
984</li>
985
986
987<li class="event" id="event-add">
988  <div class="event-header">
989    <h3 class="event-name"><a href="#event-add">add</a></h3>
990    <dl>
991      <dt class="event-type-label">Type:</dt>
992        <dd class="event-type">tabsadd</dd>
993    </dl>
994  </div>
995  <div class="event-description">
996    <p>This event is triggered when a tab is added.</p>
997  </div>
998  <div class="event-examples">
999    <h4>Code examples</h4>
1000    <dl class="event-examples-list">
1001   
1002<dt>
1003  Supply a callback function to handle the <code>add</code> event as an init option.
1004</dt>
1005<dd>
1006<pre><code>$( &quot;.selector&quot; ).tabs({
1007   add: function(event, ui) { ... }
1008});</code></pre>
1009</dd>
1010
1011   
1012<dt>
1013  Bind to the <code>add</code> event by type: <code>tabsadd</code>.
1014</dt>
1015<dd>
1016<pre><code>$( &quot;.selector&quot; ).bind( &quot;tabsadd&quot;, function(event, ui) {
1017  ...
1018});</code></pre>
1019</dd>
1020
1021    </dl>
1022  </div>
1023</li>
1024
1025
1026<li class="event" id="event-remove">
1027  <div class="event-header">
1028    <h3 class="event-name"><a href="#event-remove">remove</a></h3>
1029    <dl>
1030      <dt class="event-type-label">Type:</dt>
1031        <dd class="event-type">tabsremove</dd>
1032    </dl>
1033  </div>
1034  <div class="event-description">
1035    <p>This event is triggered when a tab is removed.</p>
1036  </div>
1037  <div class="event-examples">
1038    <h4>Code examples</h4>
1039    <dl class="event-examples-list">
1040   
1041<dt>
1042  Supply a callback function to handle the <code>remove</code> event as an init option.
1043</dt>
1044<dd>
1045<pre><code>$( &quot;.selector&quot; ).tabs({
1046   remove: function(event, ui) { ... }
1047});</code></pre>
1048</dd>
1049
1050   
1051<dt>
1052  Bind to the <code>remove</code> event by type: <code>tabsremove</code>.
1053</dt>
1054<dd>
1055<pre><code>$( &quot;.selector&quot; ).bind( &quot;tabsremove&quot;, function(event, ui) {
1056  ...
1057});</code></pre>
1058</dd>
1059
1060    </dl>
1061  </div>
1062</li>
1063
1064
1065<li class="event" id="event-enable">
1066  <div class="event-header">
1067    <h3 class="event-name"><a href="#event-enable">enable</a></h3>
1068    <dl>
1069      <dt class="event-type-label">Type:</dt>
1070        <dd class="event-type">tabsenable</dd>
1071    </dl>
1072  </div>
1073  <div class="event-description">
1074    <p>This event is triggered when a tab is enabled.</p>
1075  </div>
1076  <div class="event-examples">
1077    <h4>Code examples</h4>
1078    <dl class="event-examples-list">
1079   
1080<dt>
1081  Supply a callback function to handle the <code>enable</code> event as an init option.
1082</dt>
1083<dd>
1084<pre><code>$( &quot;.selector&quot; ).tabs({
1085   enable: function(event, ui) { ... }
1086});</code></pre>
1087</dd>
1088
1089   
1090<dt>
1091  Bind to the <code>enable</code> event by type: <code>tabsenable</code>.
1092</dt>
1093<dd>
1094<pre><code>$( &quot;.selector&quot; ).bind( &quot;tabsenable&quot;, function(event, ui) {
1095  ...
1096});</code></pre>
1097</dd>
1098
1099    </dl>
1100  </div>
1101</li>
1102
1103
1104<li class="event" id="event-disable">
1105  <div class="event-header">
1106    <h3 class="event-name"><a href="#event-disable">disable</a></h3>
1107    <dl>
1108      <dt class="event-type-label">Type:</dt>
1109        <dd class="event-type">tabsdisable</dd>
1110    </dl>
1111  </div>
1112  <div class="event-description">
1113    <p>This event is triggered when a tab is disabled.</p>
1114  </div>
1115  <div class="event-examples">
1116    <h4>Code examples</h4>
1117    <dl class="event-examples-list">
1118   
1119<dt>
1120  Supply a callback function to handle the <code>disable</code> event as an init option.
1121</dt>
1122<dd>
1123<pre><code>$( &quot;.selector&quot; ).tabs({
1124   disable: function(event, ui) { ... }
1125});</code></pre>
1126</dd>
1127
1128   
1129<dt>
1130  Bind to the <code>disable</code> event by type: <code>tabsdisable</code>.
1131</dt>
1132<dd>
1133<pre><code>$( &quot;.selector&quot; ).bind( &quot;tabsdisable&quot;, function(event, ui) {
1134  ...
1135});</code></pre>
1136</dd>
1137
1138    </dl>
1139  </div>
1140</li>
1141
1142    </ul>
1143  </div>
1144  <div id="methods">
1145    <h2 class="top-header">Methods</h2>
1146    <ul class="methods-list">
1147     
1148<li class="method" id="method-destroy">
1149  <div class="method-header">
1150    <h3 class="method-name"><a href="#method-destroy">destroy</a></h3>
1151    <dl>
1152      <dt class="method-signature-label">Signature:</dt>
1153        <dd class="method-signature">.tabs( "destroy"
1154
1155
1156
1157
1158
1159
1160
1161)</dd>
1162    </dl>
1163  </div>
1164  <div class="method-description">
1165    <p>Remove the tabs functionality completely. This will return the element back to its pre-init state.</p>
1166  </div>
1167</li>
1168
1169
1170<li class="method" id="method-disable">
1171  <div class="method-header">
1172    <h3 class="method-name"><a href="#method-disable">disable</a></h3>
1173    <dl>
1174      <dt class="method-signature-label">Signature:</dt>
1175        <dd class="method-signature">.tabs( "disable"
1176
1177
1178
1179
1180
1181
1182
1183)</dd>
1184    </dl>
1185  </div>
1186  <div class="method-description">
1187    <p>Disable the tabs.</p>
1188  </div>
1189</li>
1190
1191
1192<li class="method" id="method-enable">
1193  <div class="method-header">
1194    <h3 class="method-name"><a href="#method-enable">enable</a></h3>
1195    <dl>
1196      <dt class="method-signature-label">Signature:</dt>
1197        <dd class="method-signature">.tabs( "enable"
1198
1199
1200
1201
1202
1203
1204
1205)</dd>
1206    </dl>
1207  </div>
1208  <div class="method-description">
1209    <p>Enable the tabs.</p>
1210  </div>
1211</li>
1212
1213
1214<li class="method" id="method-option">
1215  <div class="method-header">
1216    <h3 class="method-name"><a href="#method-option">option</a></h3>
1217    <dl>
1218      <dt class="method-signature-label">Signature:</dt>
1219        <dd class="method-signature">.tabs( "option"
1220
1221, optionName
1222
1223, <span class="optional">[</span>value<span class="optional">] </span>
1224
1225
1226
1227)</dd>
1228    </dl>
1229  </div>
1230  <div class="method-description">
1231    <p>Get or set any tabs option. If no value is specified, will act as a getter.</p>
1232  </div>
1233</li>
1234
1235
1236<li class="method" id="method-option">
1237  <div class="method-header">
1238    <h3 class="method-name"><a href="#method-option">option</a></h3>
1239    <dl>
1240      <dt class="method-signature-label">Signature:</dt>
1241        <dd class="method-signature">.tabs( "option"
1242
1243, options
1244
1245
1246
1247
1248
1249)</dd>
1250    </dl>
1251  </div>
1252  <div class="method-description">
1253    <p>Set multiple tabs options at once by providing an options object.</p>
1254  </div>
1255</li>
1256
1257
1258<li class="method" id="method-widget">
1259  <div class="method-header">
1260    <h3 class="method-name"><a href="#method-widget">widget</a></h3>
1261    <dl>
1262      <dt class="method-signature-label">Signature:</dt>
1263        <dd class="method-signature">.tabs( "widget"
1264
1265
1266
1267
1268
1269
1270
1271)</dd>
1272    </dl>
1273  </div>
1274  <div class="method-description">
1275    <p>Returns the .ui-tabs element.</p>
1276  </div>
1277</li>
1278
1279
1280<li class="method" id="method-add">
1281  <div class="method-header">
1282    <h3 class="method-name"><a href="#method-add">add</a></h3>
1283    <dl>
1284      <dt class="method-signature-label">Signature:</dt>
1285        <dd class="method-signature">.tabs( "add"
1286
1287, url
1288
1289, label
1290
1291, <span class="optional">[</span>index<span class="optional">] </span>
1292
1293)</dd>
1294    </dl>
1295  </div>
1296  <div class="method-description">
1297    <p>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.</p>
1298  </div>
1299</li>
1300
1301
1302<li class="method" id="method-remove">
1303  <div class="method-header">
1304    <h3 class="method-name"><a href="#method-remove">remove</a></h3>
1305    <dl>
1306      <dt class="method-signature-label">Signature:</dt>
1307        <dd class="method-signature">.tabs( "remove"
1308
1309, index
1310
1311
1312
1313
1314
1315)</dd>
1316    </dl>
1317  </div>
1318  <div class="method-description">
1319    <p>Remove a tab. The second argument is the zero-based index of the tab to be removed.</p>
1320  </div>
1321</li>
1322
1323
1324<li class="method" id="method-enable">
1325  <div class="method-header">
1326    <h3 class="method-name"><a href="#method-enable">enable</a></h3>
1327    <dl>
1328      <dt class="method-signature-label">Signature:</dt>
1329        <dd class="method-signature">.tabs( "enable"
1330
1331, index
1332
1333
1334
1335
1336
1337)</dd>
1338    </dl>
1339  </div>
1340  <div class="method-description">
1341    <p>Enable a disabled tab.  To enable more than one tab at once reset the disabled property like: <code>$('#example').tabs("option","disabled",[]);</code>. The second argument is the zero-based index of the tab to be enabled.</p>
1342  </div>
1343</li>
1344
1345
1346<li class="method" id="method-disable">
1347  <div class="method-header">
1348    <h3 class="method-name"><a href="#method-disable">disable</a></h3>
1349    <dl>
1350      <dt class="method-signature-label">Signature:</dt>
1351        <dd class="method-signature">.tabs( "disable"
1352
1353, index
1354
1355
1356
1357
1358
1359)</dd>
1360    </dl>
1361  </div>
1362  <div class="method-description">
1363    <p>Disable a tab. The selected tab cannot be disabled. To disable more than one tab at once use: <code>$('#example').tabs("option","disabled", [1, 2, 3]);</code>  The second argument is the zero-based index of the tab to be disabled.</p>
1364  </div>
1365</li>
1366
1367
1368<li class="method" id="method-select">
1369  <div class="method-header">
1370    <h3 class="method-name"><a href="#method-select">select</a></h3>
1371    <dl>
1372      <dt class="method-signature-label">Signature:</dt>
1373        <dd class="method-signature">.tabs( "select"
1374
1375, index
1376
1377
1378
1379
1380
1381)</dd>
1382    </dl>
1383  </div>
1384  <div class="method-description">
1385    <p>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).</p>
1386  </div>
1387</li>
1388
1389
1390<li class="method" id="method-load">
1391  <div class="method-header">
1392    <h3 class="method-name"><a href="#method-load">load</a></h3>
1393    <dl>
1394      <dt class="method-signature-label">Signature:</dt>
1395        <dd class="method-signature">.tabs( "load"
1396
1397, index
1398
1399
1400
1401
1402
1403)</dd>
1404    </dl>
1405  </div>
1406  <div class="method-description">
1407    <p>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.</p>
1408  </div>
1409</li>
1410
1411
1412<li class="method" id="method-url">
1413  <div class="method-header">
1414    <h3 class="method-name"><a href="#method-url">url</a></h3>
1415    <dl>
1416      <dt class="method-signature-label">Signature:</dt>
1417        <dd class="method-signature">.tabs( "url"
1418
1419, index
1420
1421, url
1422
1423
1424
1425)</dd>
1426    </dl>
1427  </div>
1428  <div class="method-description">
1429    <p>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.</p>
1430  </div>
1431</li>
1432
1433
1434<li class="method" id="method-length">
1435  <div class="method-header">
1436    <h3 class="method-name"><a href="#method-length">length</a></h3>
1437    <dl>
1438      <dt class="method-signature-label">Signature:</dt>
1439        <dd class="method-signature">.tabs( "length"
1440
1441
1442
1443
1444
1445
1446
1447)</dd>
1448    </dl>
1449  </div>
1450  <div class="method-description">
1451    <p>Retrieve the number of tabs of the first matched tab pane.</p>
1452  </div>
1453</li>
1454
1455
1456<li class="method" id="method-abort">
1457  <div class="method-header">
1458    <h3 class="method-name"><a href="#method-abort">abort</a></h3>
1459    <dl>
1460      <dt class="method-signature-label">Signature:</dt>
1461        <dd class="method-signature">.tabs( "abort"
1462
1463
1464
1465
1466
1467
1468
1469)</dd>
1470    </dl>
1471  </div>
1472  <div class="method-description">
1473    <p>Terminate all running tab ajax requests and animations.</p>
1474  </div>
1475</li>
1476
1477
1478<li class="method" id="method-rotate">
1479  <div class="method-header">
1480    <h3 class="method-name"><a href="#method-rotate">rotate</a></h3>
1481    <dl>
1482      <dt class="method-signature-label">Signature:</dt>
1483        <dd class="method-signature">.tabs( "rotate"
1484
1485, ms
1486
1487, <span class="optional">[</span>continuing<span class="optional">] </span>
1488
1489
1490
1491)</dd>
1492    </dl>
1493  </div>
1494  <div class="method-description">
1495    <p>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.</p>
1496  </div>
1497</li>
1498
1499    </ul>
1500  </div>
1501  <div id="theming">
1502    <h2 class="top-header">Theming</h2>
1503    <p>The jQuery UI Tabs plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain.
1504</p>
1505  <p>If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.tabs.css stylesheet that can be modified. These classes are highlighed in bold below.
1506</p>
1507   
1508  <h3>Sample markup with jQuery UI CSS Framework classes</h3>
1509  &lt;div class=&quot;<strong>ui-tabs</strong> ui-widget ui-widget-content ui-corner-all&quot; id=&quot;tabs&quot;&gt;<br />
1510&nbsp;&nbsp;&nbsp;&lt;ul class=&quot;<strong>ui-tabs-nav</strong> ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all&quot;&gt;<br />
1511&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;ui-state-default ui-corner-top ui-tabs-selected ui-state-active&quot;&gt;&lt;a href=&quot;#tabs-1&quot;&gt;Nunc tincidunt&lt;/a&gt;&lt;/li&gt;<br />
1512&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;ui-state-default ui-corner-top&quot;&gt;&lt;a href=&quot;#tabs-2&quot;&gt;Proin dolor&lt;/a&gt;&lt;/li&gt;<br />
1513&nbsp;&nbsp;&nbsp;&lt;div class=&quot;<strong>ui-tabs-panel</strong> ui-widget-content ui-corner-bottom&quot; id=&quot;tabs-1&quot;&gt;<br />
1514&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Tab one content goes here.&lt;/p&gt;<br />
1515&nbsp;&nbsp;&nbsp;&lt;/div&gt;<br />
1516&nbsp;&nbsp;&nbsp; ...<br />
1517&lt;/div&gt;<br />
1518  <p class="theme-note">
1519    <strong>
1520      Note: This is a sample of markup generated by the tabs plugin, not markup you should use to create a tabs. The only markup needed for that is <br />&lt;div id=&quot;tabs&quot;&gt;<br />
1521&#160;&#160;&#160;&lt;ul&gt;<br />
1522&#160;&#160;&#160;&#160;&#160;&#160;&lt;li&gt;&lt;a href=&quot;#tabs-1&quot;&gt;Nunc tincidunt&lt;/a&gt;&lt;/li&gt;<br />
1523&#160;&#160;&#160;&#160;&#160;&#160;&lt;li&gt;&lt;a href=&quot;#tabs-2&quot;&gt;Proin dolor&lt;/a&gt;&lt;/li&gt;<br />
1524&#160;&#160;&#160;&#160;&#160;&#160;&lt;li&gt;&lt;a href=&quot;#tabs-3&quot;&gt;Aenean lacinia&lt;/a&gt;&lt;/li&gt;<br />
1525&#160;&#160;&#160;&lt;/ul&gt;<br />
1526&#160;&#160;&#160;&lt;div id=&quot;tabs-1&quot;&gt;<br />
1527&#160;&#160;&#160;&#160;&#160;&#160;&lt;p&gt;Tab 1 content&lt;/p&gt;<br />
1528&#160;&#160;&#160;&lt;/div&gt;<br />
1529&#160;&#160;&#160;&lt;div id=&quot;tabs-2&quot;&gt;<br />
1530&#160;&#160;&#160;&#160;&#160;&#160;&lt;p&gt;Tab 2 content&lt;/p&gt;<br />
1531&#160;&#160;&#160;&lt;/div&gt;<br />
1532&#160;&#160;&#160;&lt;div id=&quot;tabs-3&quot;&gt;<br />
1533&#160;&#160;&#160;&#160;&#160;&#160;&lt;p&gt;Tab 3 content&lt;/p&gt;<br />
1534&#160;&#160;&#160;&lt;/div&gt;<br />
1535&lt;/div&gt;.
1536    </strong>
1537  </p>
1538
1539  </div>
1540</div>
1541
1542</p><!--
1543Pre-expand include size: 57666 bytes
1544Post-expand include size: 97459 bytes
1545Template argument size: 57562 bytes
1546Maximum: 2097152 bytes
1547-->
1548
1549<!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:3777-1!1!0!!en!2 and timestamp 20110815120800 -->
Note: See TracBrowser for help on using the repository browser.