jQuery easyui layout布局自适应浏览器大小

      首先解释一下标题的含义，当我们用jQuery easyui layout 进行布局的时候，可能会遇到这样一个问题，那就是当手工调整浏览器大小，或者最大化、还原窗口的时候，layout的某个区域不能填充因为浏览器扩大而产生的空白区域，这时候看起来就比较别扭了。当然了，如果你的layout是直接放在body标签上的，且没有嵌套的layout的话，是不会出现layout不能自适应大小的情况的。

 

      当布局比较复杂，势必就会要layout嵌套起来使用，这时候出现的页面不能自适应大小的情况就让我不能忍受，这个问题困扰了我几天时间，好在有万能的网络，问题总会得到解决，下面就将自己这两天查资料以及自己实践的经验介绍给大家，希望对以后遇到同样问题的朋友有所帮助。但是此处并不做深入分析，因为我也不熟悉jQuery和easyui。

先写一个有嵌套的layout，父级基于body，包含north,center,west,east,south五个区域，子级layout基于父级的center区域，如果你打开页面的时候，浏览器不是最大化，然后手工调整浏览器大小，就会发现问题所在。

其实，layout继承自panel，而panel有个fit属性，只要设置为true，layout就能自适应父元素的大小而变化，所以只要加上fit=”true”基本就可以解决问题，相对于不能自适应的情况，变动的代码只有一行。

        这种解决方案应该是最简单的了，不过在非IE浏览器下面，大家可能会发现，反复调整浏览器大小，特别是缩小浏览器的时候，子级的layout就会出现滚动条，一时半会儿也没查出是什么原因导致的。所以网上还有一种较为复杂的解决方案，那就是利用jQuery的resize事件对浏览器窗口监听，当浏览器被调整时重新设置某些页面元素大小，要自适应大小的话，只要设置成跟父元素同宽就可以了，下面是JS代码：

        

var settime = null;

function redraw() {
    $(‘#wrap’).layout(‘resize’);
    $(‘#subWrap’).layout(‘panel’, ‘north’).panel(‘resize’, {
        width: $(‘#subWrap’).width()
    });
    $(‘#subWrap’).layout(‘panel’, ‘center’).panel(‘resize’, {
        width: $(‘#subWrap’).width()
    });
    $(‘#subWrap’).layout(‘resize’);
}
$(function() {
    $(window).resize(function() {
        if (settime != null) clearTimeout(settime);
        settime = setTimeout(“redraw()”, 100);
    });
    var p1 = $(‘body’).layout(‘panel’, ’west’).panel({
        onCollapse: function() {
            if (settime != null) clearTimeout(settime);
            settime = setTimeout(“redraw()”, 100);
        },
        onExpand: function() {
            if (settime != null) clearTimeout(settime);
            settime = setTimeout(“redraw()”, 100);
        },
        onResize: function(width, height) {
            if (settime != null) clearTimeout(settime);
            settime = setTimeout(“redraw()”, 100);
        }
    });
    var p2 = $(‘body’).layout(‘panel’, ’east’).panel({
        onCollapse: function() {
            if (settime != null) clearTimeout(settime);
            settime = setTimeout(“redraw()”, 100);
        },
        onExpand: function() {
            if (settime != null) clearTimeout(settime);
            settime = setTimeout(“redraw()”, 100);
        },
        onResize: function(width, height) {
            if (settime != null) clearTimeout(settime);
            settime = setTimeout(“redraw()”, 100);
        }
    });
});