jQuery UI的标签 - 自动高度

Question

在jQuery tabs的先前版本有自动的标签的高度设置为，使用该组中的最高的选项卡的选项：

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

然而，这似乎并没有在jQuery UI 1.5.3工作。

有这个选项被删除？如果是的话是有另一种方式来获得相同的功能？

Answer 1

它看起来不再有，看看这个插件相同的功能

相等的高度插件

Answer 2

所有你所要做的是设定一个最小高度。 （这是我花了年龄找到这个问题的答案。我希望它能帮助！）。

下面是我的代码中真正起作用的：

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

Answer 3

在jQuery的1.9，使用heightStyle属性（此处 文档）

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

Answer 4

读数超过的文档后，似乎选项不再可用。然而，这是很容易复制此功能。

假设标签页被水平地布置：

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

Answer 5

加布里埃尔的例子给了我正确的领先，但我无法得到它的工作完全一样的。当在源代码示例 jQuery的文档，你看到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个选项卡，其具有的内容是相当静态的，对我来说是足够的所有选项卡的高度设置为最高之一的高度，这是＃片段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

如果你知道的最低高度应该有多高，提前

我只是在寻找这种解决方案，并设置最小高度只有好的。

相反，我走进了CSS，改变了用户界面的选项卡类添加“溢出：汽车;”如以下

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

这在FF12对我的作品......我没有在别人尝试过。如果一切正常，你可能希望创建一个独立的阶级为维护股价的功能和主题化互换性等

顺便说一句 - 你可能需要动态调整大小的原因是，如果你从阿贾克斯加载，但不使用标签加载方法，而是另一个函数（他们的方法可以让你的内容都来自这可能不是一个URL资源来足够取决于如何先进你动态人口）。

HTH

Answer 9

设置标签最小高度和调整大小属性为无...

示例：

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

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