在项目开发的过程中总是会遇到这样或者那样的需求,比如说,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'); } }); } });