當打開新標籤時，它應該直接在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標籤中打開新標籤

回答

相關問題