jQuery UI的标签 - 自动高度

Question

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

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

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

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

Answer 1

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

Equal Heights Plugin

Answer 2

看过the documentation后，看起来该选项不再可用。但是，复制这个功能非常容易。

假设你的标签水平排列：

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

Answer 3

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 4

加布里埃尔的例子给了我正确的领导，但是我无法完全像那样工作。当在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 5

由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 6

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 7

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

例如：

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

Answer 8

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

这里是我的代码中真正起作用的：

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

Answer 9

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

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

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

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

顺便说一句 - 你可能需要动态调整大小的原因是，如果你从Ajax加载，但不使用Tab加载方法，而是另一个功能（他们的方法假定你的内容全部来自一个url资源，根据你的动态人口的发展程度，这可能是不够的）。

HTH

Answer 10

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

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

Answer 11

查询的网址：

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

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