当打开新标签时，它应该直接在jquery UI标签中打开新标签

我正在使用jquery-UI创建动态标签面板。当我点击添加标签按钮时，新标签正在创建。但该标签面板并未直接打开。当点击该标签面板时，只有它打开。当打开新标签时，它应该直接在jquery UI标签中打开新标签

$(function() { 
var 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>", 
    tabCounter = 2; 

var tabs = $("#tabs").tabs(); 

// modal dialog init: custom buttons and a "close" callback resetting the form inside 
var dialog = $("#dialog").dialog({ 
    autoOpen: false, 
    modal: true, 
    buttons: { 
    Add: function() { 
     addTab(); 
     $(this).dialog("close"); 
    }, 
    Cancel: function() { 
     $(this).dialog("close"); 
    } 
    }, 
    close: function() { 
    form[ 0 ].reset(); 
    } 
}); 

// addTab form: calls addTab function on submit and closes the dialog 
var form = dialog.find("form").submit(function(event) { 
    addTab(); 
    dialog.dialog("close"); 
    event.preventDefault(); 
}); 

// actual addTab function: adds new tab using the input from the form above 
function addTab() { 
    var label = tabTitle.val() || "Tab " + tabCounter, 
    id = "tabs-" + tabCounter, 
    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>" + tabContentHtml + "</p></div>"); 
    tabs.tabs("refresh"); 
    tabCounter++; 
} 

// addTab button: just opens the dialog 
$("#add_tab") 
    .button() 
    .click(function() { 
    dialog.dialog("open"); 
    }); 

// close icon: removing the tab on click 
tabs.delegate("span.ui-icon-close", "click", function() { 
    var panelId = $(this).closest("li").remove().attr("aria-controls"); 
    $("#" + panelId).remove(); 
    tabs.tabs("refresh"); 
}); 

tabs.bind("keyup", function(event) { 
    if (event.altKey && event.keyCode === $.ui.keyCode.BACKSPACE) { 
    var panelId = tabs.find(".ui-tabs-active").remove().attr("aria-controls"); 
    $("#" + panelId).remove(); 
    tabs.tabs("refresh"); 
    } 
});

}）;

这里是我在我的网站中使用的jquery UI选项卡面板的网址[http://jqueryui.com/tabs/#manipulation]。

如何直接打开这个新添加的标签？

来源

2016-04-04 Ganesh sah

有两个东西修改，而打开标签第一个标签类需要添加新创建的标签，并从当前活动标签中删除活动类，并在选项卡内容中应用css如disply：活动块时 – uzaif

附加按照您的addTab代码（）函数

var lastChildIndex = $(".ui-tabs-nav").children().length - 1; 
    $("div#tabs").tabs({active: lastChildIndex});

这样做是什么得到你的标签列表（您刚才添加的一个）的最后一个子项的索引，并将其设置为主动。

例子：http://jsfiddle.net/ujUu2/818/

编辑：看到你已经在你的代码tabCounter您可以使用作为设定最后一个选项卡积极的，而不是我提出的VAR lastChildIndex索引。

来源

2016-04-04 07:42:14 Tonny

我已添加上面的代码。现在它工作正常。谢谢 –

当打开新标签时，它应该直接在jquery UI标签中打开新标签

回答

相关问题