JqueryUI: Widgets - Tabs - A quick cheatsheet for beginners, with examples

Table of Contents

Options

active

This option specifies the current active tab/panel. By default its value is 0.

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.

$( ".selector" ).tabs (
   { active: 1 }
);

classes

By default its value is Object

$( ".selector" ).tabs({  
   classes: {    
      "ui-tabs": "highlight"  
   }
});

collapsible

When set to true, the active panel can be closed. By default its value is false.

$( ".selector" ).tabs (
   { collapsible: true }
);

disabled

By default its value is false.

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

$( ".selector" ).tabs (
   { disabled: [ 0, 2 ] }
);

event

The type of event that the tabs should react to in order to activate the tab. To activate on hover, use "mouseover". By default its value is “click”.

$( ".selector" ).tabs (
   { event: "mouseover" }
);

heightStyle

By default its value is “content”.

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.

$( ".selector" ).tabs (
   { heightStyle: "fill" }
);

hide

By default its value is 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.
Number − The panel will fade out with the specified duration and the default easing.
String − The panel will be hidden using the specified effect. Value can be slideUp or fold
Object − For this type, properties effect, delay, duration and easing may be provided.

$( ".selector" ).tabs (
   { { hide: { effect: "explode", duration: 1000 } } }
);

show

By default its value is 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.
Number − The panel will fade out with the specified duration and the default easing.
String − The panel will be shown using the specified effect. Value can be slideUp or fold.
Object − For this type, properties effect, delay, duration and easing may be provided.

$( ".selector" ).tabs (
   { show: { effect: "blind", duration: 800 } }
);

Methods

destroy

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

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

disable

This action disables all tabs. This method does not accept any arguments.

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

disable( index )

This action disables the specified tab. Where index is the tab to be disabled. To disable more than one tab at once, set the disabled option: $( “#tabs” ).tabs( “option”, “disabled”, [ 1, 2, 3 ] ).

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

enable

This action activates all the tabs. This signature does not accept any arguments.

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

enable( index )

This action activates a specified tab. Where index is the tab to be enabled. To enable more than one tab at once reset the disabled property like: $( “#example” ).tabs( “option”, “disabled”, [] );.

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

load( index )

This action forces a reload of the indexed tab, ignoring the cache. Where index is the tab to load.

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

option( optionName )

This action gets the value currently associated with the specified optionName.

var isDisabled = $( ".selector" ).tabs( "option", "disabled" );

option

This action gets an object containing key/value pairs representing the current tabs options hash. This method does not accept any arguments.

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

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 to be set for the option.

$( ".selector" ).tabs( "option", "disabled", true );

option( options )

This action sets one or more options to the tabs.

$( ".selector" ).tabs( "option", { disabled: true } );

refresh

This action recomputes the height of the tab panels when any tabs that were added or removed directly in the DOM. Results depend on the content and the heightStyle option.

$( ".selector" ).tabs( "refresh" );

widget

This action returns the element serving as the tabs widget, annotated with the ui-tabs class name.

var widget = $( ".selector" ).tabs( "widget" );

Extension Points

_getList()

Determine which list should be converted to tabs. By default the first descendant list is used. This method does not accept any arguments.

_getList: function() {  
   var list = this.element.find( ".my-tabs" );  
   return list.length ? list.eq( 0 ) : this._super();
}

Events

activate(event, ui)

This event is triggered after the tab has been activated (after the completion of animation). Where event is of type Event, and ui is of type Object. Possible values of ui are −

newTab − The tab that was just activated.
oldTab − The tab that was just deactivated.
newPanel − The panel that was just activated.
oldPanel − The panel that was just deactivated.

$( ".selector" ).slider({
   activate: function( event, ui ) {}
});

beforeActivate(event, ui)

This event is triggered before a the tab has been activated. Where event is of type Event, and ui is of type Object. Possible values of ui are −

newTab − The tab that is about to be activated.
oldTab − The tab that is about to be deactivated.
newPanel − The panel is about to be activated.
oldPanel − The panel is about to be deactivated.

$( ".selector" ).slider({
   beforeActivate: function( event, ui ) {}
});

beforeLoad(event, ui)

This event is triggered when a remote tab is about to be loaded, after the beforeActivate event. This event is triggered just before the Ajax request is made. Where event is of type Event, and ui is of type Object. Possible values of ui are −

tab − The tab that is being loaded.
panel − The panel which will be populated by the Ajax response.
jqXHR − The jqXHR object that is requesting the content.
ajaxSettings − The settings that will be used by jQuery.ajax to request the content.

$( ".selector" ).slider({
   beforeLoad: function( event, ui ) {}
});

create(event, ui)

This event is triggered when tabs are created. Where event is of type Event, and ui is of type Object. Possible values of ui are −

tab − The active tab.
panel − The active panel.

$( ".selector" ).slider({
   create: function( event, ui ) {}
});

load(event, ui)

This event is triggered after a remote tab has been loaded. Where event is of type Event, and ui is of type Object. Possible values of ui are −

tab − The tab that was just loaded.
panel − The panel which was just populated by the Ajax response.

$( ".selector" ).slider({
   load: function( event, ui ) {}
});

Options

Methods

Extension Points

Events

Leave a Reply Cancel reply