Jquery UI tabs (Chinese)

1 attribute
1.11 ajaxoptions When the tab loads the content, add an Ajax option. The added Ajax option takes effect only when Ajax is used. The default value is null. In the preceding example, the beforesend and success options are added. For more information about Ajax options, see jquery Ajax...
1.12 initialization setting example: Note that $ ('. selector') is the class name of tabs. In this example,. selector = # tabs.
$ ('. Selector'). tabs ({ajaxoptions: {async: false}); // the asynchronous mode is changed to synchronous mode.
1.13 obtain and set parameters after initialization: note the following: Getter is set to get, pronunciation: gater, setter is set, pronunciation: seter, not described later.
// Getter
VaR ajaxoptions = $ ('. selector'). tabs ('option', 'ajaxoptions ');
// Setter
$ ('. Selector'). tabs ('option', 'ajaxoptions', {async: false });

1.21 CacheThe default value is false and no cache is available. This option is used for Ajax calls. Simply put, no cache is used to refresh every request sent. cache is the first request refresh and will not be refreshed in the future. Closing the page is another matter. Ajaxoptions: {cache: false} should be the same as this function.
1.22 initialization setting example:
$ ('. Selector'). tabs ({cache: true });
2.23 obtain and set parameters after initialization:
// Getter
VaR cache = $ ('. selector'). tabs ('option', 'cache ');
// Setter
$ ('. Selector'). tabs ('option', 'cache', true );

1.31 collapsibleThe default option is false. If this parameter is set to true, you can fold the Selected tab content. Let's talk about this: Click Tab 2 once, and the content of Tab 2 is displayed. Click Tab 2 again, and the content area of the tab is closed. Click Tab 2 again, the content area of the tab is expanded. Do you understand? If you do not understand it, use the top example.
1.32 initialization setting example:
$ ('. Selector'). tabs ({collapsible: true });
1.33 obtain and set parameters after initialization: see 1. 23...

Cookie 1.41The default value is null,Cookie plug-in required. Save the last Selected tab to the cookie. Example: (example): {expires: 7, path: '/', domain: 'jquery. com', secure: true }.
1.42 initialization setting example: $ ('. selector'). tabs ({COOKIE: {expires: 30 }});
1.43 obtain and set parameters after initialization: see 1. 23...

1.51 deselectableThe default value is false, which seems to be the same as collapsible.

1.61 disabledWhich tabs are set to be unavailable is an array example [0, 1, 2], that is, the first, second, and third tabs. The default value is [].
1.62 initialization setting example: $ ('. selector'). tabs ({disabled: [1, 2]});
1.63 obtain and set parameters after initialization: see 1. 23...

1.71 eventTo switch the event of the tab. The default value is 'click'. Click the switch tab.
1.72 initialization setting example: $ ('. selector'). tabs ({event: 'mouseover'}); // move the mouse over the switch Tab
1.73 obtain and set parameters after initialization: see 1. 23...

1.81 FXThe animation effect when you switch the tab. The default value is null,
1.82 initialization settings: see the previous example.
1.83 obtain and set parameters after initialization: see 1. 23...

1.91 idprefixWhen Ajax is used, the idprefix option can add a unique ID for it. The default value is 'ui-Tabs -'.
1.92 initialization setting example: $ ('. selector'). tabs ({idprefix: 'ui-Tabs-Primary '});
1.93 obtain and set parameters after initialization: see 1. 23...

1.101 selectedWhich tab is selected during initialization. The default value is 0, that is, the first tab is selected.
1.102 initialization setting example: $ ('. selector'). tabs ({selected: 3 });
1.103 obtain and set parameters after initialization: see 1. 23...

1.111 SpinnerWhen the remote content is loaded, the HTML content of the (Ajax) and spinner string will be displayed on the tab title. (I tried it myself. Why didn't it work ?)
1.112 initialization setting example: $ ('. selector'). tabs ({spinner: 'retrieving data ...'});
1.113 obtain and set parameters after initialization: see 1. 23...

1.121 paneltemplate,

1.131 tabtemplate.eu-central-1.maxcompute.aliyun-inc.com/api,

2 events
First, an event binding example is provided,Note:
$ ('# Example'). BIND ('tabsselect ', function (event, UI ){
Ui. Tab// The tab element selected (after clicking)
Ui. Panel// This element contains the content of the Selected tab (after clicking)
Ui. Index// Return the index value of a selected (or clicked) tab (starting from 0)
});

2.11 select type: tabsselect. This event is triggered when you click the tab.
2.12 bind events during initialization:
$ ('. Selector'). tabs ({
Select: function (event, UI ){...}
});
2.13 bind the event after initialization:
$ ('. Selector'). BIND ('tabsselect ', function (event, UI ){
...
});

2.21 load, type: tabsload this event is triggered when the content of a remote (Ajax) tab is loaded.
2.22 reference 2.12
2.23 reference 2.13
2.31 show, type: tabsshow this event is triggered when the tab is displayed.
2.41 add, type: tabsadd, triggered when a tab is added.
2.51 remove, type tabsremove, triggered when a tab is deleted.
2.61 enable, type tabsenable, triggered when a tab is available.
2.71 disable, type tabsdisable, triggered when a tab is unavailable.

3 Method
3.11 destroy, haha, It's my favorite time to destroy the Earth. Example:. tabs ('deststroy ')
3.21 Disable: The entire tab is unavailable.
3.31 enable, the entire tab is available .. Tabs ('enable ')
3.41 option: Set attributes. Example:. tabs ('option', optionname, [ Value ] )
3.51 add, remove, add and delete tabs. Example:. tabs ('add', URL, label, [ Index ] ),. Tabs ('delete', index)
3.61 enable: Set a tab label to be available. Example:. tabs ('enable', index)
3.71 Disable: Set a tab label to unavailable. Example:. tabs ('disable', index)
3.81 select, select a tab label. For example,. tabs ('select', index). Index starts from 0.
3.91 load: Reload the content of an Ajax tab, which is always loaded to remote content. Even if the cache is set to true, the second parameter is the index value of the tab to be reloaded. Example:. tabs ('load', index)
3.101 URL. When an Ajax tab is to be loaded, change the URL .. Tabs ('url', index, URL)
3.111 ABORT: Abort all Ajax requests or animations running on the tab .. Tabs ('abort ')
3.121 rotate, automatically tumble tab labels .. Tabs ('rotate', MS, [countinue]), second parameter is millisecond, is the time required for two labels to automatically roll, set to 0 or null to stop rolling. The third parameter is to set whether to continue rolling after you select a tab label. The default value is false.
So tired. Let's take a rest...
4 tips
4.1 how do I receive the index values of Selected tab labels?
For example, VAR $ tabs = $ ('# example'). tabs ();
VaR selected = $ tabs. tabs ('option', 'selected'); // => 0
4.2 How to use another element to replace the tab and click the event to switch the tab?
For example, VAR $ tabs = $ ('# example'). tabs (); // The first tag is selected.
$ ('# My-text-link'). Click (function () {// bind a click event
$ Tabs. tabs ('select', 2); // switch to the third tab label.
Return false;
});
4.3 how do I select the added tab label immediately?
For example, VAR $ tabs = $ ('# example'). tabs ({
Add: function (event, UI ){
$ Tabs. tabs ('select', '#' + UI. Panel. ID );
}
});
4.4 How do I open a tab label in a new window?
Example: $ ('# example'). tabs ({
Select: function (event, UI ){
Location. href = $. Data (ui. tab, 'Load. Tabs ');
Return false;
}
});