Jquery Tabs

There are some common fuctions for tabs

Property
Default Value
Usage

ajaxOptions
{}
Options for remote AJAX tabs

cache
"false"
Load remote tab content only once (lazy-load)

cookie
null
Show active tab using cookie data on page load

disabled
[]
Disable specified tabs on pageload

idPrefix
"ui-tabs-"
Used when a remote tab's link element has no title attribute

event
"click"
Tabs event that triggers display of content

fx
null
Specify a transition effect when changing tabs

panelTemplate

A string specifying the elements used for the content section of a dynamically created tab

selected
0
The tab selected by default when the widget renders

spinner
"Loading&#B230"
Specify the loading spinner for remote tabs

tabTemplate

#{label}

A string specifying the elements used when creating new tabs dynamically

unselect
false
Hides an already selected tab when it is clicked

Property
Default Value

disabledCLass
"ui-tabs-disabled"

hideClass
"ui-tabs-hide"

loadingClass
"ui-tabs-loading"

navClass
"ui-tabs-nav"

panelClass
"ui-tabs-panel"

selectedClass
"ui-tabs-selected"

unselectClass
"ui-tabs-unselect

E.X.

If you want nothing should be selected on load
$(document).ready(function () {
var tabOpts = {

selected:null

};
$("#tabs").tabs(tabOpts);
});
else type 0,1,2 are index starts with 0

If you wanna disable TAB$(document).ready(function () {
var tabOpts = {

disables:[0]
};
$("#tabs").tabs(tabOpts);
});
disable first tab , change [0] to disable other or for mutliple [0,1] etc.

Transition Effects
$(document).ready(function () {
var tabOpts = {
fx: {
opacity:"toggle", duration:"slow" }
};
$("#tabs").tabs(tabOpts);
});
duration could be slow, normal, or fast

To only show the animation once, when a tab closes for example, we would need to nest the fx object within an array
$(function(){
//define config object
var tabOpts = {
fx: [{
opacity: "toggle",
duration: "slow"
},
null]
};
//create the tabs
$("#myTabs").tabs(tabOpts);
});
/script>

executable functions on an event
Property
Usage

add
Execute a function when a new tab is added

disable
Execute a function when a tab is disabled

enable
Execute a function when a tab is enabled

load
Execute a function when a tab's remote data has loaded

remove
Execute a function when a tab is removed

select
Execute a function when a tab is selected

show
Execute a function when the content section of a tab is shown

tab's custom binding events and their triggers

Event
Trigger

tabsselect
A tab is selected

tabsload
A remote tab has loaded

tabsshow
A tab is shown

tabsadd
A tab has been added to the interface

tabsremove
A tab has been removed from the interface

tabsdisable
A tab has been disabled

tabsenable
A tab has been enabled

Functions
$(function(){
//alert the id of the tab that was selected
function handleSelect(event, tab) {
alert("The tab at index " + tab.index + " was
selected");
}
//define config object
var tabOpts = {
select:handleSelect
};
//create the tabs
$("#myTabs").tabs(tabOpts);
});