删除动态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选项卡

回答

相关问题