QuickNav

Options

active
collapsible
disabled
event
heightStyle
hide
show

Methods

destroy
disable
enable
load
option
refresh
widget

Events

activate
beforeActivate
beforeLoad
create
load

Tabs Widgetversion added: 1.0

Description: A single content area with multiple panels, each associated with a header in a list.

Options

activeType: Boolean or Integer

Default: 0
Which panel is currently open.
Multiple types supported:
  • Boolean: Setting active to false will collapse all panels. This requires the collapsible option to be true.
  • Integer: The zero-based index of the panel that is active (open). A negative value selects panels going backward from the last panel.

collapsibleType: Boolean

Default: false
When set to true, the active panel can be closed.

disabledType: Boolean or Array

Default: false
Which tabs are disabled.
Multiple types supported:
  • Boolean: Enable or disable all tabs.
  • Array: An array containing the zero-based indexes of the tabs that should be disabled, e.g., [ 0, 2 ] would disable the first and third tab.

eventType: String

Default: "click"
The type of event that the tabs should react to in order to activate the tab. To activate on hover, use "mouseover".

heightStyleType: String

Default: "auto"
Controls the height of the tabs widget and each panel. Possible values:
  • "auto": All panels will be set to the height of the tallest panel.
  • "fill": Expand to the available height based on the tabs' parent height.
  • "content": Each panel will be only as tall as its content.

hideType: Boolean or Number or String or Object

Default: null
If and how to animate the hiding of the panel.
Multiple types supported:
  • Boolean: When set to false, no animation will be used and the panel will be hidden immediately. When set to true, the panel will fade out with the default duration and the default easing.
  • Number: The panel will fade out with the specified duration and the default easing.
  • String: The panel will be hidden using the specified effect. The value can either be the name of a built-in jQuery animateion method, such as "slideUp", or the name of a jQuery UI effect, such as "fold". In either case the effect will be used with the default duration and the default easing.
  • Object: If the value is an object, then effect, duration, and easing properties may be provided. If the effect property contains the name of a jQuery method, then that method will be used; otherwise it is assumed to be the name of a jQuery UI effect. When using a jQuery UI effect that supports additional settings, you may include those settings in the object and they will be passed to the effect. If duration or easing is omitted, then the default values will be used. If effect is omitted, then "fadeOut" will be used.

showType: Boolean or Number or String or Object

Default: null
If and how to animate the showing of the panel.
Multiple types supported:
  • Boolean: When set to false, no animation will be used and the panel will be shown immediately. When set to true, the panel will fade in with the default duration and the default easing.
  • Number: The panel will fade in with the specified duration and the default easing.
  • String: The panel will be shown using the specified effect. The value can either be the name of a built-in jQuery animateion method, such as "slideDown", or the name of a jQuery UI effect, such as "fold". In either case the effect will be used with the default duration and the default easing.
  • Object: If the value is an object, then effect, duration, and easing properties may be provided. If the effect property contains the name of a jQuery method, then that method will be used; otherwise it is assumed to be the name of a jQuery UI effect. When using a jQuery UI effect that supports additional settings, you may include those settings in the object and they will be passed to the effect. If duration or easing is omitted, then the default values will be used. If effect is omitted, then "fadeIn" will be used.

Methods

destroy()

Removes the tabs functionality completely. This will return the element back to its pre-init state.

disable()

Disables all tabs.

disable( index )

Disables a tab. The selected tab cannot be disabled. To disable more than one tab at once, set the disabled option: $( "#tabs" ).tabs( "option", "disabled", [ 1, 2, 3 ] ).

enable()

Enables all tabs.

enable( index )

Enables a tab. To enable more than one tab at once reset the disabled property like: $( "#example" ).tabs( "option", "disabled", [] );.

load( index )

Loads the panel content of a remote tab.

option( optionName ) Returns: Object

Gets the value currently associated with the specified optionName.
  • optionName
    Type: String
    The name of the option to get.

option() Returns: PlainObject

Gets an object containing key/value pairs representing the current tabs options hash.

option( optionName, value )

Sets the value of the tabs option associated with the specified optionName.
  • optionName
    Type: String
    The name of the option to set.
  • value
    Type: Object
    A value to set for the option.

option( options )

Sets one or more options for the tabs.
  • options
    Type: Object
    A map of option-value pairs to set.

refresh()

Process any tabs that were added or removed directly in the DOM and recompute the height of the tab panels. Results depend on the content and the heightStyle option.

widget() Returns: jQuery

Returns a jQuery object containing the tabs container.

