元素的大小需要重新计算高度，因为JSON数据被过滤

element size using need to recalculate height as JSON data is filtered

本文关键字：高度 因为 JSON 过滤 数据 计算 新计算 元素      更新时间：2023-09-26
var height = $("#mainbody").height();
$("#leftnav").css({"height":height});
$("#leftnav").css({"min-height":height,"padding-bottom":"15px","height":"auto"});
if($.browser.msie && $.browser.version < 7){
    $("#leftnav").css({"height":height});

    $("#leftNavSearch ul li").each(function(){
        if($(this).height() < 20){
            $(this).css({"height":"20px"});
        }else{
            $(this).css({"height":"auto"});
        }
    });     
}else if($.browser.msie && $.browser.version > 7){
    $("#leftnav").css({"height":"auto"});
}

上面的函数计算#mainbody和#leftnav的高度。

但是，当您过滤页面上的JSON数据时，您最终会在底部留下大量空白。

当选择过滤器链接时，重新计算高度的最佳方法是什么?

首先，你应该包括Ben Alman的伟大油门插件，我们将使用它来限制resize函数被调用的速率。

接下来我们把你的脚本放进一个函数

function resize_left_nav(){
    //YOUR SCRIPT GOES HERE        
}

之后，我们在左导航上设置一个自定义事件，我们将触发该事件来调整列的大小。我们使用throttle来限制resize_left_nav函数被调用的速率

$('#leftnav').bind('resize-column',function(){
    $.throttle(250, resize_left_nav);
});

我们希望在两种情况下触发此事件:

  • 页面加载

    $(function(){ $('#leftnav').trigger('resize-column'); });

  • 当物品列表更新时。当你的过滤完成后，触发事件。

为了稍微清理一下，我们可以像这样将整个代码包装在IIFE(立即调用的函数表达式)中:

(function(){
    function resize_left_nav(){ ... }
    $('#leftnav').bind( ... );
    $(function(){ ... });
})();
相关文章：