tabs(initial, settings)

Create an accessible, unobtrusive tab interface based on a certain HTML structure. The underlying HTML has to look like this: <div id="container"> <ul> <li><a href="#section-1">Section 1</a></li> <li><a href="#section-2">Section 2</a></li> <li><a href="#section-3">Section 3</a></li> </ul> <div id="section-1"> </div> <div id="section-2"> </div> <div id="section-3"> </div> </div> Each anchor in the unordered list points directly to a section below represented by one of the divs (the URI in the anchor's href attribute refers to the fragment with the corresponding id). Because such HTML structure is fully functional on its own, e.g. without JavaScript, the tab interface is accessible and unobtrusive. A tab is also bookmarkable via hash in the URL. Use the History/Remote plugin (Tabs will auto-detect its presence) to fix the back (and forward) button.

返回值

jQuery

参数

• initial (Number): An integer specifying the position of the tab (no zero-based index) that gets first activated, e.g. on page load. If a hash in the URL of the page refers to one fragment (tab container) of a tab interface, this parameter will be ignored and instead the tab belonging to that fragment in that specific tab interface will be activated. Defaults to 1 if omitted.
• settings (Object): An object literal containing key/value pairs to provide optional settings.

Hash 选项

• disabled (Array<Number>): An array containing the position of the tabs (no zero-based index) that should be disabled on initialization. Default value: null.
• bookmarkable (Boolean): Boolean flag indicating if support for bookmarking and history (via changing hash in the URL of the browser) is enabled. Default value: false, unless the History/Remote plugin is included. In that case the default value becomes true. @see $.ajaxHistory.initialize
• fxFade (Boolean): Boolean flag indicating whether fade in/out animations are used for tab switching. Can be combined with fxSlide. Will overrule fxShow/fxHide. Default value: false.
• fxSlide (Boolean): Boolean flag indicating whether slide down/up animations are used for tab switching. Can be combined with fxFade. Will overrule fxShow/fxHide. Default value: false.
• fxSpeed (String|Number): A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds (e.g. 1000) to run an animation. Default value: "normal".
• fxShow (Object): An object literal of the form jQuery's animate function expects for making your own, custom animation to reveal a tab upon tab switch. Unlike fxFade or fxSlide this animation is independent from an optional hide animation. Default value: null. @see animate
• fxHide (Object): An object literal of the form jQuery's animate function expects for making your own, custom animation to hide a tab upon tab switch. Unlike fxFade or fxSlide this animation is independent from an optional show animation. Default value: null. @see animate
• fxShowSpeed (String|Number): A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds (e.g. 1000) to run the animation specified in fxShow. Default value: fxSpeed.
• fxHideSpeed (String|Number): A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds (e.g. 1000) to run the animation specified in fxHide. Default value: fxSpeed.
• fxAutoHeight (Boolean): Boolean flag that if set to true causes all tab heights to be constant (being the height of the tallest tab). Default value: false.
• onClick (Function): A function to be invoked upon tab switch, immediatly after a tab has been clicked, e.g. before the other's tab content gets hidden. The function gets passed three arguments: the first one is the clicked tab (e.g. an anchor element), the second one is the DOM element containing the content of the clicked tab (e.g. the div), the third argument is the one of the tab that gets hidden. Default value: null.
• onHide (Function): A function to be invoked upon tab switch, immediatly after one tab's content got hidden (with or without an animation) and right before the next tab is revealed. The function gets passed three arguments: the first one is the clicked tab (e.g. an anchor element), the second one is the DOM element containing the content of the clicked tab, (e.g. the div), the third argument is the one of the tab that gets hidden. Default value: null.
• onShow (Function): A function to be invoked upon tab switch. This function is invoked after the new tab has been revealed, e.g. after the switch is completed. The function gets passed three arguments: the first one is the clicked tab (e.g. an anchor element), the second one is the DOM element containing the content of the clicked tab, (e.g. the div), the third argument is the one of the tab that gets hidden. Default value: null.
• selectedClass (String): The CSS class attached to the li element representing the currently selected (active) tab. Default value: "tabs-selected".
• disabledClass (String): The CSS class attached to the li element representing a disabled tab. Default value: "tabs-disabled".
• hideClass (String): The CSS class used for hiding inactive tabs. A class is used instead of "display: none" in the style attribute to maintain control over visibility in other media types than screen, most notably print. Default value: "tabs-hide".
• tabStruct (String): A CSS selector or basic XPath expression reflecting a nested HTML structure that is different from the default single div structure (one div with an id inside the overall container holds one tab's content). If for instance an additional div is required to wrap up the several tab containers such a structure is expressed by "div>div". Default value: "div".