jQuery UI Tabs
Tabs are the set of logically grouped content that facilitates users to flip between them. Tabs save the space like accordions.
Every tab must use the following set of markups to work properly.
- Tabs must be in an ordered <ol> or unordered <ul> list.
- Each tab title must be within each <li> and wrapped by anchor (<a>) tag with a href attribute.
- Each tab panel may be any valid element but it must have an id which corresponds to the hash in the anchor of the associated tab.
jQuery UI tabs() method is used to change the appearance of HTML elements inside the page. This method traverses the HTML code and adds new CSS classes to the element to give them appropriate style.
You can use tabs () method in two forms:
The tabs (options) method specifies that an HTML element and its content should be managed as tabs. Here "options" parameter is an object that specifies the appearance and behavior of tabs.
Following is a list of options that can be used with this method:
|This option indicates the current active tab/panel. By default its value is 0.
|If you set this option to TRUE, it allows tabs to be deselected. When it is set to false (the default), clicking on a selected tab does not deselect (it remains selected). By default its value is false.
|This option uses an array to indicate index tabs that are disabled (and therefore cannot be selected). for example, use [0, 1] to disable the first two tabs. By default its value is false.
|This option is a name of the event that lets users select a new tab. If, for example, this option is set to "mouseover", passing the mouse over a tab will select it. By default its value is "click".
|This option controls the height of the tabs widget. By default its value is "content".
|This option specifies how to animate hiding of panel. By default its value is null.
|This option specifies how to animate showing of panel. By default its value is NULL.
jQuery UI tabs() example 1
Let's take a simple example to demonstrate the functionality of tab, passing no parameter to the tabs() method.
Test it Now
jQuery UI tabs() example 2
Use of heightStyle, collapsible and hide:
Let's take an example to demonstrate the usage of options heightStyle, collapsible and hide in the tabs function of jQueryUI.
Test it Now
jQuery UI tabs() example 3
Use of event:
Let's take an example to demonstrate the use of option event in the tab function of jQueryUI.
Test it Now
Following is a list of different actions that can be used with this method.
|This action destroys the tabs functionality of an element completely and makes elements return to their pre-init state. This method does not accept any arguments.
|This action disables all tabs. This method does not accept any arguments.
|disable( index )
|This action is used to disable the specified tab. Here index is the tab to be disabled.
|This action activates all the tabs. This signature does not accept any arguments.
|enable( index )
|This action activates a specified tab. Here index is the tab to be enabled.
|load( index )
|This action forces a reload of the indexed tab, ignoring the cache. Here index is the tab to load.
|option( optionName )
|This action gets the value currently associated with the specified optionName.
|This action gets an object containing key/value pairs representing the current tabs options hash.
|option( optionName, value )
|This action sets the value of the tabs option associated with the specified optionName. The argument optionName is name of the option to be set and value is the value of the option to be set.
|option( Options )
|This action sets one or more options to the tabs.
|This action re-computes the height of the tab panels when any tabs that were added or removed directly in the DOM. Its result depends on the content and the heightStyle option.
|This action returns the element serving as the tabs widget, annotated with the UI-tabs class name.
jQuery UI tabs() example 4
Use of action diable():
Let's take an example to see the use of action disable() method.
Test it Now