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

Question

现在上图是一个“标签太多”的例子，默认显示为多行。

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

Answer 1

我对这个问题有不同的方法，因为我认为标签的滚动是违反直觉的。我创建了一个插件来在选项卡中断到第二行时进行下拉。

https://github.com/jasonday/plusTabs

Answer 2

我最近一直在寻找解决方案，但其他插件/示例似乎都不适用于 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 是容器的内边距。

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

我已经在Chrome、Firefox 和IE 的最新版本上对此进行了测试。如果您发现任何问题或可以改进它，请随时 fork 并继续。

现在也可以通过GitHub 获得。

Answer 3

这里列出的插件对我来说都不是很有效（大多数已经过时并且与 jQuery 2.0+ 不兼容）但我最终发现了这个： https://github.com/joshreed/jQuery-ScrollTabs ...值得添加到列表中。

Answer 4

我刚刚为此制作了一个非常简单的插件。基本上，您必须向选项卡导航器添加一个固定长度的 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('<div class="fixedContainer" style="height: ' + ops.barheight + 'px; width: ' + tabBarWidth + 'px; overflow: hidden; float: left;"><div class="moveableContainer" style="height: ' + ops.barheight + 'px; width: 5000px; position: relative; left: 0px;"></div></div>');
    ul.append('<div style="width: 20px; float: left; height: ' + (ops.barheight - 2) + 'px; margin-left: 5px; margin-right: 0;"></div>');
    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('<div style="width: 20px; float: left; height: ' + (ops.barheight - 2) + 'px; margin-left: 1px; margin-right: 0;"></div>');
    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/

Answer 5

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

Answer 6

我还为它创建了一个 jQuery 插件here，但我的主要重点是为空间很小且可以依赖的移动网站创建这样的结构也可以使用 touch 和控制箭头进行水平滚动。

解决方案如下所示：

我正在使用 Bootstrap 并实现您基本上需要包含的插件：

在您的 HTML 中具有以下结构，以便箭头可以正常工作（我正在为它们使用 font-awesome）

 <div id="js_image_selection" class="horizontal-scrollable-tabs">
  <div class="scroller arrow-left"><i class="fa fa-arrow-left"></i></div>
  <div class="scroller arrow-right"><i class="fa fa-arrow-right"></i></div>
  <div class="horizontal-tabs">
    <ul role="tablist" class="nav nav-tabs nav-tabs-horizontal">
      <li role="presentation" class="active"><a href="#image01" data-toggle="tab"><img src="external/images/t-shirt-white.jpg"/></a></li>
      <li role="presentation"><a href="#image02" data-toggle="tab"><img src="external/images/t-shirt-orange.jpg"/></a></li>
      <li role="presentation"><a href="#image03" data-toggle="tab"><img src="external/images/t-shirt-green.jpg"/></a></li>
      <li role="presentation"><a href="#image01" data-toggle="tab"><img src="external/images/t-shirt-white.jpg"/></a></li>
      <li role="presentation"><a href="#image02" data-toggle="tab"><img src="external/images/t-shirt-orange.jpg"/></a></li>
      <li role="presentation"><a href="#image03" data-toggle="tab"><img src="external/images/t-shirt-green.jpg"/></a></li>
      <li role="presentation"><a href="#image01" data-toggle="tab"><img src="external/images/t-shirt-white.jpg"/></a></li>
      <li role="presentation"><a href="#image02" data-toggle="tab"><img src="external/images/t-shirt-orange.jpg"/></a></li>
      <li role="presentation"><a href="#image03" data-toggle="tab"><img src="external/images/t-shirt-green.jpg"/></a></li>
    </ul>
  </div>
</div>

然后叫你Js：

$("#js_image_selection").horizontalTabs();

希望它对将来的任何人有所帮助！ 干杯！

Answer 7

一个插件可以在这里找到https://github.com/Casper1131/scroller 它可以用于任何无序列表。

Answer 8

回复：André Lourenço - 很棒的插件，只是想加入一个需要改进的 hack，允许滚动条在窗口调整大小时调整大小（即：旋转移动设备）；

    if(!$(".fixedContainer").length) {
        ul.wrapInner('<div class="fixedContainer" style="height: ' + ops.barheight + 'px; width: ' + tabBarWidth + 'px; overflow: hidden; float: left;"><div class="moveableContainer" style="height: ' + ops.barheight + 'px; width: 5000px; position: relative; left: 0px;"></div></div>');
        ul.append('<div class="leftBtn" style="width: 40px; float: left; height: ' + (ops.barheight - 2) + 'px; margin-left: 5px; margin-right: 0;"></div>');
        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('<div class="rightBtn" style="width: 40px; float: left; height: ' + (ops.barheight - 2) + 'px; margin-left: 1px; margin-right: 0;"></div>');
        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);
    }

然后我在调整窗口大小时再次调用它：

    $(window).resize(function(e){
        $("#tabs").scrollabletab();
    });

这不是最有效的方法，但它目前适用于我的测试目的。

Answer 9

我为此创建了另一个插件。这次使用 Chrome 样式的选项卡大小调整行为。

初始化

$( ".tabpanel" ).tabs().tabs('overflowResize');

Demo

GitHub

Answer 10

在单行显示选项卡时需要处理多种场景和案例。

1. 简单的解决方案是在 ui-tab-header <ul> 周围添加一个 div 并将溢出设置为 scroll。当浏览器处理标签标题的滚动时，此方法开箱即用。但是浏览器提供的默认滚动条看起来很奇怪。所以你需要一个自定义/时尚的滚动条插件。 或
2. 要使用 jQuery UI 选项卡扩展，如下所示：

扩展的 jQuery UI 小部件提供可滚动的选项卡功能，并通过在需要时显示导航控件来自动处理响应式页面大小变化。

特点：

• 它是响应式或流畅的布局
• 支持触摸滑动以滚动浏览触摸设备中的选项卡标题（* 需要外部依赖）
• 完全可定制和基于 css 的样式
• 支持使用关闭按钮删除选项卡
• 不需要额外的 HTML 结构更改，它会自动动态增强标记。

https://davidsekar.github.io/jQuery-UI-ScrollTabs