Events

activate( event, ui )

Triggered after a tab has been activated (after animation completes). If the tabs were previously collapsed, ui.oldTab and ui.oldPanel will be empty jQuery objects. If the tabs are collapsing, ui.newTab and ui.newPanel will be empty jQuery objects.
  • event
    Type: Event
  • ui
    Type: Object
    • newTab
      Type: jQuery
      The tab that was just activated.
    • oldTab
      Type: jQuery
      The tab that was just deactivated.
    • newPanel
      Type: jQuery
      The panel that was just activated.
    • oldPanel
      Type: jQuery
      The panel that was just deactivated.

beforeActivate( event, ui )

Triggered directly after a tab is activated. Can be canceled to prevent the tab from activating. If the tabs are currently collapsed, ui.oldTab and ui.oldPanel will be empty jQuery objects. If the tabs are collapsing, ui.newTab and ui.newPanel will be empty jQuery objects.
  • event
    Type: Event
  • ui
    Type: Object
    • newTab
      Type: jQuery
      The tab that is about to be activated.
    • oldTab
      Type: jQuery
      The tab that is about to be deactivated.
    • newPanel
      Type: jQuery
      The panel that is about to be activated.
    • oldPanel
      Type: jQuery
      The panel that is about to be deactivated.

beforeLoad( event, ui )

Triggered when a remote tab is about to be loaded, after the beforeActivate event. Can be canceled to prevent the tab panel from loading content; though the panel will still be activated. This event is triggered just before the Ajax request is made, so modifications can be made to ui.jqXHR and ui.ajaxSettings.
  • event
    Type: Event
  • ui
    Type: Object
    • tab
      Type: jQuery
      The tab that is being loaded.
    • panel
      Type: jQuery
      The panel which will be populated by the Ajax response.
    • jqXHR
      Type: jqXHR
      The jqXHR object that is requesting the content.
    • ajaxSettings
      Type: Object
      The settings that will be used by jQuery.ajax to request the content.

create( event, ui )

Triggered when the tabs are created. If the tabs are collapsed, ui.tab and ui.panel will be empty jQuery objects.

load( event, ui )

Triggered after a remote tab has been loaded.
  • event
    Type: Event
  • ui
    Type: Object
    • tab
      Type: jQuery
      The tab that was just loaded.
    • panel
      Type: jQuery
      The panel which was just populated by the Ajax response.

Tabs are generally used to break content into multiple sections that can be swapped to save space, much like an accordion.

The content for each tab panel can be defined in-page or can be loaded via Ajax; both are handled automatically based on the href of the anchor associated with the tab. By default tabs are activated on click, but the events can be changed to hover via the event option.

Keyboard interaction

When focus is on a tab, the following key commands are available:

  • UP/LEFT: Move focus to the previous tab. If on first tab, moves focus to last tab. Activate focused tab after a short delay.
  • DOWN/RIGHT: Move focus to the next tab. If on last tab, moves focus to first tab. Activate focused tab after a short delay.
  • HOME: Move focus to the first tab. Activate focused tab after a short delay.
  • END: Move focus to the last tab. Activate focused tab after a short delay.
  • SPACE: Activate panel associated with focused tab.
  • ENTER: Activate or toggle panel associated with focused tab.
  • ALT+PAGE UP: Move focus to the previous tab and immediately activate.
  • ALT+PAGE DOWN: Move focus to the next tab and immediately activate.

When focus is in a panel, the following key commands are available:

  • CTRL+UP: Move focus to associated tab.
  • ALT+PAGE UP: Move focus to the previous tab and immediately activate.
  • ALT+PAGE DOWN: Move focus to the next tab and immediately activate.

Additional Notes:

  • This widget requires some functional CSS, otherwise it won't work. If you build a custom theme, use the widget's specific CSS file as a starting point.

Example:

A simple jQuery UI Tabs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>tabs demo</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
</head>
<body>
 
<div id="tabs">
    <ul>
        <li><a href="#fragment-1"><span>One</span></a></li>
        <li><a href="#fragment-2"><span>Two</span></a></li>
        <li><a href="#fragment-3"><span>Three</span></a></li>
    </ul>
    <div id="fragment-1">
        <p>First tab is active by default:</p>
        <pre><code>$( "#tabs" ).tabs(); </code></pre>
    </div>
    <div id="fragment-2">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </div>
    <div id="fragment-3">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </div>
</div>
 
<script>
$( "#tabs" ).tabs();
</script>
 
</body>
</html>

Demo: