jQuery UI选项卡：在太多标签时添加滚动控件答案

【问题标题】：jQuery UI tabs: add scrolling controls when too many tabsjQuery UI选项卡：在太多标签时添加滚动控件
【发布时间】：2013-10-08 16:10:34
【问题描述】：

是否有更好的方式/扩展 ui 标签可以在标签过多时处理/提供滚动标签的控件？

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

还有其他建议吗？

Jizmoz Tabs JSFIDDLE:

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

【问题讨论】：

可能不是您想要的，但您可以尝试 twitter-bootstrap 标签getbootstrap.com 它可能没有标签滚动，但响应速度非常快。不适合的标签将向下移动。..
这是迄今为止最好的解决方案。但是就像你说的只适用于指定的版本：\ ...任何人都可以为jquery和ui的最后一个版本重构它吗？那太棒了！
在jquery.aamirafridi.com/jst/#examples查看aamirafridi.com/jquery/jquery-scrollable-tabs演示
我在stackoverflow.com/a/23802234/1290196 的回答可能会让其他寻找类似内容的人感兴趣。这是一个插件，可为任何不适合的选项卡添加下拉菜单。
看看这个插件stackoverflow.com/a/45259166/2952405。适用于最新版本

标签： jquery jquery-ui tabs jquery-ui-tabs

【解决方案1】：

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

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

这是更新的 Jizmoz Tabs JSFIDDLE，它也是第一个版本的更改 jquery scrollable tab。我将它与 jquery-2.1.1 一起使用，一切正常。

【讨论】：

【解决方案2】：

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

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

它只在将鼠标悬停在标签标题上时显示完整的标签，否则它只显示第一行标签（默认为 32px，但可以根据您的需要进行更改）。

【讨论】：

【解决方案3】：

看看这些链接

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

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

[http://jsfiddle.net/Bua2d]

【讨论】：

【解决方案4】：

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

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

【讨论】：

你能解释一下你的代码吗？你在说什么错误？

【解决方案5】：

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

初始化

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

Demo

GitHub

【讨论】：