jQuery UI : Tab Widget
Learn how to use jQuery UI Tab Widget
jQuery UI : Tab Widget
jQuery UI Tabs is used to create Tab Widgets, which serve the same purpose as Accordions of displaying the Content in seperate parts.
The tab widget is used to toggle visibility across a set of different elements, here each element contains content which can be viewed by clicking on the tab Header.
Tabs are positioned such that they appear lined up next to each other horizontally, except for the active panel all other content sections are set to display:none
At any given time at the most only one tab can be opened, tabs can also be configured so that all panels are closed.
jQuery UI Tabs: Creating a Tab Widget
jQuery UI Tabs can be created using tabs method, you also need to put the HTML structure inorder and then apply the tab method.
The element within the tabs must comprise of two elements.The content elements which are those elements which should appear within the tabs, and structure elements to create the structure.
In the Demo below, we have div elements to hold the contents, each div element has an id attribute to locate the right element.
Example: jQuery Accordion UI - Creating a Tab WidgetGive it a TRY! » Note: Clicking on the tab header allows you to open the corresponding content.
jQuery UI Tabs: Configuring Tab Widgets
In term of utility Tabs have similar features like Accordions, tabs are the vertical version of Accordion.
But the number of configuration options and settings available for Tabs far exceeds Accordions, the table Below shows the meaning and application of Tab Settings.
An object literal , or an object reference can be passed a value for the tabs() widget to configure these options.
Table : Configuring the Tabs Widget
|active||To specify which panel should be opened. Default Value is 0|
|collapsible||To allow an active tab to be unselected when clicked, so that all content panels get hidden with only the tab headings being visible.Default Value is false|
|disabled||To disable a tab widget on page load, you can even pass tab index(zero based) inorder to disable static tabs. Default Value is false|
|event||To specify the event to trigger the Tabs to display the content panels.Default Value is Click|
|heightStyle||To control the height of the tab widget and all its panels. Default value is content. Other values are auto and fill|
|hide||To specify the animation while hiding the panel.The default value of null|
|show||To specify the animation while showing the panel.The default value is null|
jQuery UI Tabs: Selecting a Tab
The jQuery UI Tab widget provides a number of options to perform various tasks, like selecting or disabling tabs or adding transition effects etc.
To select a Tab to be opened specify the index number(zero based) as a value for the property active
Example: jQuery UI Tabs - Selecting a TabGive it a TRY! » Note: To open no tabs, select the value of collapsible:true and active:false
jQuery UI Tabs : Disabling Tabs
The jQuery UI Tabs widget allows you to disable certain tabs until a condition is met, using the property disabled.
In the demo below, we have set the value of the disabled property to the index no(zero based) of the tab to be disabled
Example: jQuery AutoComplete UI - Changing the Trigger EventGive it a TRY! » Note:The disabled tabs will not respond to mouse interactions of any type.
jQuery UI Tabs : Adding Transition Effects.
The jQuery UI Tabs can be added with Transition effects using the property show , these animation are displayed when the tabs are either opened or closed.
The options are configured using object literals,the object show has two properties: effect and duration.
Example: jQuery UI Tabs - Adding Transition EffectsGive it a TRY! » Note:The value of effect property can be toggle , fadeIn or
jQuery UI Tabs : Setting the Animation
The jQuery UI Tabs widget can be assigned with Animation Settings, and duration using variable animate.
Example: jQuery UI Tabs - Setting the AnimationGive it a TRY! » Note: The easing effect of easeOutBounce lasts for 3000ms i.e 3 sec
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 TabsGive 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.