0

嗨，我正在使用 jquery UI 选项卡式小部件，我正在尝试为选项卡创建一个水平滚动条。我创建了代码以在选项卡总宽度大于容器时在单击时添加新选项卡。问题是选项卡移动到第二行女巫不是我想要的。我希望它们都留在同一行，稍后我将添加 2 个按钮从左到右滚动。这是我创建的代码：

jsfiddle

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

4

2 回答 2

1

无法应用溢出，因为未设置高度。如果您限制高度，那么它将其他选项卡归类为溢出。

只需简单地添加一些样式，就像这样......

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

希望这有帮助:)

于 2012-08-05T17:42:41.613 回答
1

为了让您入门，请查看此小提琴。

这是附加的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;}

​</p>

于 2012-08-05T18:22:00.560 回答