添加一个jQuery选项卡并使其活跃



如何使标签成为创建它?出现"标签栏",但要向他们展示内容,您必须单击它。我进行了此菜单调用以打开jQuery选项卡:

<a href="#" onClick="addTab('Expedi...','dialogs/grid_expedition.html','1100')">&nbsp;&nbsp;Expedition</a>

这会创建选项卡,但不会使其活跃。

这是tabs.js:

//Global Variables
var tabTitle = null; //Title should start null
var tabs = null;
tabCounter = 1; //Counter of tab
//Function responsible to create a new Tab and insert the content loaded
function addTab(title, content, indexx) {
    var count = $("#tabs-"+indexx).length;
    var currentTab = indexx-1;
    if(count > 0 ){
        alert('Working tab');
}else{
var label = tabTitle.val() || title,
    id = "tabs-" + indexx,
    li = $(tabTemplate.replace(/#{href}/g, "#" + id).replace(/#{label}/g, label)),
    tabContentHtml = tabContent.val() || "Tab " + tabCounter + " content.";
    tabs.find(".ui-tabs-nav").append(li);
    tabs.append("<div id='" + id + "'><p>" + content + "</p></div>");
    //to load data
    $.post( content, function( data ) {
      $( '#' + id ).html( data );
    }); 


     tabs.tabs("refresh");
    /* to Close the tab */
    tabs.delegate("span.ui-icon-close", "click", function () {
    var panelId = $(this).closest("li").remove().attr("aria-controls");
    $("#" + panelId).remove();
    //tabs.tabs("refresh"); 
});
tabCounter++;
}
}
// Function to initialize the tabs
function init() {
    tabTitle = $("#tab_title"), tabContent = $("#tab_content"), tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>";
    tabs = $('#tabs').tabs({ selected: -1});
    addTab('Principal', 'dialogs/features.html');
    tabs.tabs("refresh");
}
$('document').ready(init);

另外,当您关闭选项卡时,最后一个也不活跃。

以编程选择您可以使用的当前有效的选项卡:

tabs.tabs('option', 'active', 0);

最后一个选项是正确选项卡的索引(基于0)。

最新更新