1

これは奇妙なものです。AJAX 経由で読み込まれる一連の jQuery UI タブがあります。タブのコンテンツが読み込まれて準備ができたら起動するはずの load イベントは、コンテンツの高さが計算された後に発生する場合と、高さが計算される前に発生する場合があります。

状況は次のとおりです。最初のタブには 2 つの.resizable()div が含まれています。中央の線を左右にドラッグして、一方または他方のパネルを大きくすることができます。それらを機能させる唯一の方法は、それらを完全に配置することでした。

問題は、それらが絶対的に配置されているため、含まれている div がそれらの高さに自動的に調整できないことです。内部に収まるようにするには、最初に高さを確認し (コンテンツは動的であるため、高さが変わる可能性があります)、それを含む div の高さをその高さより 70 ピクセル高くする必要があります。これは単純な関数です:

function setTabHeight() {
    // The problem is only with Tab1, because of the absolute positioning. Any other tab, height can be set automatically.
    if ($("#tabs").tabs('option', 'active') != 0) { $("#tabs").height('auto'); return false; }
    // Tab1 contains two side-by-side divs, which we'll call "east" and "west".
    // This figures out which is taller and makes the containing div taller than that.
    var westDiv = $("#westDiv").height();
    var eastDiv = $("#eastDiv").height();
    if (westDiv > eastDiv) { $("#tabs").height(westDiv + 70); }
    else { $("#tabs").height(eastDiv + 70);
}

その関数を次のように呼び出します。

$(#tabs).tabs({
    load: function (e, ui) {
        [a bunch of other code, mostly the call to .resizable()]
        setTabHeight();
    }
});

ただし、機能する場合と機能しない場合があります。私はそこに座ってまったく同じ情報をリロードできますが、含まれている div が調整されることもあれば、調整されないこともあります。load 関数の最後に置きconsole.log($('#westDiv').height())ますが、div の高さを知っている場合もあれば、その高さがゼロであると判断する場合もあります。

私が到達できる唯一の結論は、jQuery UI タブのロード イベントは、内部の div の高さが計算されるよりも少しだけ速く発生するということです。を使用して動作させることはできますがsetTimeout(setTabHeight, 10)、それは非常に厄介なように思えます。また、私の任意の 10 ミリ秒が間違っていることが判明した場合、低速のコンピューターを使用しているユーザーでも問題が発生する可能性があるのではないかと心配しています。

より一般的な解決策、具体的には、要素の高さが計算された後にのみ関数を起動する方法についての考えはありますか?

4

1 に答える 1

0

jQuery.Deferredを使用してこれを解決できると思います。

このようなもの：

function getDivHeight(strDivId) {
    var def = $.Deferred(), $div = $("#" + strDivId);

    setInterval(function () {
        var intDivHeight = $div.height();

        if (intDivHeight > 0) {
            def.resolve(intDivHeight);
        }
    }, 40);

    return def.promise();
}


$.when(getDivHeight("westDiv")).then(function (divHeight) {
    // Do something with the westDiv's height here.
});

それほど多くはなく、特定の状況で機能させるには追加のロジックが必要ですが、これは機能するソリューションを作成するための正しい方向性であると思います.

于 2013-02-15T14:33:13.403 に答える