Tabs

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.


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
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({
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>
Your Rating




Google+

Post Comment This is for short comments only. Use the forum for more discussions.







Most Popular JQuery Scripts

1

Two dependant list boxes

2

Calendar with Date Selection

3

Data change by Slider

4

Show & Hide element
HTML . MySQL. PHP. JavaScript. ASP. Photoshop. Articles. FORUM Contact us
©2000-2018 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer