javascript - jQuery UI 选项卡式小部件在多个选项卡上添加滚动条

Question

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

jsfiddle

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

Answer 1

要开始使用，请查看此 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;}

​