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

时间：2011-07-12 06:37:52

标签： javascript jquery css user-interface tabs

It appears as multiple line by default.

现在上面的图片是“太多选项卡”的示例，默认情况下显示为多行。

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

10 个答案:

答案 0 :(得分：7)

我对此问题采用了不同的方法，因为我认为标签的滚动是违反直觉的。我创建了一个插件，当标签突破到第二行时进行下拉。

https://github.com/jasonday/plusTabs

答案 1 :(得分：6)

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

enter image description here

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

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

初始化'溢出标签'就像这样简单：

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

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

containerPadding是容器的填充。

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

我已在最新版本的Chrome，Firefox和IE上对此进行了测试。如果您发现任何问题或者可以改进这一点，那么请随意分叉并继续。

现在也可以在GitHub上找到。

答案 2 :(得分：5)

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

答案 3 :(得分：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/

上查看

答案 4 :(得分：3)

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

答案 5 :(得分：2)

我还为它创建了一个 jQuery 插件here，但我主要关注为移动网站创建这样的结构空间，也可以依靠水平滚动触摸以及控制箭头。

解决方案如下所示： 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>

并打电话给你Js：

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

希望它能在未来帮助任何人！ 干杯！

答案 6 :(得分：1)

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

答案 7 :(得分：1)

回复：AndréLourenço - 很棒的插件，只是想投入一个需要精炼的黑客，允许滚动器在窗口调整大小时调整大小（即：旋转移动设备）; 

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

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

答案 8 :(得分：1)

我为此创建了另一个插件。这次使用Chrome样式制表符大小调整行为。

overflowResize

使用

初始化 
$( ".tabpanel" ).tabs().tabs('overflowResize');

Demo

GitHub

答案 9 :(得分：0)

在单行显示标签时，有多种方案和案例需要处理。

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

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

    特点：

    • 响应式或流畅的布局
    • 支持触摸滑动以滚动触摸设备中的标签页眉（*需要外部相关性）
    • 完全可定制的＆amp;基于CSS的造型
    • 支持使用关闭按钮删除标签
    • 不需要额外的HTML结构更改，它会自动增强标记。

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

相关问题
最新问题