现在的位置: 首页 > easyui > Layout > layout > 正文
Layout小扩展:提供增删region头部方法
2012年04月21日 layout ⁄ 共 1644字 暂无评论 ⁄ 被围观 4,778 views+
文章目录
[隐藏]

在项目开发的过程中总是会遇到这样或者那样的需求,比如说,layout某个region的header部分要求能够动态的删除和新增。

这样的需求利用layout获取panel后,再设置panel的noheader属性,最后再使用panel的resize方法就可以解决问题了,增加header则是一个相反的过程,增加的时候应该可以设置标题。

类似于这样的功能尽管比较小,但是常用的话,代码写起来比较冗余和累赘,所以简单地封装一下还是有必要的,代码如下(注意该代码基于1.2.6版本):

实现代码:

$.extend($.fn.layout.methods, {  
    delHeader: function(jq, region){  
        return jq.each(function(){  
            var panel = $(this).layout("panel",region);
            if(panel){
                panel.panel({noheader:true});
				panel.panel('resize');
            }
        });  
    },
    addHeader:function(jq, params){
        return jq.each(function(){  
            var panel = $(this).layout("panel",params.region);
			var opts = panel.panel("options");
            if(panel){
				panel.panel({noheader:false});
				panel.panel('resize');
				if(params.title){
					panel.panel('setTitle',params.title);
				}
            }
        });
    }
});

使用方式:

//删掉center的Header
$('#layoutId').layout('delHeader','center');
//给center增加Header,并设置标题为'我又回来了'
$('#layoutId').layout('addHeader',{'region':'center','title':'我又回来了'});

其实这两个方法应该扩展到panel插件里面的,然后layout里面可以调用panel的方法了,这样更清晰点。

更新记录(2012-05-03):

在基于panel扩展了addHeader和removeHeader方法的基础上,可以利用panel扩展的方法实现layout的delHeader和addHeader方法,且更为合理和高效。

$.extend($.fn.layout.methods, {  
    delHeader: function(jq, region){  
        return jq.each(function(){  
            var panel = $(this).layout("panel",region);
            if(panel){
                panel.panel('removeHeader');
				panel.panel('resize');
            }
        });  
    },
    addHeader:function(jq, params){
        return jq.each(function(){  
            var panel = $(this).layout("panel",params.region);
			var opts = panel.panel("options");
            if(panel){
				var title = params.title?params.title:opts.title;
                panel.panel('addHeader',{title:title});
				panel.panel('resize');
            }
        });
    }
});

给我留言

留言无头像?


×