logo标签列表

如何使Jquery UI选项卡在选项卡过多时可以水平滚动

javascriptjquerycssuser-interfacetabs
15

默认情况下，标签页过多会出现多行显示。

上面的图片是“太多标签”的一个例子， 默认情况下，它会呈现为多行显示。

但我想让它在一行内水平滚动，可以在第一个标签之前和最后一个标签之后添加两个箭头，也可以自动滚动。

2
我被这个页面上有五种插件解决方案的事实所吸引。 :} 我想知道还有多少其他的解决方案。 - Vael Victus
@VaelVictus在下面的答案中添加了一种新的变体，它可以与最新版本的jQuery UI库一起使用。https://dev59.com/qGw15IYBdhLWcg3wWqj-#45259166 - David Chelliah
10个回答
7

我对这个问题有不同的看法，我认为为标签添加滚动条是不直观的。因此，我创建了一个插件，在标签换行时会自动转变成下拉菜单。

https://github.com/jasonday/plusTabs

2
我更喜欢这种方法。因此，我分叉了Jason的代码，并将其更新为允许尽可能多的选项卡显示在插入剩余选项卡到下拉选项卡之前。干杯。https://github.com/recarv/plusTabs - Ross
嘿@Ross，这是我为插件的下一步计划。你有演示吗？你想提交更改吗？我想将其配置为true/false。 - Jason
6
我最近在寻找解决方案，但是其他插件/示例似乎都无法与jQuery 1.9+配合使用。我认为Jason的答案中创建“更多”选项卡并将任何额外的选项卡显示为下拉菜单提供了最佳的UI体验。因此，我扩展了他的答案，并创建了一个jQuery插件，用于扩展jQuery UI选项卡。如果所有选项卡的总宽度超过选项卡容器的宽度，则将额外选项卡组合在下拉列表中。
您可以查看JSFiddle演示来查看其实际效果。尝试调整浏览器窗口大小以查看其工作情况。
或者您可以在JSFiddle上查看完整的插件代码。
初始化“Overflow Tabs”非常简单：
$("#tabs").tabs({
    overflowTabs: true,
    tabPadding: 23, 
    containerPadding: 40,
    dropdownSize: 50
});

tabPadding 表示标签文字周围的像素填充数。

containerPadding 是容器的填充。

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

我已经在最新版的 Chrome、Firefox 和 IE 上测试过了。如果您发现任何问题或可以改进，欢迎分支并进行修改。

现在还可以在 GitHub 上获取。

很棒的解决方案。您有计划将代码放到GitHub上吗？ - dma_k
如果您能回答更多我的问题，我将不胜感激。(1)为什么需要配置tabPadding？它不能从<li>元素的outerWidth计算出来吗？您的jFiddle演示说明padding-left|right为0.5em，而代码则说明tabPadding: 23(px)-这并不明显1em = 24px。同样的问题也适用于containerPadding。 - dma_k
好的，我已经发现了一些固定的其他错误，也许还有一些。这是我的版本。它还有一些额外的功能：一些选项卡是“可关闭”的，还有一个“全部关闭”按钮。最棘手的问题是如何计算列表中隐藏元素的宽度。原始函数 _textWidth 太过复杂，因为它计算了 <li> 子元素的宽度（？），因此需要 tabPadding 参数才能正确运行。解决方案：设置 .ui-tabs li {display: inline-block; } 并将所有填充、边距、边框应用于 .ui-tabs 内部的 li 和子元素。 - dma_k
这次是另一种版本，使用了jquery-resize和jquery-throttle-debounce插件。 - dma_k
5
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/以了解更多关于编程方面的内容。

我很喜欢你在这里所做的。我的一个建议是，将你的li元素包裹在div内是无效的html。相反，考虑使用带有divs的整个ul元素。 - Joel Harris
3
因为JQuery UI Tabs需要将选项卡和下面的内容放在同一个DIV中，而其他滚动插件通常需要一个DIV来包含要滚动的对象。所以这个冲突让我很难使用任何插件。 - Aloong
2
我还为此创建了一个jQuery插件，可以在这里找到：https://github.com/LucasLazaro/bootstrap-nav-tab-scrollable。但我的主要重点是为移动网站创建这样的结构，因为它们的空间很小，可以依靠水平滚动和触摸控制箭头。

解决方案如下图所示： enter image description here

我正在使用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>

并在您的JavaScript中调用：

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

希望这能对未来任何人有所帮助！祝好！
1
我为此创建了另一个插件。这次使用Chrome风格的选项卡调整大小行为。

overflowResize

使用以下代码进行初始化

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

演示

GitHub

1

针对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();
    });

这不是最有效的方法，但目前对我的测试目的来说可行。

1
0

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

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

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

特点：

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

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接