Tabs Widget

Categories: Widgets

Tabs Widgetversion added: 1.0

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

QuickNavExamples

Options

Methods

Events

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.

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.

Options

ajaxOptions 

Type: Object
Default: null
Additional Ajax options to consider when loading tab content (see jQuery.ajax()).

cache 

Type: Boolean
Default: false
Whether or not to cache remote tabs content, e.g., load only once or with every click. Cached content is being lazy loaded, e.g., once and only once for the first click. Note that to prevent the actual Ajax requests from being cached by the browser you need to provide an extra cache: false flag in the ajaxOptions option.

collapsible 

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

disabled 

Type: 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.

event 

Type: 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".

fx 

Type: Object or Array
Default: null
Enable animations for hidniga nd showing tab panels.
Multiple types supported:
  • Object: Key/value pairs of properties to animate and optional duration, e.g., { height: "toggle", duration: 200 }.
  • Array: Animation settings in the form [ hideSettings, showSettings ].

idPrefix 

Type: String
Default: "ui-tabs-"
If the remote tab, its anchor element that is, has no title attribute to generate an id from, an id/fragment identifier is created from this prefix and a unique id, for example "ui-tabs-54".

panelTemplate 

Type: String
Default: "<div></div>"
HTML template from which a new tab panel is created in case of adding a tab with the add() method or when creating a panel for a remote tab on the fly.

selected 

Type: Integer
Default: 0
The zero-based index of the panel that is selected (open). Setting selected to -1 will collapse all panels. This requires the collapsible option to be true.

spinner 

Type: String
Default: "<em>Loading&#8230;</em>"
The HTML content to show in a tab title while remote content is loading. Set this option to an empty string to deactivate the spinner behavior. A span element must be present in the anchor tag of the title for the spinner content to be visible.

tabTemplate 

Type: String
Default: "<li><a href="#{href}"><span>#{label}</span></a></li>"
HTML template from which a new tab is created and added. The placeholders #{href} and #{label} are replaced with the URL and tab label that are passed as arguments to the add() method.

Methods

abort()Returns: jQuery (plugin only)

Terminate all running tab ajax requests and animations.
  • This method does not accept any arguments.
Code examples:

Invoke the abort method:

1
 
$( ".selector" ).tabs( "abort" );

add( url, label [, index ] )Returns: jQuery (plugin only)

Add a tab.
  • url
    Type: String
    The URL of the tab to add.
  • label
    Type: String
    The name of the tab to add.
  • index
    Type: Number
    Where to add the new tab (zero-based). If omitted, the new tab will be added as the last tab.
Code examples:

Invoke the add method:

1
 
$( ".selector" ).tabs( "add" );

destroy()Returns: jQuery (plugin only)

Removes the tabs functionality completely. This will return the element back to its pre-init state.
  • This method does not accept any arguments.
Code examples:

Invoke the destroy method:

1
 
$( ".selector" ).tabs( "destroy" );

disable()Returns: jQuery (plugin only)

Disables all tabs.
  • This signature does not accept any arguments.
Code examples:

Invoke the method:

1
 
$( ".selector" ).tabs( "disable" );

disable( index )Returns: jQuery (plugin only)

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 ] ).
Code examples:

Invoke the method:

1
 
$( ".selector" ).tabs( "disable" );

enable()Returns: jQuery (plugin only)

Enables all tabs.
  • This signature does not accept any arguments.
Code examples:

Invoke the method:

1
 
$( ".selector" ).tabs( "enable" );

enable( index )Returns: jQuery (plugin only)

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

Invoke the method:

1
 
$( ".selector" ).tabs( "enable" );

length()Returns: Integer

Retrieve the number of tabs of the first matched tab pane.
  • This method does not accept any arguments.
Code examples:

Invoke the length method:

1
 
$( ".selector" ).tabs( "length" );

load( index )Returns: jQuery (plugin only)

Loads the panel content of a remote tab.
Code examples:

Invoke the load method:

1
 
$( ".selector" ).tabs( "load" );

option( optionName )Returns: Object

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

Invoke the method:

1
 
$( ".selector" ).tabs( "option" );

option()Returns: PlainObject

Gets an object containing key/value pairs representing the current tabs options hash.
  • This signature does not accept any arguments.
Code examples:

Invoke the method:

1
 
$( ".selector" ).tabs( "option" );

option( optionName, value )Returns: jQuery (plugin only)

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.
Code examples:

Invoke the method:

1
 
$( ".selector" ).tabs( "option" );

option( options )Returns: jQuery (plugin only)

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

Invoke the method:

1
 
$( ".selector" ).tabs( "option" );

remove( index )Returns: jQuery (plugin only)

Remove a tab.
Code examples:

Invoke the remove method:

1
 
$( ".selector" ).tabs( "remove" );

rotate( duration [, continuing ] )Returns: jQuery (plugin only)

Set up an automation rotation through the tabs.
  • duration
    Type: Number
    The duration in milliseconds for each tab to be visible before rotating to the next tab.
  • continuing (default: false)
    Type: Boolean
    Whether or not to continue the rotation after a tab has been selected by a user.
Code examples:

Invoke the rotate method:

1
 
$( ".selector" ).tabs( "rotate" );

select( index )Returns: jQuery (plugin only)

Select a tab, as if it were clicked.
Code examples:

