在使用easyui layout布局的过程中,大多人都会使用fit属性来保证页面调整大小时layout能够重新排版,适应整个页面的调整。不过在layout嵌套的时候,各个panel的border往往需要手工调整,否则两个border并在一起,看起来总不是那么美观,解决思路不外乎三种:
- 将包含子layout的panel的border属性设置为false,也就是不显示父元素border。
- 不把子layout的直接放在父一级的某个panel下,而是在这个panel下在放一个div,让子layout fit到这个div上,最后再设置一下这个DIV的margin就可以了。
- 想办法扩展一下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来设置边距。