18

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

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

但是，这似乎不适用于jQuery UI 1.5.3.

这个选项被删除了吗？如果是这样，还有其他方法可以获得相同的功能吗？

4

11 回答 11

32

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

这是我真正有效的代码：

$("#tabs").tabs().css({
   'min-height': '400px',
   'overflow': 'auto'
});
于 2012-03-04T23:19:38.293 回答
6

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

$( ".selector" ).tabs({ heightStyle: "auto" });
于 2013-01-14T03:25:48.333 回答
5

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

假设您的选项卡水平排列：

$("ul.tabs a").css('height', $("ul.tabs").height());
于 2009-01-12T20:05:41.667 回答
4

看起来它不再存在了，查看这个插件以获得相同的功能

等高插件

于 2009-01-12T20:19:38.533 回答
1

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>

因为我有 3 个选项卡的内容相当静态，所以对我来说，将所有选项卡的高度设置为最高选项卡的高度就足够了，在我的例子中是 #fragment-1。

这是执行此操作的代码：

$("#tabs div.ui-tabs-panel").css('height', $("#fragment-1").height());
于 2010-09-22T22:19:29.347 回答
1

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);
于 2011-10-05T07:42:52.847 回答
1 
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');
            });
于 2011-11-03T13:25:04.530 回答
1

将选项卡最小高度和调整大小属性设置为无...

例子：

$("#tab").tabs().css({'resize':'none','min-height':'300px'});
于 2011-11-26T07:27:09.987 回答
1

我只是在寻找这个解决方案，只有在您知道最小高度应该提前多高的情况下，设置最小高度才是好的。

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

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

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

顺便说一句-您可能需要动态调整大小的原因是，如果您从 Ajax 加载，但不使用选项卡加载器方法，而是使用另一个函数（他们的方法假设您的内容全部来自一个 url 资源，这可能还不够，具体取决于你的动态人口有多先进）。

高温高压

于 2012-05-03T16:05:47.870 回答
0 
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');
});
于 2010-05-11T08:07:04.033 回答
0

检查网址：

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

$("#tabs").tabs({ heightStyle: "fill" });
于 2014-01-16T19:58:10.613 回答