Question

在以前版本的jQuery tabs中，有一个选项可以使用以下选项自动将选项卡的高度设置为组中最高选项卡的高度：

$('#container').tabs({ fxAutoHeight: true });

然而，这似乎不适用于jQuery UI 1.5.3。

此选项已删除吗？如果有，还有另一种方法可以获得相同的功能吗？

Answer 1

您所要做的就是设置最小高度。（我花了很长时间才找到答案。我希望它有所帮助！）。

这是我真正有效的代码：

$("#tabs").tabs().css({
   'min-height': '400px',
   'overflow': 'auto'
});

Answer 2

在jQuery 1.9中，使用heightStyle属性（docs here）

$( ".selector" ).tabs({ heightStyle: "auto" });

Answer 3

阅读the documentation后，似乎该选项不再可用。但是，复制此功能非常容易。

假设您的标签水平排列：

$("ul.tabs a").css('height', $("ul.tabs").height());

Answer 4

看起来它不再存在，请查看此插件以获取相同的功能

Equal Heights Plugin

Answer 5

加布里埃尔的例子给了我正确的领导，但是我无法让它完全像那样工作。在查看jQuery文档的source code example时，您会看到HTML代码应该如下所示：

<div id="tabs">
   <ul>
       <li><a href="#fragment-1"><span>One</span></a></li>
       <li><a href="#fragment-2"><span>Two</span></a></li>
       <li><a href="#fragment-3"><span>Three</span></a></li>
   </ul>
   <div id="fragment-1">
       <p>First tab is active by default:</p>
       <pre><code>$('#example').tabs();</code></pre>
   </div>
   ...
</div>

由于我有3个内容相当静态的标签，对我而言，将所有标签的高度设置为最高标签的高度就足够了，在我的情况下是＃fragment-1。

这是执行此操作的代码：

$("#tabs div.ui-tabs-panel").css('height', $("#fragment-1").height());

Answer 6

Giannis的答案对于获得选项卡中最高的高度是正确的，但是缺少实际应用该解决方案的代码。您需要添加一种方法来重新显示第一个选项卡（代码将消失）以及设置每个内容区域高度的方法。

var height = 0;
//Get the highest height.
$("#tables .ui-widget-content").each(function(){
    $(this).removeClass('ui-tabs-hide');
    var oheight = height; //used to identify tab 0
    if(height < $(this).height())
    {
        height = $(this).height();
    }
    if(oheight != 0)
    {
        $(this).addClass('ui-tabs-hide');
    }
});
//Apply it to each one...
$("#tables .ui-widget-content").height(height);

Answer 7

var biggestHeight = 0;
jQuery.each($(this).find(".ui-tabs-panel"),
            function (index, element) {      
                var needAppend = false;
                if ($(element).hasClass('ui-tabs-hide')) {
                    $(element).removeClass('ui-tabs-hide');
                    needAppend = true;
                }

                if ($(element).height() > biggestHeight)
                    biggestHeight = $(element).height();

                if (needAppend)
                    $(element).addClass('ui-tabs-hide');
            });

Answer 8

设置标签最小高度并将属性调整为无...

示例：

$("#tab").tabs().css({'resize':'none','min-height':'300px'});

Answer 9

我只是在寻找这个解决方案，如果你知道最小高度应该提前多高，设置一个最小高度是好的。

相反，我进入了css并更改了ui-tabs类以添加“overflow：auto;”如下

.ui-tabs { overflow: auto; position: relative; padding: .2em; zoom: 1; }

这在FF12中对我有用......我没有在其他人中尝试过。如果这样做，您可能希望创建一个单独的类来保留库存功能和主题互换性等

BTW - 你可能需要动态调整大小的原因是你是从Ajax加载，而不是使用tab加载器方法，而是使用另一个函数（他们的方法假设你的内容都来自一个url资源，可能不是足够取决于你的动态人口有多高级）。

HTH

Answer 10

var height = 0;

$("#tabs .ui-widget-content").each(function(){
    $(this).removeClass('ui-tabs-hide');
        if(height < $(this).height())
            height = $(this).height();
    $(this).addClass('ui-tabs-hide');
});

Answer 11

检查网址：

http://api.jqueryui.com/tabs/#option-heightStyle

$("#tabs").tabs({ heightStyle: "fill" });

jQuery UI选项卡 - 自动高度

11 个答案: