0

我想使用 jquery-ui-tabs 实现一个标签栏,该标签栏已被定制为像在 HootSuite 上一样工作。在 HootSuite 上试试这个,看看我的意思:

  1. 登录到您的 hoosuite.com 帐户
  2. 单击选项卡右侧的 + 符号
  3. 添加名为“MMMMMMMMMMMMMMMMM”的选项卡,直到出现“更多...”选项卡

你会看到这个: hootsuite 标签栏溢出 http://issues.tauren.com/hootsuite-sample.png

HootSuite 包括以下功能,所有这些都是我想做的:

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

我已经有一个可以执行 4 和 6 的选项卡栏。我发现了一个非常酷的分页选项卡插件,但工作方式不同。有谁知道可以帮助我完成上述任务的插件或技术?

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

顺便说一句,经过进一步检查,HootSuite 似乎并没有为此使用 UI 选项卡。如果已经有执行此操作的 jquery 插件,我想避免创建自制解决方案。


更新:我在这方面花了更多时间,现在我的自定义解决方案执行 1、4、6 和 7。但是,如果它们的空间不足,则会发生默认的 ui-tabs 行为并出现第二行选项卡. 我还找到了另一个滚动解决方案,我可能会使用它,直到我有时间构建一个类似 hoosuite 的解决方案。不过,如果有人知道其他类似的插件,请告诉我!

4

2 回答 2

0

我还没有这样做,但我正在考虑使用 Twitter Bootstrap 来解决这个问题。看起来带有下拉列表的选项卡示例可能有效。 http://twitter.github.com/bootstrap/components.html#navs

但是,我认为它不支持拖放选项卡。

于 2012-07-28T03:17:16.360 回答
0

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

于 2010-03-19T07:58:11.387 回答