jQuery UI选项卡 – 自动高度

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

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

但是这似乎在jQuery UI 1.5.3不起作用。

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

Answer 1

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

Equal Heights插件

Answer 2

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

这是我真正有效的代码：

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

Answer 3

在jQuery 1.9中，使用heightStyle属性（ 此处为docs ）

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

Answer 4

阅读完文档后 ，似乎该选项不再可用。 但是，复制此function非常容易。

假设您的标签水平排列：

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

Answer 5

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

 
 
 
One
 
Two
 
Three
 
 
 
First tab is active by default:
 
$('#example').tabs();

 ... 
 
 由于我有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

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

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

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

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

BTW – 你可能需要动态resize的原因是你是从Ajax加载，而不是使用tab加载器方法，而是使用另一个函数（他们的方法假设你的内容全部来自一个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

检查url：

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

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