现在的位置: 首页 > easyui > Layout > panel > 正文
panel扩展:doBorderConf方法灵活设置边框
2012年05月11日 panel ⁄ 共 5299字 评论数 2 ⁄ 被围观 4,370 views+
文章目录
[隐藏]

Border布局的所有框架都依赖于边框,有了边框才有了界限,进而混沌才出现日月山河,它缤纷的世界恰当地分割。可是当边框充彻每个角落的时候,你又会发现它也有讨厌的一面。

比如说嵌套使用控件经常遇到的边框叠加问题, 这个问题并不是有个border属性控制是否显示边框就能解决的,因为有时候我们要求显示左边边框,不显示右边边框,肿么办?难道每次都要用jQuery写一大堆代码去处理?

如果您有一定的css基础,并且懂一点美工,也会露几首PS,我想你大多会选择不要边框的region,所有的边边框采用自己的css实现,你可以用背景图模拟边框,只要你做的边框看起开比layout自己的边框更顺眼,您就没有理由保留layout各个region的边框了。

但是可惜了,我想80%的码农都是美工和css方面的二逼,所以您还是乖乖地使用layout的原始边框吧。

鉴于这个原因,我们迫切地需要能够对边框的灵活操作,panel就是基础,而panel里面的header和body才是最原子的东西,所以我们需要实现对panel的header和body两部分的边框灵活定制功能。

因为源码的错综复杂,我们当然是希望扩展的方式来达到目的。所以doBorderConf方法就这么诞生了。

实现代码:

1.在easyui.css和panle.css文件中均定义八个样式,该八个样式,分别对应四个边框的宽度为1和为0。
.left-border-no{
	border-left-width:0px;
}
.right-border-no{
	border-right-width:0px;
}
.top-border-no{
	border-top-width:0px;
}
.bottom-border-no{
	border-bottom-width:0px;
}
.left-border{
	border-left-width:1px;
}
.right-border{
	border-right-width:1px;
}
.top-border{
	border-top-width:1px;
}
.bottom-border{
	border-bottom-width:1px;
}
2.扩展一个方法:doBorderConf用于配置panel的header和body的边框是否显示,主要是通过添加和删除之前定义的八个样式来实现。
$.extend($.fn.panel.methods, {  
    doBorderConf: function(jq, params){
        return jq.each(function(){
			function _removeClass(jObj,className){
				if(jObj.hasClass(className))
					jObj.removeClass(className);
			};
			function _removeAllClass(jObj){
				var classArray = ['top-border-no','right-border-no','bottom-border-no','left-border-no',
				'top-border','right-border','bottom-border','left-border'];
				for(var i=0; i<8; i++){
					_removeClass(jObj,classArray[i]);
				}
			};
			function _addAllClass(jObj,args){
				for(var i=0; i < args.length; i++){
					var classA = "";
					switch(i){
						case 0:
							classA = 'top-border';
							break;
						case 1:
							classA = 'right-border';
							break;
						case 2:
							classA = 'bottom-border';
							break;
						case 3:
							classA = 'left-border';
							break;
						default:
							classA = '';
							break;
					}
					if(args[i]==0) classA += '-no';
					jObj.addClass(classA);
				}
					
			};
			if(params.header){
				var borderList = params.header.split(' ');
				var hp = $(this).panel("header");
				_removeAllClass(hp);
				_addAllClass(hp,borderList);
			}
			if(params.body){
				var borderList = params.body.split(' ');
				var bp = $(this).panel("body");
				_removeAllClass(bp);
				_addAllClass(bp,borderList);
			}
			$(this).panel('resize');            
        });  
    }
});

使用方法:

//配置规则跟css的边框定义规则一样,分别为上右下左。
var borderConf = {header:'0 1 0 0',body:'1 1 0 0'};
$(selector).panel('doBorderConf',borderConf);

功能完善:

上面我们只是实现了设置边框的一个接口方法,这意味着我们如果想设置对边框的详细配置的话,必须要使用脚本去调用doBorderConf方法才行,这样是不是显得很不方便呢?

我们都知道easyui组件的很多属性都是可以直接写在DOM里面的,比如面板的title,fit等属性均可以卸载DOM中,那么我们对边框的详细配置是否也可以直接写在DOM中就能生效呢?

从实现上来讲,肯定是可以的,通过改源代码的话毫无疑问是可以解决这个需求的,但是我们为了尽量保证源码的纯洁性,有时候必须要考虑使用别的方法来实现。

