Tabs Widgetversion added: 1.0
Description: A single content area with multiple panels, each associated with a header in a list.
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.
Options
activeType: Boolean or Integer
0
-
Boolean: Setting
active
tofalse
will collapse all panels. This requires thecollapsible
option to betrue
. - Integer: The zero-based index of the panel that is active (open). A negative value selects panels going backward from the last panel.
Initialize the tabs with the active option specified:
$( ".selector" ).tabs({ active: 1 }); |
Get or set the active option, after initialization:
// getter var active = $( ".selector" ).tabs( "option" , "active" ); // setter $( ".selector" ).tabs( "option" , "active" , 1 ); |
collapsibleType: Boolean
false
true
, the active panel can be closed.Initialize the tabs with the collapsible option specified:
$( ".selector" ).tabs({ collapsible: true }); |
Get or set the collapsible option, after initialization:
// getter var collapsible = $( ".selector" ).tabs( "option" , "collapsible" ); // setter $( ".selector" ).tabs( "option" , "collapsible" , true ); |
disabledType: Boolean or Array
false
- 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.
Initialize the tabs with the disabled option specified:
$( ".selector" ).tabs({ disabled: [ 0, 2 ] }); |
Get or set the disabled option, after initialization:
// getter var disabled = $( ".selector" ).tabs( "option" , "disabled" ); // setter $( ".selector" ).tabs( "option" , "disabled" , [ 0, 2 ] ); |
eventType: String
"click"
"mouseover"
.Initialize the tabs with the event option specified:
$( ".selector" ).tabs({ event: "mouseover" }); |
Get or set the event option, after initialization:
// getter var event = $( ".selector" ).tabs( "option" , "event" ); // setter $( ".selector" ).tabs( "option" , "event" , "mouseover" ); |
heightStyleType: String
"content"
-
"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.
Initialize the tabs with the heightStyle option specified:
$( ".selector" ).tabs({ heightStyle: "fill" }); |
Get or set the heightStyle option, after initialization:
// getter var heightStyle = $( ".selector" ).tabs( "option" , "heightStyle" ); // setter $( ".selector" ).tabs( "option" , "heightStyle" , "fill" ); |
hideType: Boolean or Number or String or Object
null
-
Boolean:
When set to
false
, no animation will be used and the panel will be hidden immediately. When set totrue
, 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
, andeasing
properties may be provided. If theeffect
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. Ifduration
oreasing
is omitted, then the default values will be used. Ifeffect
is omitted, then"fadeOut"
will be used.
Initialize the tabs with the hide option specified:
$( ".selector" ).tabs({ hide: { effect: "explode" , duration: 1000 } }); |
Get or set the hide option, after initialization:
// getter var hide = $( ".selector" ).tabs( "option" , "hide" ); // setter $( ".selector" ).tabs( "option" , "hide" , { effect: "explode" , duration: 1000 } ); |
showType: Boolean or Number or String or Object
null
-
Boolean:
When set to
false
, no animation will be used and the panel will be shown immediately. When set totrue
, 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
, andeasing
properties may be provided. If theeffect
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. Ifduration
oreasing
is omitted, then the default values will be used. Ifeffect
is omitted, then"fadeIn"
will be used.
Initialize the tabs with the show option specified:
$( ".selector" ).tabs({ show: { effect: "blind" , duration: 800 } }); |
Get or set the show option, after initialization:
// getter var show = $( ".selector" ).tabs( "option" , "show" ); // setter $( ".selector" ).tabs( "option" , "show" , { effect: "blind" , duration: 800 } ); |
Methods
destroy()
- This method does not accept any arguments.
Invoke the destroy method:
$( ".selector" ).tabs( "destroy" ); |
disable()
- This method does not accept any arguments.
Invoke the method:
$( ".selector" ).tabs( "disable" ); |
disable( index )
disabled
option: $( "#tabs" ).tabs( "option", "disabled", [ 1, 2, 3 ] )
.
-
indexWhich tab to disable.
Invoke the method:
$( ".selector" ).tabs( "disable" , 1 ); |
enable()
- This method does not accept any arguments.
Invoke the method:
$( ".selector" ).tabs( "enable" ); |
option( optionName )Returns: Object
optionName
.-
optionNameType: StringThe name of the option to get.
Invoke the method:
var isDisabled = $( ".selector" ).tabs( "option" , "disabled" ); |
option()Returns: PlainObject
- This method does not accept any arguments.
Invoke the method:
var options = $( ".selector" ).tabs( "option" ); |
option( optionName, value )
optionName
.-
optionNameType: StringThe name of the option to set.
-
valueType: ObjectA value to set for the option.
Invoke the method:
$( ".selector" ).tabs( "option" , "disabled" , true ); |
option( options )
-
optionsType: ObjectA map of option-value pairs to set.
Invoke the method:
$( ".selector" ).tabs( "option" , { disabled: true } ); |
refresh()
heightStyle
option.- This method does not accept any arguments.
Invoke the refresh method:
$( ".selector" ).tabs( "refresh" ); |
widget()Returns: jQuery
jQuery
object containing the tabs container.
- This method does not accept any arguments.
Invoke the widget method:
var widget = $( ".selector" ).tabs( "widget" ); |
Events
activate( event, ui )Type: tabsactivate
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.Initialize the tabs with the activate callback specified:
$( ".selector" ).tabs({ activate: function ( event, ui ) {} }); |
Bind an event listener to the tabsactivate event:
$( ".selector" ).on( "tabsactivate" , function ( event, ui ) {} ); |
beforeActivate( event, ui )Type: tabsbeforeactivate
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.Initialize the tabs with the beforeActivate callback specified:
$( ".selector" ).tabs({ beforeActivate: function ( event, ui ) {} }); |
Bind an event listener to the tabsbeforeactivate event:
$( ".selector" ).on( "tabsbeforeactivate" , function ( event, ui ) {} ); |
beforeLoad( event, ui )Type: tabsbeforeload
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
.-
eventType: Event
-
uiType: Object
-
tabType: jQueryThe tab that is being loaded.
-
panelType: jQueryThe panel which will be populated by the Ajax response.
-
jqXHRType: jqXHRThe
jqXHR
object that is requesting the content. -
ajaxSettingsType: ObjectThe settings that will be used by
jQuery.ajax
to request the content.
-
Initialize the tabs with the beforeLoad callback specified:
$( ".selector" ).tabs({ beforeLoad: function ( event, ui ) {} }); |
Bind an event listener to the tabsbeforeload event:
$( ".selector" ).on( "tabsbeforeload" , function ( event, ui ) {} ); |
create( event, ui )Type: tabscreate
ui.tab
and ui.panel
will be empty jQuery objects.Initialize the tabs with the create callback specified:
$( ".selector" ).tabs({ create: function ( event, ui ) {} }); |
Bind an event listener to the tabscreate event:
$( ".selector" ).on( "tabscreate" , function ( event, ui ) {} ); |
load( event, ui )Type: tabsload
Initialize the tabs with the load callback specified:
$( ".selector" ).tabs({ load: function ( event, ui ) {} }); |
Bind an event listener to the tabsload event:
$( ".selector" ).on( "tabsload" , 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 > </ 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 > |