Question

您好我正在使用jquery UI选项卡式窗口小部件，我正在尝试为选项卡创建一个水平滚动条。我创建了代码，以便在选项卡总宽度大于容器时添加新选项卡。问题是标签移动到第二行女巫不是我想要的。我希望他们都保持在同一条线上，然后我将添加2个按钮从左到右滚动。这是我创建的代码：

jsfiddle

正如你从我发布的内容中看到的那样，即使我在容器溢出上添加了标签，也会在第二行上移动：滚动。

Answer 1

由于未设置高度，因此无法应用溢出。如果你限制高度，那么它会将其他标签分类为溢出。

只需添加一些样式，就这样......

<style type='text/css'>
    #tabs_container{
        max-height:70px;
        overflow:scroll;
    }
</style>

希望这有助于：）

Answer 2

为了帮助您入门，请查看此fiddle。

这是额外的JS：

(function() {
    var $tabsCont = $('#tabs_container'),
        $tabs = $tabsCont.children(),
        widthOffset = 10; // The width calculated below is a bit too large...

    $tabsCont.wrap('<div class="tab_cont_wrapper"></div>');
    $tabsCont.width($tabs.length * $tabs.first().width() - widthOffset);
    $tabsCont.height($tabs.first().height());
})();

我会留给你找一个更好的标签宽度计算。

CSS：

#tabs_container {overflow:hidden !important;}
.tab_cont_wrapper {overflow:auto;}

jQuery UI选项卡式小部件在许多选项卡时添加滚动条

2 个答案: