Subversion Repositories Sites.obs-saisons.fr

Rev

Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
40 aurelien 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
77
could 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
89
a 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();
97
var 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.
133
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</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>
171
resizeMap() 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>To use the cookie option: <a href="http://plugins.jquery.com/project/cookie" class="external text" title="http://plugins.jquery.com/project/cookie">jquery.cookie.js</a></li>
178
<li>Required CSS:
179
<pre>.ui-tabs .ui-tabs-hide {
180
     display: none;
181
}</pre></li>
182
</ul>
183
    </div>
184
    <div id="overview-example">
185
        <h3>Example</h3>
186
        <div id="overview-example" class="example">
187
<ul><li><a href="#demo"><span>Demo</span></a></li><li><a href="#source"><span>View Source</span></a></li></ul>
188
<p><div id="demo" class="tabs-container" rel="295">
189
A simple jQuery UI Tabs.<br />
190
</p>
191
<pre>$(&quot;#tabs&quot;).tabs();
192
</pre>
193
<p></div><div id="source" class="tabs-container">
194
</p>
195
<pre>&lt;!DOCTYPE html&gt;
196
&lt;html&gt;
197
&lt;head&gt;
198
  &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;
199
  &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js&quot;&gt;&lt;/script&gt;
200
  &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js&quot;&gt;&lt;/script&gt;
201
 
202
  &lt;script&gt;
203
  $(document).ready(function() {
204
    $(&quot;#tabs&quot;).tabs();
205
  });
206
  &lt;/script&gt;
207
&lt;/head&gt;
208
&lt;body style="font-size:62.5%;"&gt;
209
 
210
&lt;div id=&quot;tabs&quot;&gt;
211
    &lt;ul&gt;
212
        &lt;li&gt;&lt;a href=&quot;#fragment-1&quot;&gt;&lt;span&gt;One&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
213
        &lt;li&gt;&lt;a href=&quot;#fragment-2&quot;&gt;&lt;span&gt;Two&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
214
        &lt;li&gt;&lt;a href=&quot;#fragment-3&quot;&gt;&lt;span&gt;Three&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
215
    &lt;/ul&gt;
216
    &lt;div id=&quot;fragment-1&quot;&gt;
217
        &lt;p&gt;First tab is active by default:&lt;/p&gt;
218
        &lt;pre&gt;&lt;code&gt;$('#example').tabs();&lt;/code&gt;&lt;/pre&gt;
219
    &lt;/div&gt;
220
    &lt;div id=&quot;fragment-2&quot;&gt;
221
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
222
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
223
    &lt;/div&gt;
224
    &lt;div id=&quot;fragment-3&quot;&gt;
225
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
226
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
227
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
228
    &lt;/div&gt;
229
&lt;/div&gt;
230
&lt;/body&gt;
231
&lt;/html&gt;
232
</pre>
233
<p></div>
234
</p><p></div>
235
    </div>
236
  </div>
237
  <div id="options">
238
    <h2 class="top-header">Options</h2>
239
    <ul class="options-list">
240
 
241
<li class="option" id="option-disabled">
242
  <div class="option-header">
243
    <h3 class="option-name"><a href="#option-disabled">disabled</a></h3>
244
    <dl>
245
      <dt class="option-type-label">Type:</dt>
246
        <dd class="option-type">Boolean</dd>
247
 
248
      <dt class="option-default-label">Default:</dt>
249
        <dd class="option-default">false</dd>
250
 
251
    </dl>
252
  </div>
253
  <div class="option-description">
254
    <p>Disables (true) or enables (false) the tabs. Can be set when initialising (first creating) the tabs.</p>
255
  </div>
256
  <div class="option-examples">
257
    <h4>Code examples</h4>
258
    <dl class="option-examples-list">
259
 
260
<dt>
261
  Initialize a tabs with the <code>disabled</code> option specified.
262
</dt>
263
<dd>
264
<pre><code>$( ".selector" ).tabs({ disabled: true });</code></pre>
265
</dd>
266
 
267
 
268
<dt>
269
  Get or set the <code>disabled</code> option, after init.
270
</dt>
271
<dd>
272
<pre><code>//getter
273
var disabled = $( ".selector" ).tabs( "option", "disabled" );
274
//setter
275
$( ".selector" ).tabs( "option", "disabled", true );</code></pre>
276
</dd>
277
 
278
    </dl>
279
  </div>
280
</li>
281
 
282
 
283
<li class="option" id="option-ajaxOptions">
284
  <div class="option-header">
285
    <h3 class="option-name"><a href="#option-ajaxOptions">ajaxOptions</a></h3>
286
    <dl>
287
      <dt class="option-type-label">Type:</dt>
288
        <dd class="option-type">Options</dd>
289
 
290
      <dt class="option-default-label">Default:</dt>
291
        <dd class="option-default">null</dd>
292
 
293
    </dl>
294
  </div>
295
  <div class="option-description">
296
    <p>Additional Ajax options to consider when loading tab content (see $.ajax).</p>
297
  </div>
298
  <div class="option-examples">
299
    <h4>Code examples</h4>
300
    <dl class="option-examples-list">
301
 
302
<dt>
303
  Initialize a tabs with the <code>ajaxOptions</code> option specified.
304
</dt>
305
<dd>
306
<pre><code>$( ".selector" ).tabs({ ajaxOptions: { async: false } });</code></pre>
307
</dd>
308
 
309
 
310
<dt>
311
  Get or set the <code>ajaxOptions</code> option, after init.
312
</dt>
313
<dd>
314
<pre><code>//getter
315
var ajaxOptions = $( ".selector" ).tabs( "option", "ajaxOptions" );
316
//setter
317
$( ".selector" ).tabs( "option", "ajaxOptions", { async: false } );</code></pre>
318
</dd>
319
 
320
    </dl>
321
  </div>
322
</li>
323
 
324
 
325
<li class="option" id="option-cache">
326
  <div class="option-header">
327
    <h3 class="option-name"><a href="#option-cache">cache</a></h3>
328
    <dl>
329
      <dt class="option-type-label">Type:</dt>
330
        <dd class="option-type">Boolean</dd>
331
 
332
      <dt class="option-default-label">Default:</dt>
333
        <dd class="option-default">false</dd>
334
 
335
    </dl>
336
  </div>
337
  <div class="option-description">
338
    <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>
339
  </div>
340
  <div class="option-examples">
341
    <h4>Code examples</h4>
342
    <dl class="option-examples-list">
343
 
344
<dt>
345
  Initialize a tabs with the <code>cache</code> option specified.
346
</dt>
347
<dd>
348
<pre><code>$( ".selector" ).tabs({ cache: true });</code></pre>
349
</dd>
350
 
351
 
352
<dt>
353
  Get or set the <code>cache</code> option, after init.
354
</dt>
355
<dd>
356
<pre><code>//getter
357
var cache = $( ".selector" ).tabs( "option", "cache" );
358
//setter
359
$( ".selector" ).tabs( "option", "cache", true );</code></pre>
360
</dd>
361
 
362
    </dl>
363
  </div>
364
</li>
365
 
366
 
367
<li class="option" id="option-collapsible">
368
  <div class="option-header">
369
    <h3 class="option-name"><a href="#option-collapsible">collapsible</a></h3>
370
    <dl>
371
      <dt class="option-type-label">Type:</dt>
372
        <dd class="option-type">Boolean</dd>
373
 
374
      <dt class="option-default-label">Default:</dt>
375
        <dd class="option-default">false</dd>
376
 
377
    </dl>
378
  </div>
379
  <div class="option-description">
380
    <p>Set to true to allow an already selected tab to become unselected again upon reselection.</p>
381
  </div>
382
  <div class="option-examples">
383
    <h4>Code examples</h4>
384
    <dl class="option-examples-list">
385
 
386
<dt>
387
  Initialize a tabs with the <code>collapsible</code> option specified.
388
</dt>
389
<dd>
390
<pre><code>$( ".selector" ).tabs({ collapsible: true });</code></pre>
391
</dd>
392
 
393
 
394
<dt>
395
  Get or set the <code>collapsible</code> option, after init.
396
</dt>
397
<dd>
398
<pre><code>//getter
399
var collapsible = $( ".selector" ).tabs( "option", "collapsible" );
400
//setter
401
$( ".selector" ).tabs( "option", "collapsible", true );</code></pre>
402
</dd>
403
 
404
    </dl>
405
  </div>
406
</li>
407
 
408
 
409
<li class="option" id="option-cookie">
410
  <div class="option-header">
411
    <h3 class="option-name"><a href="#option-cookie">cookie</a></h3>
412
    <dl>
413
      <dt class="option-type-label">Type:</dt>
414
        <dd class="option-type">Object</dd>
415
 
416
      <dt class="option-default-label">Default:</dt>
417
        <dd class="option-default">null</dd>
418
 
419
    </dl>
420
  </div>
421
  <div class="option-description">
422
    <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): &#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>
423
  </div>
424
  <div class="option-examples">
425
    <h4>Code examples</h4>
426
    <dl class="option-examples-list">
427
 
428
<dt>
429
  Initialize a tabs with the <code>cookie</code> option specified.
430
</dt>
431
<dd>
432
<pre><code>$( ".selector" ).tabs({ cookie: { expires: 30 } });</code></pre>
433
</dd>
434
 
435
 
436
<dt>
437
  Get or set the <code>cookie</code> option, after init.
438
</dt>
439
<dd>
440
<pre><code>//getter
441
var cookie = $( ".selector" ).tabs( "option", "cookie" );
442
//setter
443
$( ".selector" ).tabs( "option", "cookie", { expires: 30 } );</code></pre>
444
</dd>
445
 
446
    </dl>
447
  </div>
448
</li>
449
 
450
 
451
<li class="option" id="option-deselectable">
452
  <div class="option-header">
453
    <h3 class="option-name"><a href="#option-deselectable">deselectable</a></h3>
454
    <dl>
455
      <dt class="option-type-label">Type:</dt>
456
        <dd class="option-type">Boolean</dd>
457
 
458
      <dt class="option-default-label">Default:</dt>
459
        <dd class="option-default">false</dd>
460
 
461
    </dl>
462
  </div>
463
  <div class="option-description">
464
    <p>deprecated in jQuery UI 1.7, use collapsible.</p>
465
  </div>
466
  <div class="option-examples">
467
    <h4>Code examples</h4>
468
    <dl class="option-examples-list">
469
 
470
<dt>
471
  Initialize a tabs with the <code>deselectable</code> option specified.
472
</dt>
473
<dd>
474
<pre><code>$( ".selector" ).tabs({ deselectable: true });</code></pre>
475
</dd>
476
 
477
 
478
<dt>
479
  Get or set the <code>deselectable</code> option, after init.
480
</dt>
481
<dd>
482
<pre><code>//getter
483
var deselectable = $( ".selector" ).tabs( "option", "deselectable" );
484
//setter
485
$( ".selector" ).tabs( "option", "deselectable", true );</code></pre>
486
</dd>
487
 
488
    </dl>
489
  </div>
490
</li>
491
 
492
 
493
<li class="option" id="option-disabled">
494
  <div class="option-header">
495
    <h3 class="option-name"><a href="#option-disabled">disabled</a></h3>
496
    <dl>
497
      <dt class="option-type-label">Type:</dt>
498
        <dd class="option-type">Array&lt;Number&gt;</dd>
499
 
500
      <dt class="option-default-label">Default:</dt>
501
        <dd class="option-default">[]</dd>
502
 
503
    </dl>
504
  </div>
505
  <div class="option-description">
506
    <p>An array containing the position of the tabs (zero-based index) that should be disabled on initialization.</p>
507
  </div>
508
  <div class="option-examples">
509
    <h4>Code examples</h4>
510
    <dl class="option-examples-list">
511
 
512
<dt>
513
  Initialize a tabs with the <code>disabled</code> option specified.
514
</dt>
515
<dd>
516
<pre><code>$( ".selector" ).tabs({ disabled: [1, 2] });</code></pre>
517
</dd>
518
 
519
 
520
<dt>
521
  Get or set the <code>disabled</code> option, after init.
522
</dt>
523
<dd>
524
<pre><code>//getter
525
var disabled = $( ".selector" ).tabs( "option", "disabled" );
526
//setter
527
$( ".selector" ).tabs( "option", "disabled", [1, 2] );</code></pre>
528
</dd>
529
 
530
    </dl>
531
  </div>
532
</li>
533
 
534
 
535
<li class="option" id="option-event">
536
  <div class="option-header">
537
    <h3 class="option-name"><a href="#option-event">event</a></h3>
538
    <dl>
539
      <dt class="option-type-label">Type:</dt>
540
        <dd class="option-type">String</dd>
541
 
542
      <dt class="option-default-label">Default:</dt>
543
        <dd class="option-default">'click'</dd>
544
 
545
    </dl>
546
  </div>
547
  <div class="option-description">
548
    <p>The type of event to be used for selecting a tab.</p>
549
  </div>
550
  <div class="option-examples">
551
    <h4>Code examples</h4>
552
    <dl class="option-examples-list">
553
 
554
<dt>
555
  Initialize a tabs with the <code>event</code> option specified.
556
</dt>
557
<dd>
558
<pre><code>$( ".selector" ).tabs({ event: 'mouseover' });</code></pre>
559
</dd>
560
 
561
 
562
<dt>
563
  Get or set the <code>event</code> option, after init.
564
</dt>
565
<dd>
566
<pre><code>//getter
567
var event = $( ".selector" ).tabs( "option", "event" );
568
//setter
569
$( ".selector" ).tabs( "option", "event", 'mouseover' );</code></pre>
570
</dd>
571
 
572
    </dl>
573
  </div>
574
</li>
575
 
576
 
577
<li class="option" id="option-fx">
578
  <div class="option-header">
579
    <h3 class="option-name"><a href="#option-fx">fx</a></h3>
580
    <dl>
581
      <dt class="option-type-label">Type:</dt>
582
        <dd class="option-type">Options, Array&lt;Options&gt;</dd>
583
 
584
      <dt class="option-default-label">Default:</dt>
585
        <dd class="option-default">null</dd>
586
 
587
    </dl>
588
  </div>
589
  <div class="option-description">
590
    <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>
591
  </div>
592
  <div class="option-examples">
593
    <h4>Code examples</h4>
594
    <dl class="option-examples-list">
595
 
596
<dt>
597
  Initialize a tabs with the <code>fx</code> option specified.
598
</dt>
599
<dd>
600
<pre><code>$( ".selector" ).tabs({ fx: { opacity: 'toggle' } });</code></pre>
601
</dd>
602
 
603
 
604
<dt>
605
  Get or set the <code>fx</code> option, after init.
606
</dt>
607
<dd>
608
<pre><code>//getter
609
var fx = $( ".selector" ).tabs( "option", "fx" );
610
//setter
611
$( ".selector" ).tabs( "option", "fx", { opacity: 'toggle' } );</code></pre>
612
</dd>
613
 
614
    </dl>
615
  </div>
616
</li>
617
 
618
 
619
<li class="option" id="option-idPrefix">
620
  <div class="option-header">
621
    <h3 class="option-name"><a href="#option-idPrefix">idPrefix</a></h3>
622
    <dl>
623
      <dt class="option-type-label">Type:</dt>
624
        <dd class="option-type">String</dd>
625
 
626
      <dt class="option-default-label">Default:</dt>
627
        <dd class="option-default">'ui-tabs-'</dd>
628
 
629
    </dl>
630
  </div>
631
  <div class="option-description">
632
    <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>
633
  </div>
634
  <div class="option-examples">
635
    <h4>Code examples</h4>
636
    <dl class="option-examples-list">
637
 
638
<dt>
639
  Initialize a tabs with the <code>idPrefix</code> option specified.
640
</dt>
641
<dd>
642
<pre><code>$( ".selector" ).tabs({ idPrefix: 'ui-tabs-primary' });</code></pre>
643
</dd>
644
 
645
 
646
<dt>
647
  Get or set the <code>idPrefix</code> option, after init.
648
</dt>
649
<dd>
650
<pre><code>//getter
651
var idPrefix = $( ".selector" ).tabs( "option", "idPrefix" );
652
//setter
653
$( ".selector" ).tabs( "option", "idPrefix", 'ui-tabs-primary' );</code></pre>
654
</dd>
655
 
656
    </dl>
657
  </div>
658
</li>
659
 
660
 
661
<li class="option" id="option-panelTemplate">
662
  <div class="option-header">
663
    <h3 class="option-name"><a href="#option-panelTemplate">panelTemplate</a></h3>
664
    <dl>
665
      <dt class="option-type-label">Type:</dt>
666
        <dd class="option-type">String</dd>
667
 
668
      <dt class="option-default-label">Default:</dt>
669
        <dd class="option-default">'&lt;div&gt;&lt;/div&gt;'</dd>
670
 
671
    </dl>
672
  </div>
673
  <div class="option-description">
674
    <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>
675
  </div>
676
  <div class="option-examples">
677
    <h4>Code examples</h4>
678
    <dl class="option-examples-list">
679
 
680
<dt>
681
  Initialize a tabs with the <code>panelTemplate</code> option specified.
682
</dt>
683
<dd>
684
<pre><code>$( ".selector" ).tabs({ panelTemplate: '&lt;li&gt;&lt;/li&gt;' });</code></pre>
685
</dd>
686
 
687
 
688
<dt>
689
  Get or set the <code>panelTemplate</code> option, after init.
690
</dt>
691
<dd>
692
<pre><code>//getter
693
var panelTemplate = $( ".selector" ).tabs( "option", "panelTemplate" );
694
//setter
695
$( ".selector" ).tabs( "option", "panelTemplate", '&lt;li&gt;&lt;/li&gt;' );</code></pre>
696
</dd>
697
 
698
    </dl>
699
  </div>
700
</li>
701
 
702
 
703
<li class="option" id="option-selected">
704
  <div class="option-header">
705
    <h3 class="option-name"><a href="#option-selected">selected</a></h3>
706
    <dl>
707
      <dt class="option-type-label">Type:</dt>
708
        <dd class="option-type">Number</dd>
709
 
710
      <dt class="option-default-label">Default:</dt>
711
        <dd class="option-default">0</dd>
712
 
713
    </dl>
714
  </div>
715
  <div class="option-description">
716
    <p>Zero-based index of the tab to be selected on initialization. To set all tabs to unselected pass -1 as value.</p>
717
  </div>
718
  <div class="option-examples">
719
    <h4>Code examples</h4>
720
    <dl class="option-examples-list">
721
 
722
<dt>
723
  Initialize a tabs with the <code>selected</code> option specified.
724
</dt>
725
<dd>
726
<pre><code>$( ".selector" ).tabs({ selected: 3 });</code></pre>
727
</dd>
728
 
729
 
730
<dt>
731
  Get or set the <code>selected</code> option, after init.
732
</dt>
733
<dd>
734
<pre><code>//getter
735
var selected = $( ".selector" ).tabs( "option", "selected" );
736
//setter
737
$( ".selector" ).tabs( "option", "selected", 3 );</code></pre>
738
</dd>
739
 
740
    </dl>
741
  </div>
742
</li>
743
 
744
 
745
<li class="option" id="option-spinner">
746
  <div class="option-header">
747
    <h3 class="option-name"><a href="#option-spinner">spinner</a></h3>
748
    <dl>
749
      <dt class="option-type-label">Type:</dt>
750
        <dd class="option-type">String</dd>
751
 
752
      <dt class="option-default-label">Default:</dt>
753
        <dd class="option-default">'&lt;em&gt;Loading&amp;#8230;&lt;/em&gt;'</dd>
754
 
755
    </dl>
756
  </div>
757
  <div class="option-description">
758
    <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>
759
  </div>
760
  <div class="option-examples">
761
    <h4>Code examples</h4>
762
    <dl class="option-examples-list">
763
 
764
<dt>
765
  Initialize a tabs with the <code>spinner</code> option specified.
766
</dt>
767
<dd>
768
<pre><code>$( ".selector" ).tabs({ spinner: 'Retrieving data...' });</code></pre>
769
</dd>
770
 
771
 
772
<dt>
773
  Get or set the <code>spinner</code> option, after init.
774
</dt>
775
<dd>
776
<pre><code>//getter
777
var spinner = $( ".selector" ).tabs( "option", "spinner" );
778
//setter
779
$( ".selector" ).tabs( "option", "spinner", 'Retrieving data...' );</code></pre>
780
</dd>
781
 
782
    </dl>
783
  </div>
784
</li>
785
 
786
 
787
<li class="option" id="option-tabTemplate">
788
  <div class="option-header">
789
    <h3 class="option-name"><a href="#option-tabTemplate">tabTemplate</a></h3>
790
    <dl>
791
      <dt class="option-type-label">Type:</dt>
792
        <dd class="option-type">String</dd>
793
 
794
      <dt class="option-default-label">Default:</dt>
795
        <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>
796
 
797
    </dl>
798
  </div>
799
  <div class="option-description">
800
    <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>
801
  </div>
802
  <div class="option-examples">
803
    <h4>Code examples</h4>
804
    <dl class="option-examples-list">
805
 
806
<dt>
807
  Initialize a tabs with the <code>tabTemplate</code> option specified.
808
</dt>
809
<dd>
810
<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>
811
</dd>
812
 
813
 
814
<dt>
815
  Get or set the <code>tabTemplate</code> option, after init.
816
</dt>
817
<dd>
818
<pre><code>//getter
819
var tabTemplate = $( ".selector" ).tabs( "option", "tabTemplate" );
820
//setter
821
$( ".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>
822
</dd>
823
 
824
    </dl>
825
  </div>
826
</li>
827
 
828
    </ul>
829
  </div>
830
  <div id="events">
831
    <h2 class="top-header">Events</h2>
832
    <ul class="events-list">
833
 
834
<li class="event" id="event-select">
835
  <div class="event-header">
836
    <h3 class="event-name"><a href="#event-select">select</a></h3>
837
    <dl>
838
      <dt class="event-type-label">Type:</dt>
839
        <dd class="event-type">tabsselect</dd>
840
    </dl>
841
  </div>
842
  <div class="event-description">
843
    <p>This event is triggered when clicking a tab.</p>
844
  </div>
845
  <div class="event-examples">
846
    <h4>Code examples</h4>
847
    <dl class="event-examples-list">
848
 
849
<dt>
850
  Supply a callback function to handle the <code>select</code> event as an init option.
851
</dt>
852
<dd>
853
<pre><code>$( &quot;.selector&quot; ).tabs({
854
   select: function(event, ui) { ... }
855
});</code></pre>
856
</dd>
857
 
858
 
859
<dt>
860
  Bind to the <code>select</code> event by type: <code>tabsselect</code>.
861
</dt>
862
<dd>
863
<pre><code>$( &quot;.selector&quot; ).bind( &quot;tabsselect&quot;, function(event, ui) {
864
  ...
865
});</code></pre>
866
</dd>
867
 
868
    </dl>
869
  </div>
870
</li>
871
 
872
 
873
<li class="event" id="event-load">
874
  <div class="event-header">
875
    <h3 class="event-name"><a href="#event-load">load</a></h3>
876
    <dl>
877
      <dt class="event-type-label">Type:</dt>
878
        <dd class="event-type">tabsload</dd>
879
    </dl>
880
  </div>
881
  <div class="event-description">
882
    <p>This event is triggered after the content of a remote tab has been loaded.</p>
883
  </div>
884
  <div class="event-examples">
885
    <h4>Code examples</h4>
886
    <dl class="event-examples-list">
887
 
888
<dt>
889
  Supply a callback function to handle the <code>load</code> event as an init option.
890
</dt>
891
<dd>
892
<pre><code>$( &quot;.selector&quot; ).tabs({
893
   load: function(event, ui) { ... }
894
});</code></pre>
895
</dd>
896
 
897
 
898
<dt>
899
  Bind to the <code>load</code> event by type: <code>tabsload</code>.
900
</dt>
901
<dd>
902
<pre><code>$( &quot;.selector&quot; ).bind( &quot;tabsload&quot;, function(event, ui) {
903
  ...
904
});</code></pre>
905
</dd>
906
 
907
    </dl>
908
  </div>
909
</li>
910
 
911
 
912
<li class="event" id="event-show">
913
  <div class="event-header">
914
    <h3 class="event-name"><a href="#event-show">show</a></h3>
915
    <dl>
916
      <dt class="event-type-label">Type:</dt>
917
        <dd class="event-type">tabsshow</dd>
918
    </dl>
919
  </div>
920
  <div class="event-description">
921
    <p>This event is triggered when a tab is shown.</p>
922
  </div>
923
  <div class="event-examples">
924
    <h4>Code examples</h4>
925
    <dl class="event-examples-list">
926
 
927
<dt>
928
  Supply a callback function to handle the <code>show</code> event as an init option.
929
</dt>
930
<dd>
931
<pre><code>$( &quot;.selector&quot; ).tabs({
932
   show: function(event, ui) { ... }
933
});</code></pre>
934
</dd>
935
 
936
 
937
<dt>
938
  Bind to the <code>show</code> event by type: <code>tabsshow</code>.
939
</dt>
940
<dd>
941
<pre><code>$( &quot;.selector&quot; ).bind( &quot;tabsshow&quot;, function(event, ui) {
942
  ...
943
});</code></pre>
944
</dd>
945
 
946
    </dl>
947
  </div>
948
</li>
949
 
950
 
951
<li class="event" id="event-add">
952
  <div class="event-header">
953
    <h3 class="event-name"><a href="#event-add">add</a></h3>
954
    <dl>
955
      <dt class="event-type-label">Type:</dt>
956
        <dd class="event-type">tabsadd</dd>
957
    </dl>
958
  </div>
959
  <div class="event-description">
960
    <p>This event is triggered when a tab is added.</p>
961
  </div>
962
  <div class="event-examples">
963
    <h4>Code examples</h4>
964
    <dl class="event-examples-list">
965
 
966
<dt>
967
  Supply a callback function to handle the <code>add</code> event as an init option.
968
</dt>
969
<dd>
970
<pre><code>$( &quot;.selector&quot; ).tabs({
971
   add: function(event, ui) { ... }
972
});</code></pre>
973
</dd>
974
 
975
 
976
<dt>
977
  Bind to the <code>add</code> event by type: <code>tabsadd</code>.
978
</dt>
979
<dd>
980
<pre><code>$( &quot;.selector&quot; ).bind( &quot;tabsadd&quot;, function(event, ui) {
981
  ...
982
});</code></pre>
983
</dd>
984
 
985
    </dl>
986
  </div>
987
</li>
988
 
989
 
990
<li class="event" id="event-remove">
991
  <div class="event-header">
992
    <h3 class="event-name"><a href="#event-remove">remove</a></h3>
993
    <dl>
994
      <dt class="event-type-label">Type:</dt>
995
        <dd class="event-type">tabsremove</dd>
996
    </dl>
997
  </div>
998
  <div class="event-description">
999
    <p>This event is triggered when a tab is removed.</p>
1000
  </div>
1001
  <div class="event-examples">
1002
    <h4>Code examples</h4>
1003
    <dl class="event-examples-list">
1004
 
1005
<dt>
1006
  Supply a callback function to handle the <code>remove</code> event as an init option.
1007
</dt>
1008
<dd>
1009
<pre><code>$( &quot;.selector&quot; ).tabs({
1010
   remove: function(event, ui) { ... }
1011
});</code></pre>
1012
</dd>
1013
 
1014
 
1015
<dt>
1016
  Bind to the <code>remove</code> event by type: <code>tabsremove</code>.
1017
</dt>
1018
<dd>
1019
<pre><code>$( &quot;.selector&quot; ).bind( &quot;tabsremove&quot;, function(event, ui) {
1020
  ...
1021
});</code></pre>
1022
</dd>
1023
 
1024
    </dl>
1025
  </div>
1026
</li>
1027
 
1028
 
1029
<li class="event" id="event-enable">
1030
  <div class="event-header">
1031
    <h3 class="event-name"><a href="#event-enable">enable</a></h3>
1032
    <dl>
1033
      <dt class="event-type-label">Type:</dt>
1034
        <dd class="event-type">tabsenable</dd>
1035
    </dl>
1036
  </div>
1037
  <div class="event-description">
1038
    <p>This event is triggered when a tab is enabled.</p>
1039
  </div>
1040
  <div class="event-examples">
1041
    <h4>Code examples</h4>
1042
    <dl class="event-examples-list">
1043
 
1044
<dt>
1045
  Supply a callback function to handle the <code>enable</code> event as an init option.
1046
</dt>
1047
<dd>
1048
<pre><code>$( &quot;.selector&quot; ).tabs({
1049
   enable: function(event, ui) { ... }
1050
});</code></pre>
1051
</dd>
1052
 
1053
 
1054
<dt>
1055
  Bind to the <code>enable</code> event by type: <code>tabsenable</code>.
1056
</dt>
1057
<dd>
1058
<pre><code>$( &quot;.selector&quot; ).bind( &quot;tabsenable&quot;, function(event, ui) {
1059
  ...
1060
});</code></pre>
1061
</dd>
1062
 
1063
    </dl>
1064
  </div>
1065
</li>
1066
 
1067
 
1068
<li class="event" id="event-disable">
1069
  <div class="event-header">
1070
    <h3 class="event-name"><a href="#event-disable">disable</a></h3>
1071
    <dl>
1072
      <dt class="event-type-label">Type:</dt>
1073
        <dd class="event-type">tabsdisable</dd>
1074
    </dl>
1075
  </div>
1076
  <div class="event-description">
1077
    <p>This event is triggered when a tab is disabled.</p>
1078
  </div>
1079
  <div class="event-examples">
1080
    <h4>Code examples</h4>
1081
    <dl class="event-examples-list">
1082
 
1083
<dt>
1084
  Supply a callback function to handle the <code>disable</code> event as an init option.
1085
</dt>
1086
<dd>
1087
<pre><code>$( &quot;.selector&quot; ).tabs({
1088
   disable: function(event, ui) { ... }
1089
});</code></pre>
1090
</dd>
1091
 
1092
 
1093
<dt>
1094
  Bind to the <code>disable</code> event by type: <code>tabsdisable</code>.
1095
</dt>
1096
<dd>
1097
<pre><code>$( &quot;.selector&quot; ).bind( &quot;tabsdisable&quot;, function(event, ui) {
1098
  ...
1099
});</code></pre>
1100
</dd>
1101
 
1102
    </dl>
1103
  </div>
1104
</li>
1105
 
1106
    </ul>
1107
  </div>
1108
  <div id="methods">
1109
    <h2 class="top-header">Methods</h2>
1110
    <ul class="methods-list">
1111
 
1112
<li class="method" id="method-destroy">
1113
  <div class="method-header">
1114
    <h3 class="method-name"><a href="#method-destroy">destroy</a></h3>
1115
    <dl>
1116
      <dt class="method-signature-label">Signature:</dt>
1117
        <dd class="method-signature">.tabs( "destroy"
1118
 
1119
 
1120
 
1121
 
1122
 
1123
 
1124
 
1125
)</dd>
1126
    </dl>
1127
  </div>
1128
  <div class="method-description">
1129
    <p>Remove the tabs functionality completely. This will return the element back to its pre-init state.</p>
1130
  </div>
1131
</li>
1132
 
1133
 
1134
<li class="method" id="method-disable">
1135
  <div class="method-header">
1136
    <h3 class="method-name"><a href="#method-disable">disable</a></h3>
1137
    <dl>
1138
      <dt class="method-signature-label">Signature:</dt>
1139
        <dd class="method-signature">.tabs( "disable"
1140
 
1141
 
1142
 
1143
 
1144
 
1145
 
1146
 
1147
)</dd>
1148
    </dl>
1149
  </div>
1150
  <div class="method-description">
1151
    <p>Disable the tabs.</p>
1152
  </div>
1153
</li>
1154
 
1155
 
1156
<li class="method" id="method-enable">
1157
  <div class="method-header">
1158
    <h3 class="method-name"><a href="#method-enable">enable</a></h3>
1159
    <dl>
1160
      <dt class="method-signature-label">Signature:</dt>
1161
        <dd class="method-signature">.tabs( "enable"
1162
 
1163
 
1164
 
1165
 
1166
 
1167
 
1168
 
1169
)</dd>
1170
    </dl>
1171
  </div>
1172
  <div class="method-description">
1173
    <p>Enable the tabs.</p>
1174
  </div>
1175
</li>
1176
 
1177
 
1178
<li class="method" id="method-option">
1179
  <div class="method-header">
1180
    <h3 class="method-name"><a href="#method-option">option</a></h3>
1181
    <dl>
1182
      <dt class="method-signature-label">Signature:</dt>
1183
        <dd class="method-signature">.tabs( "option"
1184
 
1185
, optionName
1186
 
1187
, <span class="optional">[</span>value<span class="optional">] </span>
1188
 
1189
 
1190
 
1191
)</dd>
1192
    </dl>
1193
  </div>
1194
  <div class="method-description">
1195
    <p>Get or set any tabs option. If no value is specified, will act as a getter.</p>
1196
  </div>
1197
</li>
1198
 
1199
 
1200
<li class="method" id="method-option">
1201
  <div class="method-header">
1202
    <h3 class="method-name"><a href="#method-option">option</a></h3>
1203
    <dl>
1204
      <dt class="method-signature-label">Signature:</dt>
1205
        <dd class="method-signature">.tabs( "option"
1206
 
1207
, options
1208
 
1209
 
1210
 
1211
 
1212
 
1213
)</dd>
1214
    </dl>
1215
  </div>
1216
  <div class="method-description">
1217
    <p>Set multiple tabs options at once by providing an options object.</p>
1218
  </div>
1219
</li>
1220
 
1221
 
1222
<li class="method" id="method-widget">
1223
  <div class="method-header">
1224
    <h3 class="method-name"><a href="#method-widget">widget</a></h3>
1225
    <dl>
1226
      <dt class="method-signature-label">Signature:</dt>
1227
        <dd class="method-signature">.tabs( "widget"
1228
 
1229
 
1230
 
1231
 
1232
 
1233
 
1234
 
1235
)</dd>
1236
    </dl>
1237
  </div>
1238
  <div class="method-description">
1239
    <p>Returns the .ui-tabs element.</p>
1240
  </div>
1241
</li>
1242
 
1243
 
1244
<li class="method" id="method-add">
1245
  <div class="method-header">
1246
    <h3 class="method-name"><a href="#method-add">add</a></h3>
1247
    <dl>
1248
      <dt class="method-signature-label">Signature:</dt>
1249
        <dd class="method-signature">.tabs( "add"
1250
 
1251
, url
1252
 
1253
, label
1254
 
1255
, <span class="optional">[</span>index<span class="optional">] </span>
1256
 
1257
)</dd>
1258
    </dl>
1259
  </div>
1260
  <div class="method-description">
1261
    <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>
1262
  </div>
1263
</li>
1264
 
1265
 
1266
<li class="method" id="method-remove">
1267
  <div class="method-header">
1268
    <h3 class="method-name"><a href="#method-remove">remove</a></h3>
1269
    <dl>
1270
      <dt class="method-signature-label">Signature:</dt>
1271
        <dd class="method-signature">.tabs( "remove"
1272
 
1273
, index
1274
 
1275
 
1276
 
1277
 
1278
 
1279
)</dd>
1280
    </dl>
1281
  </div>
1282
  <div class="method-description">
1283
    <p>Remove a tab. The second argument is the zero-based index of the tab to be removed.</p>
1284
  </div>
1285
</li>
1286
 
1287
 
1288
<li class="method" id="method-enable">
1289
  <div class="method-header">
1290
    <h3 class="method-name"><a href="#method-enable">enable</a></h3>
1291
    <dl>
1292
      <dt class="method-signature-label">Signature:</dt>
1293
        <dd class="method-signature">.tabs( "enable"
1294
 
1295
, index
1296
 
1297
 
1298
 
1299
 
1300
 
1301
)</dd>
1302
    </dl>
1303
  </div>
1304
  <div class="method-description">
1305
    <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>
1306
  </div>
1307
</li>
1308
 
1309
 
1310
<li class="method" id="method-disable">
1311
  <div class="method-header">
1312
    <h3 class="method-name"><a href="#method-disable">disable</a></h3>
1313
    <dl>
1314
      <dt class="method-signature-label">Signature:</dt>
1315
        <dd class="method-signature">.tabs( "disable"
1316
 
1317
, index
1318
 
1319
 
1320
 
1321
 
1322
 
1323
)</dd>
1324
    </dl>
1325
  </div>
1326
  <div class="method-description">
1327
    <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>
1328
  </div>
1329
</li>
1330
 
1331
 
1332
<li class="method" id="method-select">
1333
  <div class="method-header">
1334
    <h3 class="method-name"><a href="#method-select">select</a></h3>
1335
    <dl>
1336
      <dt class="method-signature-label">Signature:</dt>
1337
        <dd class="method-signature">.tabs( "select"
1338
 
1339
, index
1340
 
1341
 
1342
 
1343
 
1344
 
1345
)</dd>
1346
    </dl>
1347
  </div>
1348
  <div class="method-description">
1349
    <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>
1350
  </div>
1351
</li>
1352
 
1353
 
1354
<li class="method" id="method-load">
1355
  <div class="method-header">
1356
    <h3 class="method-name"><a href="#method-load">load</a></h3>
1357
    <dl>
1358
      <dt class="method-signature-label">Signature:</dt>
1359
        <dd class="method-signature">.tabs( "load"
1360
 
1361
, index
1362
 
1363
 
1364
 
1365
 
1366
 
1367
)</dd>
1368
    </dl>
1369
  </div>
1370
  <div class="method-description">
1371
    <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>
1372
  </div>
1373
</li>
1374
 
1375
 
1376
<li class="method" id="method-url">
1377
  <div class="method-header">
1378
    <h3 class="method-name"><a href="#method-url">url</a></h3>
1379
    <dl>
1380
      <dt class="method-signature-label">Signature:</dt>
1381
        <dd class="method-signature">.tabs( "url"
1382
 
1383
, index
1384
 
1385
, url
1386
 
1387
 
1388
 
1389
)</dd>
1390
    </dl>
1391
  </div>
1392
  <div class="method-description">
1393
    <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>
1394
  </div>
1395
</li>
1396
 
1397
 
1398
<li class="method" id="method-length">
1399
  <div class="method-header">
1400
    <h3 class="method-name"><a href="#method-length">length</a></h3>
1401
    <dl>
1402
      <dt class="method-signature-label">Signature:</dt>
1403
        <dd class="method-signature">.tabs( "length"
1404
 
1405
 
1406
 
1407
 
1408
 
1409
 
1410
 
1411
)</dd>
1412
    </dl>
1413
  </div>
1414
  <div class="method-description">
1415
    <p>Retrieve the number of tabs of the first matched tab pane.</p>
1416
  </div>
1417
</li>
1418
 
1419
 
1420
<li class="method" id="method-abort">
1421
  <div class="method-header">
1422
    <h3 class="method-name"><a href="#method-abort">abort</a></h3>
1423
    <dl>
1424
      <dt class="method-signature-label">Signature:</dt>
1425
        <dd class="method-signature">.tabs( "abort"
1426
 
1427
 
1428
 
1429
 
1430
 
1431
 
1432
 
1433
)</dd>
1434
    </dl>
1435
  </div>
1436
  <div class="method-description">
1437
    <p>Terminate all running tab ajax requests and animations.</p>
1438
  </div>
1439
</li>
1440
 
1441
 
1442
<li class="method" id="method-rotate">
1443
  <div class="method-header">
1444
    <h3 class="method-name"><a href="#method-rotate">rotate</a></h3>
1445
    <dl>
1446
      <dt class="method-signature-label">Signature:</dt>
1447
        <dd class="method-signature">.tabs( "rotate"
1448
 
1449
, ms
1450
 
1451
, <span class="optional">[</span>continuing<span class="optional">] </span>
1452
 
1453
 
1454
 
1455
)</dd>
1456
    </dl>
1457
  </div>
1458
  <div class="method-description">
1459
    <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>
1460
  </div>
1461
</li>
1462
 
1463
    </ul>
1464
  </div>
1465
  <div id="theming">
1466
    <h2 class="top-header">Theming</h2>
1467
    <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.
1468
</p>
1469
  <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.
1470
</p>
1471
 
1472
  <h3>Sample markup with jQuery UI CSS Framework classes</h3>
1473
  &lt;div class=&quot;<strong>ui-tabs</strong> ui-widget ui-widget-content ui-corner-all&quot; id=&quot;tabs&quot;&gt;<br />
1474
&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 />
1475
&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 />
1476
&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 />
1477
&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 />
1478
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Tab one content goes here.&lt;/p&gt;<br />
1479
&nbsp;&nbsp;&nbsp;&lt;/div&gt;<br />
1480
&nbsp;&nbsp;&nbsp; ...<br />
1481
&lt;/div&gt;<br />
1482
  <p class="theme-note">
1483
    <strong>
1484
      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 />
1485
&#160;&#160;&#160;&lt;ul&gt;<br />
1486
&#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 />
1487
&#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 />
1488
&#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 />
1489
&#160;&#160;&#160;&lt;/ul&gt;<br />
1490
&#160;&#160;&#160;&lt;div id=&quot;tabs-1&quot;&gt;<br />
1491
&#160;&#160;&#160;&#160;&#160;&#160;&lt;p&gt;Tab 1 content&lt;/p&gt;<br />
1492
&#160;&#160;&#160;&lt;/div&gt;<br />
1493
&#160;&#160;&#160;&lt;div id=&quot;tabs-2&quot;&gt;<br />
1494
&#160;&#160;&#160;&#160;&#160;&#160;&lt;p&gt;Tab 2 content&lt;/p&gt;<br />
1495
&#160;&#160;&#160;&lt;/div&gt;<br />
1496
&#160;&#160;&#160;&lt;div id=&quot;tabs-3&quot;&gt;<br />
1497
&#160;&#160;&#160;&#160;&#160;&#160;&lt;p&gt;Tab 3 content&lt;/p&gt;<br />
1498
&#160;&#160;&#160;&lt;/div&gt;<br />
1499
&lt;/div&gt;.
1500
    </strong>
1501
  </p>
1502
 
1503
  </div>
1504
</div>
1505
 
1506
</p><!--
1507
Pre-expand include size: 56145 bytes
1508
Post-expand include size: 94471 bytes
1509
Template argument size: 56684 bytes
1510
Maximum: 2097152 bytes
1511
-->
1512
 
1513
<!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:3777-1!1!0!!en!2 and timestamp 20100910172930 -->