jQuery UI Tabs Tricks

By Duy Michael Nguyen|jquery-ui|Be the first to comment!

Today, I am going to show you 2 tricks that you can use while working with Jquery UI Tabs.

#1. Find the number of tabs

[sourcecode language="javascript"]
$("ul.ui-tabs-nav > li").length
[/sourcecode]

#2. Insert a new tabs after a specific tabs index

[sourcecode language="javascript"]
$("#myTabSelector").tabs("add", "#newTabId" + , ‘NewTabLabel’, 1); //1 is the index you want your new tab to be
[/sourcecode]

#3. Automatically select the tab on create

[sourcecode language="javascript"]
var $tabs = $(‘#myTab’).tabs({
add: function(event, ui) {
$tabs.tabs(‘select’, ‘#’ + ui.panel.id);
}
[/sourcecode]