jQuery UI选项卡可以自定义许多选项卡

Question

我想使用jquery-ui-tabs实现一个标签栏，该标签栏已经过自定义，可以像在HootSuite上一样工作。在HootSuite上尝试一下，看看我的意思：

1. 登录您的hootsuite.com帐户
2. 点击标签右侧的+符号
3. 添加名为“MMMMMMMMMMMMMMMMM”的标签，直到出现“更多...”标签

你会看到这个： hootsuite tab bar overflow http://issues.tauren.com/hootsuite-sample.png

HootSuite包含以下功能，我想做的所有功能都是：

1. 尽可能多地在屏幕上显示标签。屏幕较大的用户会看到更多标签。
2. 如果空间不足，则会显示“更多...”标签，其中包含下拉列表
3. 点击“更多”标签会下拉其他标签列表
4. 可以拖动和重新排列选项卡。
5. 可以将“更多”下拉列表中的选项卡拖到选项卡栏
6. 使用标签名称旁边的小X删除标签
7. 在最后一个标签的右侧添加带有+图标的标签

我已经有一个标签栏工作，可以执行4和6.我发现Paging Tab Plugin非常酷，但工作方式不同。有没有人知道有助于我完成上述工作的插件或技术？

我的想法是不要让“更多”选项卡成为真正的选项卡，而只是一个看起来像选项卡的对象。我会在tabs.add方法中添加逻辑来计算另一个选项卡是否适合。如果不能，那么我会将选项卡的详细信息添加到单独的“更多”列表中。要做到这一切都需要付出相当大的努力，所以如果有任何插件可以提供帮助，我很乐意听到它们。

顺便说一下，经过进一步检查，看起来HootSuite看起来并没有使用UI标签。如果已经有一个jquery插件可以执行此操作，我想避免创建一个自制程序解决方案。

---

更新：我花了一些时间在这上面，现在我的自定义解决方案执行1,4,6和7.但是，如果它们用完空间，则会出现默认的ui-tabs行为，第二行选项卡出现。我还发现了another scrolling solution我可能会去，直到我抽出时间来构建一个类似hootsuite的解决方案。不过，如果有人知道其他类似的插件，请告诉我！

Answer 1

我所做的是调整标签大小以挤压到某一点。我想看看谁有这个解决方案

Answer 2

我还没有这样做，但我正在考虑使用Twitter Bootstrap来解决这个问题。看起来像Tabs with Dropdowns示例可能会起作用。 http://twitter.github.com/bootstrap/components.html#navs

我不认为它支持拖放标签。