jQuery UI - Tabs Demos & Documentation
jQuery UI - Tabs Demos & Documentation
例子：http://jqueryui.com/tabs/
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Tabs - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
<li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
</div>
<div id="tabs-3">
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
</div>
</div>
</body>
</html>
Options
active
collapsible
disabled
event
heightStyle
hide
show
Methods
destroy
disable
enable
load
option
refresh
widget
Events
activate
beforeActivate
beforeLoad
create
load
Description: A single content area with multiple panels, each associated with a header in a list.
Options
active Type: Boolean or Integer
Default:
0
Which panel is currently open.
Multiple types supported:
- Boolean: Setting
activetofalsewill collapse all panels. This requires thecollapsibleoption to betrue. - Integer: The zero-based index of the panel that is active (open). A negative value selects panels going backward from the last panel.
collapsible Type: Boolean
Default:
false
When set to
true, the active panel can be closed.
disabled Type: Boolean or Array
Default:
false
Which tabs are disabled.
Multiple types supported:
- Boolean: Enable or disable all tabs.
- Array: An array containing the zero-based indexes of the tabs that should be disabled, e.g.,
[ 0, 2 ]would disable the first and third tab.
event Type: String
Default:
"click"
The type of event that the tabs should react to in order to activate the tab. To activate on hover, use
"mouseover".
heightStyle Type: String
Default:
"auto"
Controls the height of the tabs widget and each panel. Possible values:
"auto": All panels will be set to the height of the tallest panel."fill": Expand to the available height based on the tabs' parent height."content": Each panel will be only as tall as its content.
hide Type: Boolean or Number or String or Object
Default:
null
If and how to animate the hiding of the panel.
Multiple types supported:
- Boolean: When set to
false, no animation will be used and the panel will be hidden immediately.When set totrue, the panel will fade out with the default duration and the default easing. - Number: The panel will fade out with the specified duration and the default easing.
- String: The panel will be hidden using the specified effect.The value can either be the name of a built-in jQuery animateion method, such as
"slideUp", or the name of a jQuery UI effect, such as"fold".In either case the effect will be used with the default duration and the default easing. - Object: If the value is an object, then
effect,duration, andeasingproperties may be provided. If theeffectproperty contains the name of a jQuery method, then that method will be used; otherwise it is assumed to be the name of a jQuery UI effect. When using a jQuery UI effect that supports additional settings, you may include those settings in the object and they will be passed to the effect. Ifdurationoreasingis omitted, then the default values will be used. Ifeffectis omitted, then"fadeOut"will be used.
show Type: Boolean or Number or String or Object
Default:
null
If and how to animate the showing of the panel.
Multiple types supported:
- Boolean: When set to
false, no animation will be used and the panel will be shown immediately.When set totrue, the panel will fade in with the default duration and the default easing. - Number: The panel will fade in with the specified duration and the default easing.
- String: The panel will be shown using the specified effect.The value can either be the name of a built-in jQuery animateion method, such as
"slideDown", or the name of a jQuery UI effect, such as"fold".In either case the effect will be used with the default duration and the default easing. - Object: If the value is an object, then
effect,duration, andeasingproperties may be provided. If theeffectproperty contains the name of a jQuery method, then that method will be used; otherwise it is assumed to be the name of a jQuery UI effect. When using a jQuery UI effect that supports additional settings, you may include those settings in the object and they will be passed to the effect. Ifdurationoreasingis omitted, then the default values will be used. Ifeffectis omitted, then"fadeIn"will be used.
Methods
destroy()
Removes the tabs functionality completely. This will return the element back to its pre-init state.
disable()
Disables all tabs.
disable( index )
Disables a tab. The selected tab cannot be disabled. To disable more than one tab at once, set the
disabled option:
$( "#tabs" ).tabs( "option", "disabled", [ 1, 2, 3 ] )-
indexType: Number or StringWhich tab to disable.
enable()
Enables all tabs.
enable( index )
Enables a tab. To enable more than one tab at once reset the disabled property like:
$( "#example" ).tabs( "option", "disabled", [] );.
-
indexType: Number or StringWhich tab to enable.
load( index )
Loads the panel content of a remote tab.
-
indexType: Number or StringWhich tab to load.
option( optionName ) Returns: Object
Gets the value currently associated with the specified
optionName.
-
optionNameType: StringThe name of the option to get.
option() Returns: PlainObject
Gets an object containing key/value pairs representing the current tabs options hash.
option( optionName, value )
Sets the value of the tabs option associated with the specified
optionName.
-
optionNameType: StringThe name of the option to set.
-
valueType: ObjectA value to set for the option.
option( options )
Sets one or more options for the tabs.
-
optionsType: ObjectA map of option-value pairs to set.
refresh()
Process any tabs that were added or removed directly in the DOM and recompute the height of the tab panels. Results depend on the content and the
heightStyle option.
widget() Returns: jQuery
Returns a
jQuery object containing the tabs container.
Events
activate( event, ui )
Triggered after a tab has been activated (after animation completes). If the tabs were previously collapsed,
ui.oldTab and
ui.oldPanel will be empty jQuery objects. If the tabs are collapsing,
ui.newTab and
ui.newPanel will be empty jQuery objects.
-
eventType: Event
-
uiType: Object
-
newTabType: jQueryThe tab that was just activated.
-
oldTabType: jQueryThe tab that was just deactivated.
-
newPanelType: jQueryThe panel that was just activated.
-
oldPanelType: jQueryThe panel that was just deactivated.
-
beforeActivate( event, ui )
Triggered directly after a tab is activated. Can be canceled to prevent the tab from activating. If the tabs are currently collapsed,
ui.oldTab and
ui.oldPanel will be empty jQuery objects. If the tabs are collapsing,
ui.newTab and
ui.newPanel will be empty jQuery objects.
-
eventType: Event
-
uiType: Object
-
newTabType: jQueryThe tab that is about to be activated.
-
oldTabType: jQueryThe tab that is about to be deactivated.
-
newPanelType: jQueryThe panel that is about to be activated.
-
oldPanelType: jQueryThe panel that is about to be deactivated.
-
beforeLoad( event, ui )
Triggered when a remote tab is about to be loaded, after the
beforeActivate event. Can be canceled to prevent the tab panel from loading content; though the panel will still be activated. This event is triggered just before the Ajax request is made, so modifications can be made to
ui.jqXHR and
ui.ajaxSettings.
-
eventType: Event
-
uiType: Object
-
tabType: jQueryThe tab that is being loaded.
-
panelType: jQueryThe panel which will be populated by the Ajax response.
-
jqXHRType: jqXHRThe
jqXHRobject that is requesting the content. -
ajaxSettingsType: ObjectThe settings that will be used by
jQuery.ajaxto request the content.
-
create( event, ui )
Triggered when the tabs are created. If the tabs are collapsed,
ui.tab and
ui.panel will be empty jQuery objects.
-
eventType: Event
-
uiType: Object
-
tabType: jQueryThe active tab.
-
panelType: jQueryThe active panel.
-
load( event, ui )
Triggered after a remote tab has been loaded.
-
eventType: Event
-
uiType: Object
-
tabType: jQueryThe tab that was just loaded.
-
panelType: jQueryThe panel which was just populated by the Ajax response.
-
Tabs are generally used to break content into multiple sections that can be swapped to save space, much like an accordion.
The content for each tab panel can be defined in-page or can be loaded via Ajax; both are handled automatically based on the href of the anchor associated with the tab. By default tabs are activated on click, but the events can be changed to hover via the event option.
Keyboard interaction
When focus is on a tab, the following key commands are available:
- UP/LEFT: Move focus to the previous tab. If on first tab, moves focus to last tab. Activate focused tab after a short delay.
- DOWN/RIGHT: Move focus to the next tab. If on last tab, moves focus to first tab. Activate focused tab after a short delay.
- HOME: Move focus to the first tab. Activate focused tab after a short delay.
- END: Move focus to the last tab. Activate focused tab after a short delay.
- SPACE: Activate panel associated with focused tab.
- ENTER: Activate or toggle panel associated with focused tab.
- ALT+PAGE UP: Move focus to the previous tab and immediately activate.
- ALT+PAGE DOWN: Move focus to the next tab and immediately activate.
When focus is in a panel, the following key commands are available:
- CTRL+UP: Move focus to associated tab.
- ALT+PAGE UP: Move focus to the previous tab and immediately activate.
- ALT+PAGE DOWN: Move focus to the next tab and immediately activate.
Additional Notes:
- This widget requires some functional CSS, otherwise it won't work. If you build a custom theme, use the widget's specific CSS file as a starting point.
Example:
A simple jQuery UI Tabs
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>tabs demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#fragment-1"><span>One</span></a></li>
<li><a href="#fragment-2"><span>Two</span></a></li>
<li><a href="#fragment-3"><span>Three</span></a></li>
</ul>
<div id="fragment-1">
<p>First tab is active by default:</p>
<pre><code>$( "#tabs" ).tabs(); </code></pre>
</div>
<div id="fragment-2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div id="fragment-3">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
</div>
<script>$( "#tabs" ).tabs();</script>
</body>
</html>
本文摘自：http://jqueryui.com/tabs/
http://api.jqueryui.com/tabs/