jQuery UI选项卡 - 自动高度

Posted 2021-04-06

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

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

然而，这似乎在jQuery UI 1.5.3中不起作用。

此选项已被删除吗？如果是这样，有另一种方法来获得相同的功能？

答案

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

Equal Heights Plugin

另一答案

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

另一答案

检查网址：

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

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

另一答案

你所要做的就是设置一个最小高度。 （我花了很多年才找到答案......我希望它有所帮助！）。

这是我真正有效的代码：

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

另一答案

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

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

另一答案

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

假设您的标签水平排列：

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

另一答案

加布里埃尔的例子给了我正确的领先优势，但我无法让它完全像那样工作。在查看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());

另一答案

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

另一答案

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

另一答案

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

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

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

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

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

HTH

另一答案

设置选项卡最小高度并将属性调整为无...

例：

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