我们注意到panel的onBeforeOpen很少被使用,所以我们可以更改默认的onBeforeOpen定义,让panel组件在onBeforeOpen事情中获取DOM中的边框配置属性,然后调用方法去实现对边框的配置。所以,在实现了doBorderConf方法的基础上,我们再做以下改进就可以实现进一步完善了:

1.首先重写panel的属性转换器。

为什么要覆写panel的属性转换器呢?主要原因还是为了尽量不修改源码,覆写的时候必须要把源码中支持的属性全部带上,同时增加我们需要的属性,其实把属性转换器覆写一次后,我们就可以方便地对其进行扩展了。

/**
 * 覆写panel的属性转换器,使其增加对某些属性的转换。
 * @param {Object} target
 */
$.fn.panel.parseOptions = function(target){
    var t = $(target);
    return {
        id: t.attr("id"),
        width: (parseInt(target.style.width) || undefined),
        height: (parseInt(target.style.height) || undefined),
        left: (parseInt(target.style.left) || undefined),
        top: (parseInt(target.style.top) || undefined),
        title: (t.attr("title") || undefined),
        iconCls: (t.attr("iconCls") || t.attr("icon")),
        cls: t.attr("cls"),
        headerCls: t.attr("headerCls"),
        bodyCls: t.attr("bodyCls"),
        tools: t.attr("tools"),
        href: t.attr("href"),
        loadingMessage: (t.attr("loadingMessage") != undefined ? t.attr("loadingMessage") : undefined),
        cache: (t.attr("cache") ? t.attr("cache") == "true" : undefined),
        fit: (t.attr("fit") ? t.attr("fit") == "true" : undefined),
        border: (t.attr("border") ? t.attr("border") == "true" : undefined),
        noheader: (t.attr("noheader") ? t.attr("noheader") == "true" : undefined),
        collapsible: (t.attr("collapsible") ? t.attr("collapsible") == "true" : undefined),
        minimizable: (t.attr("minimizable") ? t.attr("minimizable") == "true" : undefined),
        maximizable: (t.attr("maximizable") ? t.attr("maximizable") == "true" : undefined),
        closable: (t.attr("closable") ? t.attr("closable") == "true" : undefined),
        collapsed: (t.attr("collapsed") ? t.attr("collapsed") == "true" : undefined),
        minimized: (t.attr("minimized") ? t.attr("minimized") == "true" : undefined),
        maximized: (t.attr("maximized") ? t.attr("maximized") == "true" : undefined),
        closed: (t.attr("closed") ? t.attr("closed") == "true" : undefined),
        auto: (t.attr("auto") ? t.attr("auto") == "true" : true),
		//以下属性均为后扩展而来
        borderHeader: (t.attr("borderHeader") != undefined ? t.attr("borderHeader") : undefined),
		borderBody: (t.attr("borderBody") != undefined ? t.attr("borderBody") : undefined)
    };
};
2.对扩展的两个属性设置默认值为null,并且覆写onBeforeOpen事件
$.fn.panel.defaults = $.extend({}, $.fn.panel.defaults, {
    borderHeader: null,
    borderBody: null,
    onBeforeOpen: function(){
        var opts = $(this).panel('options');
        var borderConf = {};
        if (opts.borderHeader && opts.borderHeader != null) {
            borderConf.header = opts.borderHeader;
        }
        if (opts.borderBody && opts.borderBody != null) {
            borderConf.body = opts.borderBody;
        }
        if (borderConf.header || borderConf.body) {
            $(this).panel('doBorderConf', borderConf);
        }
    }
});
3.使用方式:
<div class="easyui-panel" fit="true" title="My Panel" iconCls="icon-save" borderHeader="0 0 1 1" borderBody = "1 0 1 0"></div>
4.注意事项:

因为我们是覆写onBeforeOpen事件的默认值来达到打开面板前完成对边框的设置,所以说onBeforeOpen事件如果你在其它代码中定义的话就会覆盖我们覆写的默认值,从而导致对边框的设置无效,这一点必须是要明确的。

更新记录:

2012-07-12:

对于layout组件,可以定义各个region的style较为灵活地设置边框,即通过设置以下几个css属性设置各个region的边框:
border-top-width,border-right-width,border-bottom-width,border-left-width

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

  1. 疯子 : 2013年09月02日11:43:03  -49楼 @回复 回复

    加了代码后。CSS无效果。HTML样式也没加载上去。但$(select).attr(‘class’)又有样式。。这是怎么会事呢?


    • 管理员
      世纪之光 : 2013年09月02日14:04:34  地下1层 @回复 回复

      你用的是什么版本,我写的时候可能还是1.3.2的版本。另外你用的是doBorderConf方法吗。把环境描述清楚点,我抽时间看看。

给我留言

留言无头像?


×