1

这是一个奇怪的问题。我有一组通过 AJAX 加载的 jQuery UI 选项卡。load 事件应该在选项卡的内容加载并准备好后触发，有时在计算内容高度之后触发，有时在计算之前触发。

情况如下：第一个选项卡包含两个.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，有时它不会。我把console.log($('#westDiv').height())我的加载函数放在最后，再一次，有时它知道 div 的高度，有时它认为它的高度为零。

我能得出的唯一结论是，jQuery UI 选项卡的加载事件的触发速度比可以计算的内部 div 的高度快一点。我可以通过使用来使它工作setTimeout(setTabHeight, 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 回答