Web Development with jQuery (2015)

Tab Methods

Method

Description

Return Value

tabs(options)

Makes the selected elements into tabs (see “Tab Options”).

jQuery

tabs('destroy')

Removes the tabs' functionality completely from the document.

jQuery

tabs('disable')

Disables all tabs.

jQuery

tabs('disable', index)

Disables a tab by offset index. To disable multiple tabs, use the option method to set the disabled option with an Array of tab indices.

jQuery

tabs('enable')

Enables all tabs.

jQuery

tabs('enable', index)

Enables a tab by offset index. To enable multiple tabs, use the option method to set the disabled option with an Array of tab indices you wish to remain disabled.

jQuery

tabs('load', index)

Loads the content of a tab provided via AJAX programmatically.

jQuery

tabs('option')

Returns an object of key, value pairs for every set option.

Object

tabs('option', optionName, value)

Sets the specified option to the specified value.

jQuery

tabs('refresh')

Refreshes the positions of tabs that were added or removed from the DOM.

jQuery

tabs('widget')

Returns a jQuery object of the tabs container.

jQuery

Tab Options

Option

Description

Type

active

Determines which tab panel should be open.
If a boolean value is provided, setting to false collapses all panels.
If an integer is provided, setting to a zero-based offset representing the tab will open that panel. A negative value selects the active panel counting from the last tab instead of the beginning.
Default value: 0

Boolean, Integer

collapsible

When the value is true, the active panel can be closed (meaning it is possible to have no active panel at all).
Default value: false

Boolean

disabled

If a boolean is provided, it indicates whether all tabs are enabled or disabled.
If an Array is provided, it contains the position of each tab (zero-based) that should be disabled upon initialization.
Default value: false

Boolean, Array

event

The type of event to be used for selecting a tab. For example, to activate a tab when the user's mouse enters the tab, use the value 'mouseover'.
Default value: 'click'

String

heightStyle

Controls how the height of each tab and each panel are applied. The options are:
'auto': All tab panels will be set the height of the tallest panel.
'fill': Expands the tab widget's height to fill the height of the parent element.
'content': Each tab panel will be only as tall as the content it contains.
Default value: 'content'

String

hide

Whether and how to animate the closing of a tab panel.
If a boolean value is provided, false indicates no animation and the panel closes immediately. If true is provided, the panel fades out with the default duration and default easing.
If a number is provided, it indicates how long the fade animation should take place with the default easing.
If a string is provided, it indicates what animation or UI effect to use, for example, 'slideUp' or 'fold'. This animation will be applied with default duration and default easing.
If an object is provided, you may specify the following properties: effect, delay, duration, and easing.
Default value: null

Boolean, Number, String, Object

show

Whether and how to animate the opening of a tab panel.
If a boolean value is provided, false indicates no animation , and the panel closes immediately. If true is provided, the panel fades out with the default duration and default easing.
If a number is provided, it indicates how long the fade animation should take place with the default easing.
If a string is provided, it indicates what animation or UI effect to use, for example, 'slideUp' or 'fold'. This animation will be applied with default duration and default easing.
If an object is provided, you may specify the following properties: effect, delay, duration, and easing.
Default value: null

Boolean, Number, String, Object

Tab Events

Option

Description

Value

activate
bind('tabsactivate')
on('tabsactivate')

A function executed when a tab has been activated.

function(event, ui)

beforeActivate
bind('tabsbeforeactivate')
on('tabsbeforeactivate')

A function executed before a tab has been activated.

function(event, ui)

beforeLoad
bind('tabsbeforeload')
on('tabsbeforeload')

A function executed before a tab is loaded.

function(event, ui)

create
bind('tabscreate')
on('tabscreate')

A function executed when tabs are created.

function(event, ui)

load
bind('tabsload')
on('tabsload')

A function executed when a tab has been loaded.

function(event, ui)

UI Object

Option

Description

Type

ui.ajaxSettings

The settings used by jQuery.ajax to request content.

Object

ui.jqXHR

The jQuery AJAX request object that is requesting content.

jQuery AJAX

ui.newPanel

The panel that was just activated or about to be activated.

jQuery

ui.newTab

The tab that was just activated or about to be activated.

jQuery

ui.oldPanel

The panel that was just deactivated or about to be deactivated.

jQuery

ui.oldTab

The tab that was just deactivated or about to be deactivated.

jQuery

ui.panel

The panel being loaded or the active panel.

jQuery

ui.tab

The tab being loaded or the active tab.

jQuery

Tab Styling

Class

Description

ui-tabs-nav

This is the whole menu. Use this as a base class.

ui-tabs-selected

This is the current tab. It's very important to create a strong visual indication of which tab is the current one.

ui-tabs-unselect

This is the class for all the tabs that are not selected but selectable.

ui-tabs-deselectable

This is the class for all tabs that can be deselected.

ui-tabs-disabled

For when a tab is disabled. Highly recommended to appear somewhat transparent or disabled. This is often done by graying the color.

ui-tabs-panel

These are the boxes that will have their visibility toggled.

ui-tabs-hide

This class hides the boxes (perhaps the most important class).

Element

Description

<span>

<span> elements are there to facilitate tricks like rounded corners and resizable backgrounds.