如果选项卡太多，如何使Jquery UI选项卡水平滚动
现在上面的图片是“太多选项卡”的示例，默认情况下显示为多行。
但是我想在一行中进行水平滚动，在开始标签之前和最后一个标签之后添加两个箭头，或者自动滚动都可以。
我有一个不同的方法来处理这个问题，因为我认为选项卡的滚动是违反直觉的。 当选项卡突破到第二行时，我创建了一个插件来执行下拉列表。
我最近在寻找一个解决方案，但其他插件/示例似乎都不适用于jQuery 1.9+，我也认为Jason的答案是创建一个“更多”选项卡并显示任何额外的选项卡作为下拉列表提供最好的UI经验，所以我扩展了他的答案，并创建了一个1.9+的jQuery插件，扩展了jQuery UI选项卡，如果所有选项卡的总宽度超过选项卡容器的宽度，则其他选项卡在下拉列表中组合在一起。
你可以看到JSFiddle Demo来看它的实际效果。 尝试调整浏览器窗口的大小以使其正常工作。
或者您可以在JSFiddle上查看完整的插件代码。
初始化’溢出选项卡’就像这样简单：
$("#tabs").tabs({ overflowTabs: true, tabPadding: 23, containerPadding: 40, dropdownSize: 50 }); tabPadding是选项卡中文本周围填充像素的数量。
containerPadding是containerPadding的填充。
dropdownSize是下拉选择器按钮的像素大小
我已在最新版本的Chrome ， Firefox和IE上测试了这一点。 如果您发现任何问题或可以改善这一点，那么随意分叉并继续。
现在也可以在GitHub上找到 。
这里列出的所有插件都不适用于我（大多数已经过时且与jQuery 2.0+不兼容）但我最终发现了这个： https ： //github.com/joshreed/jQuery-ScrollTabs …值得添加到列表中。
我刚刚为此制作了一个非常简单的插件。 基本上你必须在标签导航器中添加一个固定长度的div和一个可移动的div。
插件代码：
(function ($) { var settings = { barheight: 38 } $.fn.scrollabletab = function (options) { var ops = $.extend(settings, options); var ul = this.children('ul').first(); var ulHtmlOld = ul.html(); var tabBarWidth = $(this).width()-60; ul.wrapInner(''); ul.append(''); var leftArrow = ul.children().last(); leftArrow.button({ icons: { secondary: "ui-icon ui-icon-carat-1-w" } }); leftArrow.children('.ui-icon-carat-1-w').first().css('left', '2px'); ul.append(''); var rightArrow = ul.children().last(); rightArrow.button({ icons: { secondary: "ui-icon ui-icon-carat-1-e" } }); rightArrow.children('.ui-icon-carat-1-e').first().css('left', '2px'); var moveable = ul.find('.moveableContainer').first(); leftArrow.click(function () { var offset = tabBarWidth / 6; var currentPosition = moveable.css('left').replace('px', '') / 1; if (currentPosition + offset >= 0) { moveable.stop().animate({ left: '0' }, 'slow'); } else { moveable.stop().animate({ left: currentPosition + offset + 'px' }, 'slow'); } }); rightArrow.click(function () { var offset = tabBarWidth / 6; var currentPosition = moveable.css('left').replace('px', '') / 1; var tabsRealWidth = 0; ul.find('li').each(function (index, element) { tabsRealWidth += $(element).width(); tabsRealWidth += ($(element).css('margin-right').replace('px', '') / 1); }); tabsRealWidth *= -1; if (currentPosition - tabBarWidth > tabsRealWidth) { moveable.stop().animate({ left: currentPosition - offset + 'px' }, 'slow'); } }); return this; }; })(jQuery);
请访问http://jsfiddle.net/Bua2d/查看
这是一个插件： http ： //jquery.aamirafridi.com/jst/
我也在这里为它创建了一个jQuery插件，但我主要关注的是为移动网站创建这样的结构，这些网站空间很小，并且还可以依赖于水平滚动触摸以及控制箭头。
解决方案如下所示： 
我正在使用Bootstrap并实现你基本上需要包含的插件：
在你HTML HTML下面的结构，以便箭头可以正常工作（我正在使用font-awesome）
并打电话给你Js：
$("#js_image_selection").horizontalTabs();
希望它能在未来帮助任何人！ 干杯!
一个插件可以在这里找到https://github.com/Casper1131/scroller它可以用于任何无序列表。
回复：AndréLourenço – 很棒的插件，只是想投入一个需要精炼的黑客，它允许滚动器在窗口resize时resize（即：旋转移动设备）;
if(!$(".fixedContainer").length) { ul.wrapInner(''); ul.append(''); var leftArrow = ul.children().last(); leftArrow.button({ icons: { secondary: "ui-icon ui-icon-carat-1-w" } }); leftArrow.children('.ui-icon-carat-1-w').first().css('text-align', 'center'); ul.append(''); var rightArrow = ul.children().last(); rightArrow.button({ icons: { secondary: "ui-icon ui-icon-carat-1-e" } }); rightArrow.children('.ui-icon-carat-1-e').first().css('text-align', 'center'); } else { var leftArrow = $(".leftBtn"); var rightArrow = $(".rightBtn"); $(".fixedContainer").css("width", tabBarWidth); }
然后我在窗口resize时再次调用它，即：
$(window).resize(function(e){ $("#tabs").scrollabletab(); });
这不是最有效的方法，但它目前适用于我的测试目的。
我为此创建了另一个插件。 这次使用Chrome样式选项卡大小调整行为。
初始化为
$( ".tabpanel" ).tabs().tabs('overflowResize');
演示
GitHub上
在单行显示标签时，有多种方案和案例需要处理。
- 简单的解决方案是在ui-tab-header
div，并将溢出设置为scroll。 当浏览器处理滚动选项卡标题时，此方法无法使用。 但浏览器提供的默认滚动条看起来很奇怪。 所以你需要一个自定义/时尚的滚动条插件。 要么 - 要使用如下所示的jQuery UI标签扩展：
扩展的jQuery UI小部件，提供可滚动的选项卡function，并通过在需要时显示导航控件自动处理响应式页面大小更改。
特征：
- 它是响应式或流畅的布局
- 支持触摸滑动以滚动触摸设备中的标签页眉（*需要外部依赖）
- 完全可定制和基于CSS的样式
- 支持使用关闭按钮删除选项卡
- 不需要额外的HTML结构更改，它会自动增强标记。