web-dev-qa-db-ja.com

jQuery UIタブ-自動高さ

以前のバージョンのjQuery tabsでは、次のコマンドを使用して、タブの高さをグループ内で最も高いタブの高さに自動的に設定するオプションがありました。

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

ただし、これはjQuery UI 1.5.3では機能しないようです。

このオプションは削除されましたか？もしそうなら、同じ機能を取得する別の方法はありますか？

jqueryjquery-uitabsjquery-ui-tabs
18
Ben

もう存在しないようです。このプラグインで同じ機能を確認してください

等しい高さプラグイン

4
Corey Downie

あなたがしなければならないすべては、最小の高さを設定することです。 （これへの答えを見つけるのに私は年齢を重ねました..それが役に立てば幸いです！）.

これが実際に機能する私のコードです：

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

JQuery 1.9では、heightStyle属性を使用します（ ドキュメントはこちら ）

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

ドキュメント を読んだ後、オプションが利用できなくなったようです。ただし、この機能を複製するのは非常に簡単です。

タブが水平に配置されていると仮定します：

$("ul.tabs a").css('height', $("ul.tabs").height());
5
gabriel
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');
            });
1
Pavel

ガブリエルの例は私に正しいリードを与えましたが、私はそれをそのように正確に機能させることができませんでした。 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());
1
spier

私はこのソリューションを探していましたが、最小高さの設定は、事前に最小高さをどれだけ高くすべきかわかっている場合にのみ有効です。

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

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

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

ところで、動的なサイズ変更が必要になる理由は、Ajaxからロードしているが、タブローダーメソッドではなく別の関数を使用している場合です（これらのメソッドは、コンテンツがすべて1つのURLリソースからのものであり、動的人口はどれだけ進んでいるか）。

HTH

1
Ross

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);
1
AJSeidl

タブの最小の高さを設定し、プロパティのサイズを変更しない...

例：

$("#tab").tabs().css({'resize':'none','min-height':'300px'});
1
Karan Dembla
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');
});
0
Giannis

URLを確認してください：

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

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