现在的位置: 首页 > easyui > Layout > layout > 正文
让easyui layout的fit属性留有余地
2012年02月20日 layout ⁄ 共 1616字 评论数 2 ⁄ 被围观 23,100 views+
文章目录
[隐藏]

在使用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来设置边距。

目前有 2 条留言 其中:访客:1 条, 博主:0 条 引用: 1

  1. 糊涂鬼 : 2017年05月11日17:19:50  -49楼 @回复 回复

    这个示例可供下载么?

给我留言

留言无头像?


×