3

100% の高さを形成するために jquery タブをどのように設定しますか?

また、その中の iframe のサイズを変更して、高さ 100% に拡張する必要があります。

ありがとう！

4

5 に答える 5

6

UI タブ (少なくとも最新の 1.7.2 バージョン) のサイズを変更するには、次のコードを使用します。

$ (document).ready (function () {
function resizeUi() {
    var h = $(window).height();
    var w = $(window).width();
    $("#tabs").css('height', h-95 );
    $(".ui-tabs-panel").css('height', h-140 );
};

var resizeTimer = null;
$(window).bind('resize', function() {
    if (resizeTimer) clearTimeout(resizeTimer);
    resizeTimer = setTimeout(resizeUi, 100);
});
resizeUi();
}

加えて次の css:

#tabs { 
    display: inline-block; 
    width:325px;
}

必要に応じていくつかの数値を編集する必要があります。

于 2009-10-26T16:47:35.120 に答える
3

他の誰かに役立つことがあれば、常に完璧な高さを得るために、「表示」と「追加」にいくつかのコールバックを追加しました。私の場合、一番上のコンテナには「ui-layout-pane」というクラスがありますが（jquery レイアウトを使用しているため）、どのクラスでも機能するはずです。

myTab = $("#tabs").tabs({
    show: function(e,ui){
        var $c = $(ui.panel), h = parseInt($(ui.tab).parent().outerHeight());
        while ( $c.length > 0 && !$c.hasClass("ui-layout-pane") ){
            h += ( $c.outerHeight(true) - $c.innerHeight() );
            $c = $c.parent();
        }
        h = parseInt($c.innerHeight() - h );
        $(ui.panel).height(h);
        return true;
    },
    add: function(e,ui){
        $(this).tabs("select",ui.index);
    }
});
于 2011-11-20T15:51:08.760 に答える
0

CSSだけで確実に（クロスブラウザで）できるとは思いません。

おそらく、jquery を使用してページの高さを取得し、各要素を次のように設定する必要があります。

$(window).resize(function() {
   var wh = parseInt($(window).height());

   if ($.browser.opera) {
      wh = $.browser.version > "9.5" ? document.documentElement["clientHeight"] : wh;
   }

   $('#elementid').css("height", wh);
});
于 2009-07-24T09:09:03.750 に答える
-2

高さ:100% の div を使用して、タブのコンテンツを展開して画面の高さ全体をカバーすることができます。

iframe のサイズ変更については、こちらを参照してください。

于 2009-07-24T07:43:13.437 に答える
-3

CSSメソッドを使用して高さプロパティを設定してみましたか:

$("#ID OF YOUR TAB ELEMENT").css("height","100%");
于 2009-07-24T07:41:55.313 に答える