我想使用 jquery-ui-tabs 实现一个标签栏,该标签栏已被定制为像在 HootSuite 上一样工作。在 HootSuite 上试试这个,看看我的意思:
- 登录到您的 hoosuite.com 帐户
- 单击选项卡右侧的 + 符号
- 添加名为“MMMMMMMMMMMMMMMMM”的选项卡,直到出现“更多...”选项卡
你会看到这个: hootsuite 标签栏溢出 http://issues.tauren.com/hootsuite-sample.png
HootSuite 包括以下功能,所有这些都是我想做的:
- 将尽可能多的选项卡放在屏幕上。屏幕较大的用户会看到更多标签。
- 如果空间不足,将出现“更多...”选项卡和下拉列表
- 单击更多选项卡将下拉附加选项卡列表
- 可以拖动和重新排列选项卡。
- 更多下拉列表中的标签可以拖到标签栏
- 删除选项卡名称旁边带有小 X 的选项卡
- 在最后一个选项卡的右侧添加带有 + 图标的选项卡
我已经有一个可以执行 4 和 6 的选项卡栏。我发现了一个非常酷的分页选项卡插件,但工作方式不同。有谁知道可以帮助我完成上述任务的插件或技术?
我的想法是不要真正使“更多”选项卡成为真正的选项卡,而只是一个看起来像选项卡的对象。我会在 tabs.add 方法中添加逻辑来计算另一个选项卡是否适合。如果不能,那么我会将选项卡的详细信息添加到我单独的“更多”列表中。要让这一切正常工作需要付出相当多的努力,所以如果有任何插件可以提供帮助,我很想听听它们。
顺便说一句,经过进一步检查,HootSuite 似乎并没有为此使用 UI 选项卡。如果已经有执行此操作的 jquery 插件,我想避免创建自制解决方案。
更新:我在这方面花了更多时间,现在我的自定义解决方案执行 1、4、6 和 7。但是,如果它们的空间不足,则会发生默认的 ui-tabs 行为并出现第二行选项卡. 我还找到了另一个滚动解决方案,我可能会使用它,直到我有时间构建一个类似 hoosuite 的解决方案。不过,如果有人知道其他类似的插件,请告诉我!