Invoke the select method:

1
 
$( ".selector" ).tabs( "select" );

url( index, url )Returns: jQuery (plugin only)

Change the URL from whcih an Ajax (remote) tab will be loaded. The specified URL will be used for subsequent loads. Note that you can not only change the URL for an existing remote tab with this method, but also turn an in-page tab into a remote tab.
  • index
    Type: Integer
    The zero-based index of the tab to update.
  • url
    Type: String
    The URL to set for the tab.
Code examples:

Invoke the url method:

1
 
$( ".selector" ).tabs( "url" );

widget()Returns: jQuery

Returns a jQuery object containing the tabs container.
  • This method does not accept any arguments.
Code examples:

Invoke the widget method:

1
 
$( ".selector" ).tabs( "widget" );

Events

add( event, ui )Type: tabsadd

Triggered when a tab is added.
  • event
    Type: Event
  • ui
    Type: Object
    • tab
      Type: Element
      The tab that is being added.
    • panel
      Type: Element
      The panel that is being added.
    • index
      Type: Integer
      The zero-based index of the tab.
Code examples:

Initialize the tabs with the add callback specified:

1
2
3
 
$( ".selector" ).tabs({
  add: function( event, ui ) {}
});

Bind an event listener to the tabsadd event:

1
 
$( ".selector" ).on( "tabsadd", function( event, ui ) {} );

create( event, ui )Type: tabscreate

Triggered when the tabs are created.

Note: The ui object is empty but included for consistency with other events.

Code examples:

Initialize the tabs with the create callback specified:

1
2
3
 
$( ".selector" ).tabs({
  create: function( event, ui ) {}
});

Bind an event listener to the tabscreate event:

1
 
$( ".selector" ).on( "tabscreate", function( event, ui ) {} );

disable( event, ui )Type: tabsdisable

Triggered when a tab is disabled.
  • event
    Type: Event
  • ui
    Type: Object
    • tab
      Type: Element
      The tab that is being disabled.
    • panel
      Type: Element
      The panel that is being disabled.
    • index
      Type: Integer
      The zero-based index of the tab.
Code examples:

Initialize the tabs with the disable callback specified:

1
2
3
 
$( ".selector" ).tabs({
  disable: function( event, ui ) {}
});

Bind an event listener to the tabsdisable event:

1
 
$( ".selector" ).on( "tabsdisable", function( event, ui ) {} );

enable( event, ui )Type: tabsenable

Triggered when a tab is enabled.
  • event
    Type: Event
  • ui
    Type: Object
    • tab
      Type: Element
      The tab that is being enabled.
    • panel
      Type: Element
      The panel that is being enabled.
    • index
      Type: Integer
      The zero-based index of the tab.
Code examples:

Initialize the tabs with the enable callback specified:

1
2
3
 
$( ".selector" ).tabs({
  enable: function( event, ui ) {}
});

Bind an event listener to the tabsenable event:

1
 
$( ".selector" ).on( "tabsenable", function( event, ui ) {} );

load( event, ui )Type: tabsload

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.
Code examples:

Initialize the tabs with the load callback specified:

1
2
3
 
$( ".selector" ).tabs({
  load: function( event, ui ) {}
});

Bind an event listener to the tabsload event:

1
 
$( ".selector" ).on( "tabsload", function( event, ui ) {} );

remove( event, ui )Type: tabsremove

Triggered when a tab is removed.
  • event
    Type: Event
  • ui
    Type: Object
    • tab
      Type: Element
      The tab that is being removed.
    • panel
      Type: Element
      The panel that is being removed.
    • index
      Type: Integer
      The zero-based index of the tab.
Code examples:

Initialize the tabs with the remove callback specified:

1
2
3
 
$( ".selector" ).tabs({
  remove: function( event, ui ) {}
});

Bind an event listener to the tabsremove event:

1
 
$( ".selector" ).on( "tabsremove", function( event, ui ) {} );

select( event, ui )Type: tabsselect

Triggered directly after a tab is selected. Can be canceled to prevent the tab from being selected.
  • event
    Type: Event
  • ui
    Type: Object
    • tab
      Type: Element
      The tab that is about to be selected.
    • panel
      Type: Element
      The panel that is about to be selected.
    • index
      Type: Integer
      The zero-based index of the tab.
Code examples:

Initialize the tabs with the select callback specified:

1
2
3
 
$( ".selector" ).tabs({
  select: function( event, ui ) {}
});

Bind an event listener to the tabsselect event:

1
 
$( ".selector" ).on( "tabsselect", function( event, ui ) {} );

show( event, ui )Type: tabsshow

Triggered after a tab has been selected (after animation completes).
  • event
    Type: Event
  • ui
    Type: Object
    • tab
      Type: Element
      The tab that was just selected.
    • panel
      Type: Element
      The panel that was just selected.
    • index
      Type: Integer
      The zero-based index of the tab.
Code examples:

Initialize the tabs with the show callback specified:

1
2
3
 
$( ".selector" ).tabs({
  show: function( event, ui ) {}
});

Bind an event listener to the tabsshow event:

1
 
$( ".selector" ).on( "tabsshow", function( event, ui ) {} );

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="//code.jquery.com/ui/1.8.24/themes/base/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.8.2.js"></script>
  <script src="//code.jquery.com/ui/1.8.24/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: