jQuery UI选项卡 - 自动高度

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery UI选项卡 - 自动高度相关的知识,希望对你有一定的参考价值。

在以前版本的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'});

以上是关于jQuery UI选项卡 - 自动高度的主要内容,如果未能解决你的问题,请参考以下文章

jquery ui 选项卡上滑效果

如何在不同 jquery ui 选项卡中的 gridviews 中使用 jquery Datatable 插件?

将加载图形添加到 JQuery UI Ajax 选项卡?

Jquery ui 工具 - 选项卡窗格一次全部显示

Jquery&JS简单选项卡

jQuery UI选项卡 - 如何在悬停上选择选项卡