Search within TutorialsPark

jQuery UI : Tab Ajax Methods

Learn how to use jQuery UI Tab Methods with Ajax Controls

jQuery UI : Tab Ajax Methods

jQuery UI Tabs provides a rich set of methods to control and manipulate Tabs.

It even supports implementation of advanced functionality using programs.The table below shows all the methods

Table : Configuring the Tabs Widget

Methods Description
tabs("destroy") To remove the tab widget from the HTML document.
tabs("disable") To Disable the entire tab Widget or individual Tabs
tabs("enable") To enable the entire tab widget or Individual Tabs
tabs("option") To change one or multiple tab settings
tabs("add") To add a New Tab
tabs("remove") To Remove a Tab
tabs("select") To Activate a Tab
tabs("load") To load the contents of a tab
tabs("url") To alter the URL of the remote tab
tabs("length") To return the number of tabs in the widget
tabs("abort") To abort all active Ajax requests
tabs("rotate") To make the tab widget to cycle through the tabs

jQuery UI Tabs: Adding and Removing Tabs

jQuery UI Tab Widget can be used to add or remove Tabs programmatically using methods of add and remove

The add method adds new tabs to the widget, we use it in conjunction with appendTo() method

Example: jQuery UI Tabs - Adding and Removing Tabs

Give it a TRY! » Note: Specify the index(zero based) of the tab to be removed.

jQuery UI Tabs: Enabling and Disabling Tabs

The jQuery Tab UI allows you to enable and disable tabs using methods of enable and disable method.

In the demo below, first we disable a tab and then enable it using tab() widget method and pass the string enable , and same for disable

Example: jQuery UI Tabs - Enable and Disable Methods

Give it a TRY! » Note: The second argument is the index no of the tab you want to disable, if not specified all tabs get disabled.

jQuery UI Tabs : Destroying Tabs

The jQuery UI Tabs method also allows you to completely destroy tab widgets using method destroy

Example: jQuery AutoComplete UI - Changing the Trigger Event

Give it a TRY! » Note:The Destroy method completely removes the Tab widget and returns the HTML to its original state.

jQuery UI Tabs : Getting Options

The jQuery UI Tabs option method is used to work with both configurable options and functions in both getter and setter modes.

In the demo below, we set the active option by setting the string active as the second argument.

Example: jQuery UI Tabs - Getting and Setting Options

Give it a TRY! » Note:The value of any other option can be extracted in the same way.

jQuery UI Tabs : Setting Options

The jQuery UI Tabs option method can also be used to set values, this is done by supplying the third argument containing the new value of the options.

In the demo below, when the button is clicked the code gets the value of input and then use it to change the value of selected index.

Example: jQuery UI Tabs - Setting Options

Give it a TRY! » Note: By specifying the new value you put the method from getter mode to setter mode

jQuery UI Tabs : Using Collapsible Tabs

The jQuery UI Tabs can be converted into a hybrid between accordion and tabs using setting of collapsible

When the value of collapsible is set as true, clicking on the active tab makes it collapse like an accordion.

Example: jQuery UI Tabs - Using Collapsible Tabs

Give it a TRY! » Note: Clicking a deactivated tab will select the tab and show the associated content panel.

jQuery UI Tabs : Changing the Event Trigger

The jQuery UI Tabs Widgets by default are triggered using a click.But you can alter this using event setting.

The value of the event setting can be any other custom event, like mouseover, keyup etc.

Example: jQuery UI Tabs - Changing the Event Trigger

Give it a TRY! » Note: In the demo, you can switch between tabs using the mouseover event.