我正在创建一个Web应用程序,我想使用Tabs小部件来复制您在大多数Web浏览器中找到的选项卡功能.我希望用户能够:移动(排序)选项卡,动态创建选项卡,动态关闭选项卡.
我在删除已移动的标签时遇到问题.
可以说有三个选项卡命名:
一,二,三.
如果我移动"一",那么标签就像:
二,三和一
当我删除索引为2的"one"时,删除选项卡"three".所以标签现在是:
二,一.
我已经测试了许多不同的场景,当我删除选项卡时,在我看来,JQueryUI删除了最初具有索引值的错误选项卡,而不是当前具有索引值的选项卡.
您重新排序时,标签保留旧索引值是正确的,当您尝试删除标签时会导致意外行为.您可以通过在删除之前重新初始化选项卡来强制它更新索引,如下所示:
$('#tabs').tabs('destroy').tabs();
$('#tabs').tabs('remove', 2);
这是因为li在根据DOM中元素的位置设置选项卡时会生成索引.当您移动选项卡时,li位置会在DOM中更新,即使它们的索引值在Tabs插件中没有更改.
当然,如果您有一个非常复杂的设置,这可能会产生负面的性能影响,在这种情况下,您可以找出更新选项卡索引的其他方法,或者您可以维护一个将原始索引映射到当前索引的数组.