jquery - jQuery UI tabs: add scrolling controls when too many tabs

Question

是否有更好的方式/扩展 ui 选项卡可以在选项卡太多时处理/提供滚动选项卡的控件？

我找到了一些，但它们不适用于最新的 jquery-ui-1.10.3。例如.. Jizmoz Tabs在选项中要好得多，但不适用于新的 ui 或 jquery 1.9.1。

还有其他建议吗？

Jizmoz 选项卡 JSFIDDLE：

$("#tabs").tabs({
    scrollable: true,
    changeOnScroll: false,
    closable: true
});

Answer 1

这条单行就像魔术一样工作：

$(".ui-tabs-nav").hover(function () { $(this).css("height", "auto"); $(this).css("overflow", "hidden"); $(this).css("overflow", "auto"); }, function () { $(this).animate({ height: "32px" }, 600); });

它仅在将鼠标悬停在选项卡标题上时显示完整选项卡，否则仅显示第一行选项卡（默认为 32 像素，但可根据您的需要进行更改）。

Answer 2

使用这个库。jquery-migrate-1.2.1.js 应该被引用。使用示例：

    $("#tabs").xtabs({
        scrollable: true,
        changeOnScroll: false,
        closable: true
    });

这是更新的 Jizmoz 选项卡 JSFIDDLE，它也是第一个版本的更改的jquery 可滚动选项卡。我将它与 jquery-2.1.1 一起使用，一切正常。

Answer 3

看看这些链接

第二个链接可能会有所帮助

http://riteshsblog.blogspot.in/2011/09/jquery-ui-tab-scroller-plugin.html

[http://jsfiddle.net/Bua2d]

Answer 4

replace "_super._create.apply(self);", with "self._superApply(self);"
replace "_super._update.apply(self);", with "self._superApply(self);"

它有效，但有一些错误。

Answer 5

我为此创建了一个插件，它使用 Chrome 样式的选项卡调整大小行为。

初始化

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

演示

GitHub