1 Properties
1.11 ajaxoptions, add an AJAX option when the tab loads content. The AJAX options that are added work only when Ajax is available. The default value is null. In the above example, the Beforesend and success two options are added. Ajax also has some options, please refer to jquery ajax, here do not do a detailed ...
1.12 Initialization Setup Example:Note that $ ('. Selector ') is the class name of the tabs, in this case. selector= #tabs, no longer explained.
$ ('. Selector '). Tabs ({ajaxoptions: {async:false}});//Here is the asynchronous change to synchronous.
1.13 parameter acquisition and setting after initialization: Please note:Getter for GET, pronunciation: Geithner, setter for setting, pronunciation: Seth, no longer explained.
Getter
var ajaxoptions = $ ('. Selector '). Tabs (' option ', ' ajaxoptions ');
Setter
$ ('. Selector '). Tabs (' option ', ' ajaxoptions ', {async:false});
1.21 CacheThe default is False, no cache. This option is used for AJAX calls, which simply say no cache, that is, every time the sending request is refreshed, there is a cache is the first time the request is refreshed, not refreshed later, close the page is another matter. Ajaxoptions:{cache:false} should be the same as this function.
1.22 Initialization Setup Example:
$ ('. Selector '). Tabs ({cache:true});
2.23 parameter acquisition and setting after initialization:
Getter
var cache = $ ('. Selector '). Tabs (' option ', ' cache ');
Setter
$ ('. Selector '). Tabs (' option ', ' cache ', true);
1.31collapsible, which means collapsible, the default option is false and cannot be collapsed. If set to True, allows the user to collapse the contents of the selected tab. Let's say: Click on tab 2, tab 2 content is displayed, this time again click on tab 2, the content area of the tab is closed, click on tab 2 again, the content area of the tab expands again. Do you understand? Know you do not understand, do not understand to use the top example to try it.
1.32 Initialization Setup Example:
$ ('. Selector '). Tabs ({collapsible:true});
1.33 parameter acquisition and setting after initialization: Please refer to 1.23 ...
1.41 CookiesThe default value is NULL,A cookie plugin is required. Save the last selected tab to the cookie. Examples of available options: (example): {expires:7, path: '/', Domain: ' jquery.com ', secure:true}.
1.42 Initialization Settings Example: $ ('. Selector '). Tabs ({cookie: {expires:30}});
1.43 parameter acquisition and setting after initialization: Please refer to 1.23 ...
1.51deselectableThe default is false, which acts as if it were collapsible.
1.61 DisabledSets which tabs are not available, is an array example [0,1,2], which is the first, second, Third tab. The default is [].
1.62 Initialization Settings Example: $ ('. Selector '). Tabs ({disabled: [1, 2]});
1.63 parameter acquisition and setting after initialization: Please refer to 1.23 ...
1.71 Event, Toggle tab events, default to ' click ', click on Toggle tab.
1.72 Initialization Settings Example: $ ('. Selector '). Tabs ({event: ' mouseover '}); Slide the mouse over the Toggle tab
1.73 parameter acquisition and setting after initialization: Please refer to 1.23 ...
1.81 FX, the animation effect when switching tabs, the default is: null, no animation effect,
1.82 initialization settings: Refer to the top example.
1.83 parameter acquisition and setting after initialization: Please refer to 1.23 ...
1.91 Idprefix, when using Ajax, the Idprefix option can add a unique ID to it, and the default is: ' ui-tabs-'.
1.92 Initialization Settings Example: $ ('. Selector '). Tabs ({idprefix: ' ui-tabs-primary '});
1.93 parameter acquisition and setting after initialization: Please refer to 1.23 ...
1.101 selected, which tab is selected when initializing, the default is 0, and the first tab is selected.
1.102 Initialization Settings Example: $ ('. Selector '). Tabs ({selected:3});
1.103 parameter acquisition and setting after initialization: Please refer to 1.23 ...
1.111 Spinner, when the remote content is loaded, the HTML content of the spinner string is displayed on the header of the tab. (I'm surprised, I tried it myself, why didn't it work?) ）
1.112 Initialization Settings Example: $ ('. Selector '). Tabs ({spinner: ' Retrieving Data ... '});
1.113 parameter acquisition and setting after initialization: Please refer to 1.23 ...
1.121 paneltemplate,
1.131 tabtemplate,
2 Events
Give an example of event binding first,Please note:
$ (' #example '). Bind (' Tabsselect ', function (event, UI) {
Ui.tabSelected tab Element (after click)
Ui.panel //This element contains the contents of the tab that is selected (clicked)
ui.index //Returns the index value of a selected (or clicked) tab (starting at 0)
});
2.11 Select Type: Tabsselect, this event is triggered when a tab is clicked.
2.12 Binding event when initializing:
$ ('. Selector '). Tabs ({
Select:function (event, UI) {...}
});
2.13 Use event binding to 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 The event is triggered after the tab is selected.
2.41 Add, type: Tabsadd, triggers when a tab is added.
2.51 Remove, type Tabsremove, when a tab is deleted and then triggered.
2.61 Enable, type tabsenable, triggers when a tab is available.
2.71 Disable, type tabsdisable, triggered when a tab is not available.
3 Methods
3.11 Destroy, Haha, again to my favorite time to destroy the Earth. Example:. Tabs (' Destroy ')
3.21 Disable, the entire tab is not available.
3.31 enable, the entire tab is available: tabs (' Enable ')
3.41 option, set properties. Example:. Tabs (' option ', Optionname,[Value] )
3.51 Add,remove, add, Delete tab. Example:. Tabs (' Add ', URL, label,[Index]),. Tabs (' Remove ', index)
3.61 enable to set a tab label to be available. Example:. Tabs (' Enable ', index)
3.71 Disable, setting a tab tab is not available. Example:. Tabs (' Disable ', index)
3.81 Select, choose a tab label. Example:. Tabs (' select ', index), index starting from 0.
3.91 load, overloading the contents of an AJAX tab, which always loads remote content, even if the cache is set to True, the second parameter is the index value of the tab to reload. Example:. Tabs (' Load ', index)
3.101 URL, when an AJAX tab will be loaded, change the URL: tabs (' url ', index, URL)
3.111 Abort, abort all AJAX requests or animations running on the Tab tab: Tabs (' abort ')
3.121 Rotate, auto Roll tab Label: tabs (' rotate ', ms,[countinue]), the second parameter is millisecond, is the time required for auto-tumbling of two tabs, set to 0 or null to stop tumbling. The third parameter is whether to continue tumbling after the user selects a tab label, the default is: False, does not continue.
I'm tired, let's rest and say ...
4 Tips
4.1 How do I receive the index value of a selected tab label?
Example: var $tabs = $ (' #example '). tabs ();
var selected = $tabs. Tabs (' option ', ' selected '); = 0
4.2 How do I switch tabs with one other element instead of a tab click event?
Example: var $tabs = $ (' #example '). tabs (); The first tab is selected
$ (' #my-text-link '). Click (function () {//Bind the order-click event
$tabs. Tabs (' select ', 2); Switch to a third tab label
return false;
});
4.3 How do I immediately select the tab tag I just added?
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;
}
});
jquery UI Tabs Detailed (Chinese)
