Contact us:
  • Phone number: +1 (516) 321-1856
  • E-mail: info@abcname.com
  • Skype Office: ABCname.Company
  • Skype Manager: Krutevich_Andrey
Send your feedback:
 
+1 (516)321-1856Don`t call us at night, guys!
 
jQuery UI, the Tabs widget

The Tabs widget will help you to break the content into several logical sections. It can be very convenient if there is not enough of free space on your web-page. The content for each tab panel can be defined in-page or can be loaded via Ajax.


Options:

ajaxOptions – additional Ajax options to consider when loading tab content (see jQuery.ajax()).

cache – whether or not to cache remote tabs content, e.g., load only once or with every click. Cached content is being lazy loaded, e.g., once and only once for the first click. Note that to prevent the actual Ajax requests from being cached by the browser you need to provide an extra cache: false flag in the ajaxOptions option.

collapsible – when set to true, the active panel can be closed.

cookie – store the latest selected tab in a cookie. The cookie is then used to determine the initially selected tab if the selected option is not defined. Requires the cookie plugin, which can also be found in the development-bundle-external folder from the download builder. The object needs to have key/value pairs of the form the cookie plugin expects as options.

disabled – which tabs are disabled.
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.

event – the type of event that the tabs should react to in order to activate the tab. To activate on hover, use "mouseover".

fx – enable animations for hidnigand showing tab panels.
Multiple types supported:
Object: Key/value pairs of properties to animate and optional duration, e.g., { height: "toggle", duration: 200 }.
Array: Animation settings in the form [ hideSettings, showSettings ].

panelTemplate –HTML template from which a new tab panel is created in case of adding a tab with the add() method or when creating a panel for a remote tab on the fly.

selected – which panel is currently open.
Multiple types supported:
Boolean: Setting selected to false will collapse all panels. This requires the collapsible option to be true.
Integer: The zero-based index of the panel that is selected (open).

spinner –the HTML content to show in a tab title while remote content is loading. Set this option to an empty string to deactivate the spinner behavior. A span element must be present in the anchor tag of the title for the spinner content to be visible.

tabTemplate – default: "#{label}"

HTML template from which a new tab is created and added. The placeholders #{href} and #{label} are replaced with the URL and tab label that are passed as arguments to the add() method.


Events:

select – triggered directly after a tab is selected.Can be canceled to prevent the tab from being selected.

load – triggered after a remote tab has been loaded..

show – triggered after a tab has been selected (after animation completes).

add – triggered when a tab is added.

remove – triggered when a tab is removed.

enable – triggered when a tab is enabled.

disable – triggered when a tab is disabled.


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.
Code examples:
Invoke the destroy method:1 $( ".selector" ).tabs( "destroy" );

disable – disables all tabs.
This method does not accept any arguments.
Code examples:
Invoke the method:1 $( ".selector" ).tabs( "disable" );

enable – enables all tabs.
This method does not accept any arguments.
Code examples:
Invoke the method:1 $( ".selector" ).tabs( "enable" );

option – gets the value currently associated with the specified optionName.
optionName
Type: String
The name of the option to get.
Code examples:
Invoke the method:1    $( ".selector" ).tabs( "option" );

add – ( url, label [, index ] )
Add a tab.
url
Type: String
The URL of the tab to add.
label
Type: String
The name of the tab to add.
index
Type: Number
Where to add the new tab (zero-based). If omitted, the new tab will be added as the last tab.
Code examples:
Invoke the add method:1 $( ".selector" ).tabs( "add" );

remove – remove a tab.
index
Type: Number or String
Which tab to remove.
Code examples:
Invoke the remove method:1   $( ".selector" ).tabs( "remove" );

enable – .tabs(‘enable’, index) makes the tab available. To make a couple of them enabled at the same time, do this: $(‘#tabs’).data(‘disabled.tabs’, [1, 2, 3 ]);

disable – .tabs(‘disable’, index) will make the tab unavailable. The active tab cannot be disabled. To disable a couple of tabs, do this: $(‘#tabs’).data(‘disabled.tabs’, [1, 2, 3]);

select – select a tab, as if it were clicked.
index
Type: Number or String
Which tab to select.
Code examples:
Invoke the select method:1 $( ".selector" ).tabs( "select" );

load – loads the panel content of a remote tab.
index
Type: Number or String
Which tab to load.
Code examples:
Invoke the load method:1 $( ".selector" ).tabs( "load" );

url – change the URL from whcih an Ajax (remote) tab will be loaded. The specified URL will be used for subsequent loads. Note that you can not only change the URL for an existing remote tab with this method, but also turn an in-page tab into a remote tab.
index
Type: Integer
The zero-based index of the tab to update.
url
Type: String
The URL to set for the tab.
Code examples:
Invoke the url method:1 $( ".selector" ).tabs( "url" );

length – retrieve the number of tabs of the first matched tab pane.
This method does not accept any arguments.
Code examples:
Invoke the length method:1      $( ".selector" ).tabs( "length" );

abort – terminate all running tab ajax requests and animations.
This method does not accept any arguments.
Code examples:
Invoke the abort method:1 $( ".selector" ).tabs( "abort" );

rotate – ( duration [, continuing ] )
Set up an automation rotation through the tabs.
duration
Type: Number
The duration in milliseconds for each tab to be visible before rotating to the next tab.
continuing (default: false)
Type: Boolean
Whether or not to continue the rotation after a tab has been selected by a user.
Code examples:
Invoke the rotate method:1 $( ".selector" ).tabs( "rotate" );