Let's talk about jquery ui tabs, jquerytabs

Let's talk about jquery ui tabs, jquerytabs

Click here to download jquery ui, or go to the official website to view the help documentation.

1 attribute

1.11 ajaxOptions: add an ajax option when the tab loads content. 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 get and set parameters after initialization: Note: getter is set, pronunciation: gater, setter is set, and pronunciation: seter. It will not be described later.

//gettervar ajaxOptions = $('.selector').tabs('option', 'ajaxOptions');//setter$('.selector').tabs('option', 'ajaxOptions', { async: false });

1.21 The default cache 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:

Copy codeThe Code is as follows:
$ ('. Selector'). tabs ({cache: true });

2.23 obtain and set parameters after initialization:

//gettervar cache = $('.selector').tabs('option', 'cache');//setter$('.selector').tabs('option', 'cache', true);

1.31 collapsible, which means foldable. the default option is false and cannot be folded. 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:

Copy codeThe Code is as follows:
$ ('. Selector'). tabs ({collapsible: true });

1.33 obtain and set parameters after initialization: see 1. 23...

1.41 The default cookie value is null and the cookie plug-in is 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 The default value of deselectable is false, which seems to be the same as collapsible.

1.61 disabled sets which tabs are unavailable. It is an array example [, 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 event: the event of the switch 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 fx: Specifies the animation effect when the tab is switched. 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 idPrefix: When 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 selected: Which tab is selected during initialization. The default value is 0, indicating that 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. When the remote content is loaded, (ajax), the html content of the 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,

2 events

First, an event binding example is provided. Note the following:

$ ('# Example '). bind ('tabsselect ', function (event, ui) {ui. tab // The ui of the tab element selected (after clicking. panel // This element contains the content ui of the Selected tab (after clicking. 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 set when you select

Whether to roll the 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?

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?

Example:

Var $ tabs = $ ('# example '). tabs (); // The first tag is selected $ ('# my-text-link '). click (function () {// bind the 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?

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