Question

I am creating the tabs dynamically.Everything is working fine.But by default it insert the tab at last. In some scenario i want to add the
tab at specific postion.For Example:- I have add two tabs i.e Tab1,Tab2 . Now if i add 3rd tab, it should be added at index1 which is
between Tab1 and Tab2

On ready initializing the tabs as below

   var $tabs = $( "#tabs_selector").tabs
        ({
            tabTemplate: '<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'></span></li>',
         add: function( event, ui )
         {
            $tabs.tabs('select',ui.panel.id);
            return false;
         }
    });

// now on click of some link i call below function which inserts the tab dynamically. My question is can i mention the index postion
somewhere so that tab is inserted at that position instead of insertion at last?

function inserTab()
 {
     var tabs = $('#tabs_selector').tabs();
     tabs.tabs( "add", url, title);// is there any idex paramter too here?
 }

Answer 1

There’s an optional 4th parameter when adding one:

.tabs( "add" , url , label , [index] )

So you should be able to pick where you want to add it!

Although maybe you shouldn’t be using the “add” method, as it has now been deprecated: http://jqueryui.com/upgrade-guide/1.9/#deprecated-add-and-remove-methods-and-events-use-refresh-method

Maybe something like this would work:

// Find the first tab (change the eq(1) to get a different one)
var firstTab = $( "#tabs" ).find( ".ui-tabs-nav li:eq(1)" );
// create the new tab HTML
var newTab = $( "<li><a href='/remote/tab.html'>New Tab</a></li>" );
// add the new tab after the 1st one we found
firstTab.after(newTab);
// Refresh the tabs widget
$( "tabs" ).tabs( "refresh" );

Untested, but should be roughly correct based on the docs!