如果选项卡太多,如何使Jquery UI选项卡水平滚动

Question

现在上面的图片是"太多选项卡"的示例,默认情况下显示为多行.

但我想在一行中进行水平滚动,在开始标签之前和最后一个标签之后添加两个箭头,或者自动滚动都可以.

Answer 1

我有一个不同的方法来处理这个问题,因为我认为选项卡的滚动是违反直觉的.当标签突破到第二行时,我创建了一个插件来执行下拉列表.

https://github.com/jasonday/plusTabs

Answer 2

我最近正在寻找一个解决方案,但其他插件/示例似乎都不适用于jQuery 1.9+,我也认为Jason的答案是创建一个"更多"选项卡并显示任何额外的选项卡作为下拉列表提供最好的UI体验,所以我扩展了他的答案,并为1.9+创建了一个jQuery插件,扩展了jQuery UI选项卡,如果所有选项卡的总宽度超过了tabs容器的宽度,则其他选项卡在下拉列表中组合在一起.

您可以看到JSFiddle演示以查看它的实际效果.尝试调整浏览器窗口的大小以使其正常工作.

或者您可以在JSFiddle上查看完整的插件代码.

初始化'溢出选项卡'就像这样简单:

$("#tabs").tabs({
    overflowTabs: true,
    tabPadding: 23, 
    containerPadding: 40,
    dropdownSize: 50
});

tabPadding 是选项卡中文本周围填充的像素数.

containerPadding 是容器的填充物.

dropdownSize 是下拉选择器按钮的像素大小

我已经在最新版本中测试了这个Chrome,Firefox和IE.如果您发现任何问题或可以改善这一点,那么随意分叉并继续.

现在也可以在GitHub上找到.

Answer 3

这里列出的所有插件都不适合我(大多数已经过时且与jQuery 2.0+不兼容)但我最终发现了这个:https: //github.com/joshreed/jQuery-ScrollTabs ...值得添加到列表中.

Answer 4

这是一个插件： http: //jquery.aamirafridi.com/jst/