jQuery UI 标签 - 自动高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/436587/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery UI Tabs - Automatic Height
提问by Ben
In previous versions of jQuery tabsthere was an option to automatically set the height of the tab to that of the tallest tab in the group using:
在以前的版本中，jQuery tabs有一个选项可以使用以下选项自动将选项卡的高度设置为组中最高的选项卡的高度：
$('#container').tabs({ fxAutoHeight: true });
However this does not seem to work in jQuery UI 1.5.3.
但是，这似乎不适用于jQuery UI 1.5.3.
Has this option been removed? If so is there another way to get the same functionality?
这个选项被删除了吗？如果是这样，是否有另一种方法可以获得相同的功能？
采纳答案by Corey Downie
It looks like it's no longer there, check out this plugin for the same functionality
看起来它不再存在，请查看此插件以获取相同的功能
回答by Lee Alesbrook
All you have to do is to set a min-height. (It's taken me ages to find the answer to this .. I hope it helps!).
你所要做的就是设置一个最小高度。（我花了很长时间才找到答案。我希望它有所帮助！）。
Here is my code that really works:
这是我真正有效的代码：
$("#tabs").tabs().css({
'min-height': '400px',
'overflow': 'auto'
});
回答by Jonn
回答by gabriel
After reading over the documentation, it seems that option is no longer available. However, it is very easy to replicate this functionality.
阅读完文档后，似乎该选项不再可用。但是，复制此功能非常容易。
Assuming your tabs are arranged horizontally:
假设您的选项卡水平排列：
$("ul.tabs a").css('height', $("ul.tabs").height());
回答by spier
The example by gabriel gave me the right lead but I could not get it to work exactly like that. When looking at the source code exampleof the jQuery documentation you see that the HTML code is supposed to look like this:
gabriel 的例子给了我正确的引导，但我无法让它完全像那样工作。查看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>
As I have 3 tabs which have content that is rather static, for me it was enough to set the height of all tabs to the height of the highest one, which is #fragment-1 in my case.
由于我有 3 个标签的内容相当静态，对我来说，将所有标签的高度设置为最高的高度就足够了，在我的例子中是 #fragment-1。
This is the code that does this:
这是执行此操作的代码：
$("#tabs div.ui-tabs-panel").css('height', $("#fragment-1").height());
回答by AJSeidl
The answer by Giannis is correct for getting the tallest height among the tabs, but is missing the code to actually apply that solution. You need to add a way to redisplay the first tab (which will be disappeared by the code) and a way to set the height of each of the content areas.
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);
回答by Pavel
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');
});
回答by Karan Dembla
Set tab minimum height and resize property to none...
将选项卡最小高度和调整大小属性设置为无...
example:
例子：
$("#tab").tabs().css({'resize':'none','min-height':'300px'});
回答by Ross
I was just looking for this solution, and setting a min-height is only good if you know how high the min height should be in advance.
我只是在寻找这个解决方案，并且只有在您事先知道最小高度应该有多高时才可以设置最小高度。
Instead, I went into the css and changed the ui-tabs class to add "overflow:auto;" as below
相反，我进入了 css 并更改了 ui-tabs 类以添加“溢出：自动；” 如下
.ui-tabs { overflow: auto; position: relative; padding: .2em; zoom: 1; }
This works for me in FF12...I haven't tried it in others. If this works, you may wish to create a separate class to preserve stock functionality and theming interchangeability etc
这在 FF12 中对我有用......我还没有在其他人中尝试过。如果可行，您可能希望创建一个单独的类来保留库存功能和主题互换性等
BTW - the reason you might need dynamic sizing is if you're loading from Ajax, but not using the tab loader method, but rather another function (their method assumes you content is all coming from one url resource which may not be sufficient depending on how advanced you dynamic population is).
顺便说一句 - 您可能需要动态调整大小的原因是，如果您从 Ajax 加载，但不使用选项卡加载器方法，而是使用另一个功能（他们的方法假定您的内容都来自一个 url 资源，这可能不够，具体取决于你的动态人口有多先进）。
HTH
HTH
回答by David Hardy
Check the url:
检查网址：
http://api.jqueryui.com/tabs/#option-heightStyle
http://api.jqueryui.com/tabs/#option-heightStyle
$("#tabs").tabs({ heightStyle: "fill" });
