WebUI框架使用参考
关注jQuery easyui,zTree,my97,highcharts等前台UI的使用

在使用easyui layout布局的过程中，大多人都会使用fit属性来保证页面调整大小时layout能够重新排版，适应整个页面的调整。不过在layout嵌套的时候，各个panel的border往往需要手工调整，否则两个border并在一起，看起来总不是那么美观，解决思路不外乎三种：

1. 将包含子layout的panel的border属性设置为false，也就是不显示父元素border。
2. 不把子layout的直接放在父一级的某个panel下，而是在这个panel下在放一个div，让子layout fit到这个div上，最后再设置一下这个DIV的margin就可以了。
3. 想办法扩展一下layout的fit属性，可以设置留白的像素大小。

第一种方法估计是大多数人选择的方式，不过有些特殊场景会要求两个border都显示，两个border之间有一定的间隔。使用第二个思路可以解决这个问题，不过这会产生一个新的问题，那就是当手工调整页面大小的时候，fit属性就失去作用了。所以还是给layout扩展个属性用于设置fit的时候留白的大小，这样就一劳永逸了。

实现思路：

我想要的结果如下图所示：

当有space的时候，给子layout设置一个margin，再将子layout的width和height分别减少2*margin就可以了，margin的值等于space。

代码描述：

定义space属性：

$.fn.layout = function(options, param){
    if (typeof options == 'string') {
        return $.fn.layout.methods[options](this, param);
    }
    return this.each(function(){
        var state = $.data(this, 'layout');
        if (!state) {
            var opts = $.extend({}, {
                fit: $(this).attr('fit') == 'true',
				//这里扩展一个属性 space
				space: $(this).attr('space')
            });
            $.data(this, 'layout', {
                options: opts,
                panels: init(this)
            });
            bindEvents(this);
        }
        setSize(this);
    });
};

修改setsize方法：

if (opts.fit == true) {
    var p = cc.parent();
	//定义临时变量
	var spaces = 0;
	if(opts.space){
		//设置了space属性的话，取space的值
		var spaces = parseInt(opts.space);
		//设置margin
		cc.css({
			'margin-top':spaces,
			'margin-bottom':spaces,
			'margin-right':spaces,
			'margin-left':spaces
		});
	}
	//不管有没有space属性，下面的width和height肯定是正确的
    cc.width(p.width()-2*spaces).height(p.height()-2*spaces);
}

使用方式：

<div class="easyui-layout" fit="true" space="2">
...
</div>

效果演示：

http://www.easyui.info/easyui/demo/layout/layout_space.html

2012-2-29补充：

这样的空白页可以通过页面的css来做，而且很简单，本文的介绍只是实现边距的一种方式并且集成到插件内部了，对css有点了解的同学，建议还是通过父对象的padding来设置边距。