jQuery UI选项卡：如果选项卡太多，添加滚动控件

Question

是否有更好的ui tabs扩展程序可以处理/提供滚动选项卡控件，当选项卡太多时？

我发现了一些，但它们不适用于最新的jquery-ui-1.10.3。 例如..Jizmoz Tabs在选项上更好，但不适用于新的ui或jquery 1.9.1。

还有其他建议吗？

Jizmoz Tabs JSFIDDLE：

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

- django

---

可能不是你想要的，但你可以尝试使用 Twitter Bootstrap 标签页 http://getbootstrap.com/ 它可能没有标签滚动条，但它非常响应式。无法适应的标签将会移动到下方。 - Trevor

这绝对是做这件事的最佳解决方案。但正如你所说，它只适用于指定版本：...有人能重构它以适应最新版本的jquery和ui吗？那将是太棒了！ - Kreker

请查看 http://aamirafridi.com/jquery/jquery-scrollable-tabs 上的演示，网址为 http://jquery.aamirafridi.com/jst/#examples。 - Aamir Afridi

我的回答在 https://dev59.com/qGw15IYBdhLWcg3wWqj-#23802234 可能会对其他寻找类似功能的人有所帮助。这是一个插件，为任何不适合的选项卡添加了一个下拉菜单。 - Paul Blundell

看看这个插件 https://dev59.com/qGw15IYBdhLWcg3wWqj-#45259166。适用于最新版本。 - David Chelliah

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

它仅在悬停选项卡标题时显示完整选项卡，否则仅显示选项卡的第一行（默认为32px，但可更改以适应您的需求）。

- Karlth

Answer 2

请使用this库。应该引用jquery-migrate-1.2.1.js。使用示例：

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

这是更新后的Jizmoz Tabs JSFIDDLE，也是第一版更改后的jquery可滚动标签页。我正在使用它与jquery-2.1.1一起使用，一切工作正常。

- Mardok

Answer 3

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

它可以工作，但有一些错误。

- Linand

---

你能稍微解释一下你的代码吗？你说的是哪些错误？ - brodoll

Answer 4

我为此创建了一个插件，它使用Chrome风格的选项卡调整行为。

初始化为：

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

演示

GitHub

- Adam Jimenez

Answer 5

看看这些链接

第二个链接可能会有帮助

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

[http://jsfiddle.net/Bua2d]

- Prasath