刪除動態JQuery UI選項卡

我正在創建一個Web應用程序，我想使用Tabs小部件來複制在大多數Web瀏覽器中找到的選項卡功能。我希望用戶能夠：對標籤進行移動（排序），動態創建標籤，動態關閉標籤。刪除動態JQuery UI選項卡

我在刪除已移動的選項卡時遇到問題。

比方說，有三個選項卡命名爲：

之一，二，三。

如果我動「一個」這樣的標籤是這樣的：

兩個，三個和一個

當我刪除「一」，其具有的2的指數，標籤「三」被刪除。所以標籤現在是：

二，一。

我測試了很多不同的場景，當我刪除一個選項卡時，JQueryUI刪除最初有索引值的錯誤選項卡，而不是當前具有索引值的選項卡。

來源

2009-10-17 AshleyS

我不知道爲什麼jQuery用戶界面不使用的標籤標識，以及指標，這方式也導致了我們的頭痛。 – 2011-05-17 13:30:09

你說得對，當你重新排列它們時，這些標籤會保留它們的舊索引值，當你嘗試刪除它時導致意外的行爲。您可以強制刪除，像這樣前重新初始化選項卡來更新索引：

$('#tabs').tabs('destroy').tabs(); 
$('#tabs').tabs('remove', 2);

這工作，因爲當標籤被設置了基於DOM的li元素的位置所產生的指標。當您移動選項卡時，即使在Tabs插件中其索引值沒有更改，DOM中的li位置也會更新。

當然，如果你有一個非常複雜的設置，這可能會有負面的性能影響，在這種情況下，你可以找出其他方式來更新選項卡索引，或者你可以維護一個數組，將原始索引映射到當前的指標。

來源

2009-10-17 09:12:53

我希望有一種方法來「刷新」索引。謝謝。 – AshleyS 2009-10-17 11:51:06

不客氣！ – 2009-10-17 18:12:12

這種技術現在實際上導致了一個bug - 當我在運行時創建新的選項卡時，destroy方法會刪除所有運行時選項卡以及預期的選項卡。 – AshleyS 2009-10-18 06:48:32

我暫時解決了這個問題是這樣的：

.click(function(e) { 
$tab.tabs('remove',$tab.tabs('option','selected')); 
});

來源

2012-03-10 09:19:36 Nofix

煩人刪除是在jQueryUI tab API不再。現在，您必須刪除呈現標籤，面板本身的HTML並刷新標籤：

function removeTab(tabId) { 
    var tabIdStr = "#tabs-" + tabId 

    // Remove the panel 
    $(tabIdStr).remove(); 
    // Refresh the tabs widget 
    tabs.tabs("refresh"); 

    // Remove the tab 
    var hrefStr = "a[href='" + tabIdStr + "']" 
    $(hrefStr).closest("li").remove() 
}

https://forum.jquery.com/topic/dynamically-remove-tab

來源

2017-03-10 01:42:51

刪除動態JQuery UI選項卡

回答

相關問題