WebUI框架使用参考
关注jQuery easyui,zTree,my97,highcharts等前台UI的使用

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