Jquery tabs UI with all options Methods and Events with demos

PHP
HTML
JavaScript
MySQL

PHP is a server side scripting language used for managing backed functionality of the web site. PHP code is used to interact with database and manage the programing part of the website. Our browsers does not understand or supports PHP scripts. When user ( browser ) request for a PHP page the server interpret php files and returns the output in the form of HTML. By using PHP we can manage the outputs which reaches browser and finally displayed to the user.

This is the set of tags which is understood by web browser. By HTML we can control the look and feel of the website. Browser interprets the HTML tags and accordingly display the page. For example to write a part of text using underline we have to use tags and mark the starting and ending of the underlined text.

This is mainly used for managing client side scripting requirement. Our browsers support JavaScript and they execute this code once the page is loaded at client side. Server sends the code along with HTML tags to the web browser for execution at client end.

This is a database which stores records. Server side scripting languages interact with database and manage the data. We can add, update or delete records based on the requirement by using server side scripting language. Structured Query Language (SQL ) is the common language used to interact with the database.

Options

Active
classes
collapsible
disabled
event
heightStyle
hide
show

Methods

destroy
disable
enable
instance
load
option
refresh
widget

Events

activate
beforeActivate
beforeLoad
create
load

Active

Type : Boolean or Integer
Default : 0
can decide which tab to remain open (active).

$( '#tabs' ).tabs({
active: 3
});

To read active tab number

var p_active = $( "#my_tabs" ).tabs( "option", "active" );

To set the active tab

$( "#my_tabs" ).tabs( "option", "active", sel );// sel is the variable

Collapse all tabs by setting active to false along with setting of collapsible to true

$( '#my_tabs' ).tabs({
active: false,
collapsible: true
});

Classes

Type : Object
Default :

{
  "ui-tabs": "ui-corner-all",
  "ui-tabs-nav": "ui-corner-all",
  "ui-tabs-tab": "ui-corner-top",
  "ui-tabs-panel": "ui-corner-bottom"
}

To get the associated Class of the Tab

var present_class = $( "#my_tabs" ).tabs( "option", "classes.ui-tabs" );

To Set the class

$("#my_tabs").tabs("option","ui-state-error",);

Collapsible

Type : Boolean
Default : false

To get the value of Collapsible option

var status = $( "#my_tabs" ).tabs( "option", "collapsible" );

To Set the collapsible option

$( "#my_tabs" ).tabs( "option", "collapsible", true );

disabled

Type : Boolean or Array
Default : false

$( "#my_tabs" ).tabs({
disabled:false
});

Specify which tabs are to be disabled

$( "#my_tabs" ).tabs({
disabled:[0,3] // using array 
});

Getting tabs which are disabled

var status = $( "#my_tabs" ).tabs( "option", "disabled" )

To Set the disabled option

$( "#my_tabs" ).tabs( "option", "disabled", [1,3])

We can enable or disable specific tabs by using above code. While setting the disabled option we will use one array having tab numbers to disable.

event

Type : String
Default : 'click'

$( "#my_tabs" ).tabs({
event:'mouseover'
});

Specify the event to activate the tab Getting event option value

var status = $( "#my_tabs" ).tabs( "option", "event")

To Set the event option value

$( "#my_tabs" ).tabs( "option", "event", 'mouseover');

We can select and set event option value by using raiod buttons. We can read the associated value and display

heightStyle

Type : String
Default : 'content'

Set the height of the tab and each panel. Possible values are here.
Content : each panel will take the height based on their content.
Fill: each panel will take the full height of tabs parent element.
Auto : each panel will take the height of tallest panel Maximum.

$( "#my_tabs" ).tabs({
heightStyle:'fill'
});

Specify the event to activate the tab Getting event option value

var status = $( "#my_tabs" ).tabs( "option", "heightStyle")

To Set the event option value

$( "#my_tabs" ).tabs( "option", "heightstyle", "auto" );;

We can select and set heightStyle option value by using raiod buttons. We can read the associated value and display

hide

Type : Boolean or String or number or object
Default : null

Boolean : No animation, panels will be closed immediately
Number : Duration of animation while closing the panels in millseconds
string : Specified effect can be used while closing. Available effect list
Object: properties with object.

$( "#my_tabs" ).tabs({
hide: { effect: "slide", duration: 800 }
});

Getting hide option value

var status = $( "#my_tabs" ).tabs("option", "hide");

To Set the show option value

$("#my_tabs").tabs( "option", "hide", {effect: 'blind', duration: 800} );

We can select and set hide option value by using radio buttons. We can read the associated value and display

show

$( "#my_tabs" ).tabs({
show: { effect: "fade", duration: 700 }
});

Getting show option value

var status = $( "#my_tabs" ).tabs("option", "show");

To Set the show option value

$("#my_tabs").tabs("option","show",{effect: 'fade', duration: 600});

We can select and set show option value by using radio buttons. We can read the associated value and display

Methods

Destroy()

Removes the functinality

$( "#my_tab" ).tabs( "destroy" );

disable()

Disable the tab (all tabs )

$( "#my_tab" ).tabs( "disable" );

enable()

Enable the tab (previously disabled ) (all tabs )

$( "#my_tab" ).tabs( "enable" );

instance()

Retrive tabs instance object

$( "#my_tab" ).tabs( "instance" );

load()

Load the content of a tab

$( "#my_tab" ).tabs( "load",2 );

option()

Get the value of the given Option name

var p_active = $( "#my_tabs" ).tabs( "option", "active" )

We can get all the options with value by using an object containing key value pairs.

refresh()

Refresh the tab after any new addition or deletion directly through DOM

$( "#my_tab" ).tabs( "refresh" );

widget()

Returns JQuery object

var tab_obj = $( "#my_tab" ).tabs( "widget" )

Events

activate()

Triggered after the tab is acivated.

$( "#my_tab" ).tabs({
  activate: function( event, ui ) {}
});

beforeActivate()

Triggered before the tab is acivated.

$( "#my_tab" ).tabs({
  eforeActivate: function( event, ui ) {}
});

beforeLoad()

Triggered before remote tab is loaded

$( "#my_tab" ).tabs({
  beforeLoad: function( event, ui ) {}
});

create()

Triggered when tab is created

$( "#my_tab" ).tabs({
  create: function( event, ui ) {}
});

load()

Triggered after the tab is acivated.

$( "#my_tab" ).tabs({
  load: function( event, ui ) {}
});

Different themes are available for JQuery widgets. You can preview the Tabs by selecting available themes from a drop down list.

Managing width of tabs

<style>
.ui-tabs {
width: 800px; // Change this value
}
</style>

This article is written by plus2net.com team.

plus2net.com

Most Popular JQuery Scripts
1	Two dependant list boxes
2	Calendar with Date Selection
3	Data change by Slider
4	Show & Hide element

Tabs

Managing width of tabs

Subscribe

1

2

3

4