jQuery UI - Tabs Demos & Documentation

来源：互联网发布：网络艺人经纪合同范本编辑：程序博客网时间：2024/05/21 17:41

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 active to false will collapse all panels. This requires thecollapsible option 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 orArray

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, and easing properties may be provided. If theeffect property 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. If duration or easing is omitted, then the default values will be used. If effect is omitted, then"fadeOut" will be used.

show Type: Boolean orNumber 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, and easing properties may be provided. If theeffect property 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. If duration or easing is omitted, then the default values will be used. If effect is 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 thedisabled option:


$( "#tabs" ).tabs( "option", "disabled", [ 1, 2, 3 ] )

index
Type: Number or String
Which 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", [] );.

index
Type: Number or String
Which tab to enable.

load( index )

Loads the panel content of a remote tab.

index
Type: Number or String
Which tab to load.

option( optionName ) Returns: Object

Gets the value currently associated with the specified optionName.

optionName
Type: String
The 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.

optionName
Type: String
The name of the option to set.
value
Type: Object
A value to set for the option.

option( options )

Sets one or more options for the tabs.

options
Type: Object
A 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 theheightStyle option.

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.

event
Type: Event
ui
Type: Object
- newTab
  Type: jQuery
  The tab that was just activated.
- oldTab
  Type: jQuery
  The tab that was just deactivated.
- newPanel
  Type: jQuery
  The panel that was just activated.
- oldPanel
  Type: jQuery
  The 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.

event
Type: Event
ui
Type: Object
- newTab
  Type: jQuery
  The tab that is about to be activated.
- oldTab
  Type: jQuery
  The tab that is about to be deactivated.
- newPanel
  Type: jQuery
  The panel that is about to be activated.
- oldPanel
  Type: jQuery
  The 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 toui.jqXHR and ui.ajaxSettings.

event
Type: Event
ui
Type: Object
- tab
  Type: jQuery
  The tab that is being loaded.
- panel
  Type: jQuery
  The panel which will be populated by the Ajax response.
- jqXHR
  Type: jqXHR
  The jqXHR object that is requesting the content.
- ajaxSettings
  Type: Object
  The settings that will be used by jQuery.ajax to request the content.

create( event, ui )

Triggered when the tabs are created. If the tabs are collapsed, ui.tab andui.panel will be empty jQuery objects.

event
Type: Event
ui
Type: Object
- tab
  Type: jQuery
  The active tab.
- panel
  Type: jQuery
  The active panel.

load( event, ui )

Triggered after a remote tab has been loaded.

event
Type: Event
ui
Type: Object
- tab
  Type: jQuery
  The tab that was just loaded.
- panel
  Type: jQuery
  The 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 thehref of the anchor associated with the tab. By default tabs are activated on click, but the events can be changed to hover via theevent 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/

jQuery UI - Tabs Demos & Documentation