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

タブの中で最も高い高さを取得するための 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

私はちょうどこの解決策を探していました.min-heightを設定することは、min-heightがどれだけ高くなければならないかを事前に知っている場合にのみ有効です.

代わりに、css に入り、ui-tabs クラスを変更して「overflow:auto;」を追加しました。以下のように

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

これはFF12でうまくいきます...他の人では試していません。これが機能する場合は、別のクラスを作成して、ストック機能とテーマの互換性などを維持することをお勧めします。

ところで-動的なサイズ変更が必要になる理由は、Ajaxからロードしているが、タブローダーメソッドではなく別の機能を使用している場合です(それらのメソッドは、コンテンツがすべて1つのURLリソースからのものであると想定しています。動的集団がどれほど進んでいるか）。

HTH

于 2012-05-03T16:05:47.870 に答える
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

タブの最小の高さとサイズ変更プロパティを none に設定...

例：

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

ガブリエルの例は正しいリードを与えてくれましたが、そのように動作させることはできませんでした. 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 に答える
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

URL を確認してください:

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

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