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

How to make Jquery UI Tabs scroll horizontally if there are too many tabs

提问by Aloong

Now the image above is an example of " too many tabs ", It appears as multiple line by default.

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

But I want to make it in a single line and horizontally scrollable, either adding two arrows before the beginning tab and after the last tab, or scroll automatically are OK.

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

回答by Jason

I have a different approach to this issue, as I think a scroll for the tabs is counter-intuitive. I created a plugin to do a dropdown when the tabs break to a second line.

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

https://github.com/jasonday/plusTabs

https://github.com/jasonday/plusTabs

回答by Paul Blundell

I was recently looking for a solution to this but none of the other plugins / examples seemed to work with jQuery 1.9+, I also think that Jason's answer of creating a 'more' tab and displaying any extra tabs as a drop down provides the best UI experience, and so I expanded on his answer and created a jQuery plugin for 1.9+that extends jQuery UI tabs, if the total width of all of the tabs exceeds the width of the tabs container then the additional tabs are grouped together in a dropdown.

我最近正在寻找解决方案，但其他插件/示例似乎都不适用于 jQuery 1.9+，我还认为 Jason 创建一个“更多”选项卡并将任何额外选项卡显示为下拉菜单的答案提供了最好的UI 经验，因此我扩展了他的回答并为1.9+创建了一个 jQuery 插件，它扩展了 jQuery UI 选项卡，如果所有选项卡的总宽度超过选项卡容器的宽度，则附加选项卡将组合在一个下拉列表中.

You can see the JSFiddle Demoto see it in action. Try resizing your browser window to see it working.

您可以查看JSFiddle Demo以查看它的运行情况。尝试调整浏览器窗口的大小以查看它是否正常工作。

Or you can view the full plugin code at JSFiddle.

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

Initialising 'Overflow Tabs' is as simple as this:

初始化“溢出选项卡”就像这样简单：

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

tabPaddingis the number of pixels of padding around the text in a tab.

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

containerPaddingis the padding of the container.

containerPadding是容器的填充。

dropdownSizeis the pixel size of the dropdown selector button

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

I have tested this on the latest versions of Chrome, Firefox, and IE. If you spot any issues or can improve this then feel free to fork it and go ahead.

我已经在最新版本中测试了这个Chrome，Firefox和IE。如果您发现任何问题或可以改进这一点，请随时将其分叉并继续。

Now also available on GitHub.

现在也可以在GitHub上找到。

回答by Digs

None of the plugins listed here quite worked for me (most are outdated and not compatible with jQuery 2.0+) but I eventually found this: https://github.com/joshreed/jQuery-ScrollTabs...worth adding to the list.

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

回答by André Louren?o

I've just made a very simple plugin for this. Basically you have to add one fixed length div and a moveable one to the tab navigator.

我刚刚为此制作了一个非常简单的插件。基本上，您必须向选项卡导航器添加一个固定长度的 div 和一个可移动的 div。

Plugin code:

插件代码：

(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);

Check it out at http://jsfiddle.net/Bua2d/

在http://jsfiddle.net/Bua2d/查看

回答by Simeon

Here is a plugin for that: http://jquery.aamirafridi.com/jst/

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

回答by Lucas Lazaro

I've also created an jQueryplugin for it here, but my main focus was on creating such structure for mobile sitesthat have little space and could rely also on scrolling horizontally with touchas well as control arrows.

我还在这里为它创建了一个jQuery插件，但我的主要重点是为空间很小并且还可以依靠触摸和控制箭头水平滚动的移动站点创建这样的结构。

The solution looks like the following:

解决方案如下所示：

I'm using Bootstrapand to implement the plugin you basically need to include:

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

In you HTML the following structure so the arrows can work correctly (I'm using font-awesome for them)

在您的 HTML 中，以下结构使箭头可以正常工作（我为它们使用了字体真棒）

 <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>

And call in you Js:

并叫你 Js：

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

Hope it helps anyone in the future! Cheers!

希望它可以帮助将来的任何人！干杯!

回答by Christopher Thomas

One plugin can be found here https://github.com/Casper1131/scrollerit can be used for any undordered list.

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

回答by viperaus

Re: André Louren?o - Great addon, just wanted to throw in a hack that needs refining that allows the scroller to resize on window resize (ie: rotate mobile device);

回复：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);
    }

Then I call it again on window resize ie:

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

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

Not the most efficient way to do it, but it works for my testing purposes at the moment.

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

回答by Adam Jimenez

I created yet another plugin for this. This time using Chrome style tab-resizing behaviour.

我为此创建了另一个插件。这次使用 Chrome 风格的标签调整行为。

Initialize with

初始化为

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

Demo

演示

GitHub

GitHub

回答by David Chelliah

There are multiple scenarios and cases to handle when showing tabs on single line.

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

1. Simple solution would be to add a divaround the ui-tab-header <ul>and set the overflow as scroll. This method works out of box as the browser handles the scrolling through the tab headers. But the default scrollbar provided by browser will look odd. So you need a customize/stylish scrollbar addon. OR
2. To use an jQuery UI tabs extension like the below one:

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

Extended jQuery UI widget that offers scroll-able tab feature and does automatically handle responsive page size changes by showing navigation controls when required.

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

Features:

特征：

• It is responsive or fluid layouts
• Has support for touch swipe to scroll through tab headers in touch devices (* requires external dependency)
• Fully customizable & css based styling
• Supports removal of tabs using close button
• No extra HTML structure changes required, it automatically enhances the markups on the fly.

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

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

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