Talk about the understanding of jquery UI Tabs _jquery

jquery UI Click here to download, you can also go to the official website to view document help.

1 Properties

1.11 Ajaxoptions, to add an AJAX option when an item card loads content. Ajax options are added only when Ajax is in effect. The default value is null. In the example above, add the Beforesend and success two options. Ajax also have some options please refer to jquery ajax, here do not do the detailed ...

1.12 Initialization Settings Example: Note that $ ('. Selector ') is the tabs class name, in this case. selector= #tabs, no longer explained.

$ ('. Selector '). Tabs ({ajaxoptions: {async:false}});//This is to synchronize asynchronously.

1.13 Initialization parameters Get and set: Please note: getter for GET, pronunciation: Gatwick, setter for setting, pronunciation: Seth, no longer explained.

Getter
var ajaxoptions = $ ('. Selector '). Tabs (' option ', ' ajaxoptions ');
Setter
$ ('. Selector '). Tabs (' option ', ' ajaxoptions ', {async:false});

1.21 cache defaults to False, no caching. This option is used for Ajax calls, simply without caching, is every send request refresh, there is a cache is the first request to refresh, then do not refresh, close the page is another thing.

Ajaxoptions:{cache:false} should be the same as this function.

1.22 Initialization Settings Example:

Copy Code code as follows:

$ ('. Selector '). Tabs ({cache:true});

2.23 initialization parameters get and set:

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 folded. If set to True, allows the user to fold the contents of the tab that is already selected. Put it this way: Click Tab 2, tab 2 content is displayed, and then click Tab 2 again, the content area of the tab is closed, click Tab 2 again, and the content area of the tab expands again. Do you understand? Know you do not understand, do not understand the top of the example to try it.

1.32 Initialization Settings Example:

Copy Code code as follows:

$ ('. Selector '). Tabs ({collapsible:true});

1.33 initialization parameters Get and set: Please refer to 1.23 ...

The 1.41 cookie defaults to null and requires a cookie plugin. Save the last selected tab to the cookie. Options to use: (example): {expires:7, path: '/', Domain: ' jquery.com ', secure:true}.

1.42 Initialization Setting Example: $ ('. Selector '). Tabs ({cookie: {expires:30}});

1.43 initialization parameters Get and set: Please refer to 1.23 ...

The 1.51deselectable defaults to false, and the effect seems to be the same as collapsible.

1.61 disabled set which tabs are unavailable, is an array example [0,1,2], which is the first, second, and Third tab. The default is [].

1.62 Initialization Settings Example: $ ('. Selector '). Tabs ({disabled: [1, 2]});

1.63 initialization parameters Get and set: Please refer to 1.23 ...

1.71 Event, Toggle tab events, default to ' click ', click Toggle tab.

1.72 Initialization Setting Example: $ ('. Selector '). Tabs ({event: ' mouseover '}); Mouse over Toggle tab

1.73 initialization parameters Get and set: Please refer to 1.23 ...

1.81 FX, toggle the animation effect of the tab, the default is: null, no animation effect,

1.82 initialization settings: Refer to the top example.

1.83 initialization parameters Get and set: Please refer to 1.23 ...

1.91 Idprefix, when using Ajax, the Idprefix option can add a unique ID to it, by default: ' ui-tabs-'.

1.92 Initialization Settings Example: $ ('. Selector '). Tabs ({idprefix: ' ui-tabs-primary '});

1.93 initialization parameters Get and set: Please refer to 1.23 ...

1.101 selected, when initialized, which tab is selected, the default is 0, and the first tab is selected.

1.102 Initialization Settings Example: $ ('. Selector '). Tabs ({selected:3});

1.103 initialization parameters Get and set: Please refer to 1.23 ...

1.111 Spinner, when the remote content is loaded, (AJAX), the HTML content of the spinner string is displayed on the tab title. (I'm surprised, I tried it myself, why didn't it work?) ）

1.112 Initialization Settings Example: $ ('. Selector '). Tabs ({spinner: ' Retrieving Data ... '});

1.113 initialization parameters Get and set: Please refer to 1.23 ...

1.121 Paneltemplate,

1.131 Tabtemplate,

2 Events

First give an example of an event binding, please note:

$ (' #example '). Bind (' Tabsselect ', function (event, UI) {
  Ui.tab   //Selected (clicked) tab element
  Ui.panel/  / This element contains the contents of the selected (clicked) tab
  Ui.index  //Returns the index value (starting from 0) of the selected (or clicked) tab
);

2.11 Select Type: Tabsselect, the event is triggered when the tab is clicked.

2.12 Binding Events when initializing:

$ ('. Selector '). Tabs ({
  select:function (event, UI) {...}}
);

2.13 Bind the event using event binding after initialization:

$ ('. Selector '). Bind (' Tabsselect ', function (event, UI) {
...
});

2.21 load, type: Tabsload The event is triggered when the contents of a remote (AJAX) tab are loaded.

2.22 Reference 2.12

2.23 Reference 2.13

2.31 Show, type: Tabsshow The 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 one tab is deleted.

2.61 Enable, type tabsenable, when a tab is available to trigger.

2.71 Disable, type tabsdisable, triggered when a tab is not available.

3 method

3.11 Destroy, Haha, it's 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 and Remove tabs. Example:. Tabs (' Add ', URL, label, [index]),. Tabs (' Remove ', index)

3.61 Enable, Set a tab tab to be available. Example:. Tabs (' Enable ', index)

3.71 Disable, set a tab label is not available. Example:. Tabs (' Disable ', index)

3.81 Select, Choose a tab tab. Example:. Tabs (' select ', index), index starting from 0.

3.91 load, overloading the contents of an AJAX tab, which loads the remote content, even if the cache is set to True, the second parameter is the index value of the tab to overload.

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 milliseconds, is the time required for two labels to roll automatically, set to 0 or null to stop tumbling. The third parameter is set when the user selects a

Whether to continue tumbling after the tab label defaults to: false, do not continue.

I'm tired, let's have a rest.

4 Tips

4.1 How do I receive the index value of a tab label that has been selected?

Cases:

var $tabs = $ (' #example '). tabs ();
var selected = $tabs. Tabs (' option ', ' selected '); => 0

4.2 How do I switch tabs by using a different element instead of a tab click event?

Cases:

var $tabs = $ (' #example '). tabs (); The first label is selected
$ (' #my-text-link '). Click (function () {//bind order hit event
  $tabs. Tabs (' select ', 2);//Switch to Third tab
  tab return false;
});

4.3 How do I immediately select the tab tag that I just added?

Cases:

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;
  }
});