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