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

从两个方法的定义就能看出这两个方法用于新增和删除panel的header部分。为什么要扩展这两个方法？可能你会说“不是有属性noheader么？”。

首先属性noheader没办法实现动态增加和删除header；
可能你又要说$('#id').panel({noheader:true})就是了，但是这样的代价是不是太大了？因为这样写直接重构panel，同时如果有href属性的话，将会二次请求。

所以，本文扩展的两个方法在某些场合是十分必要的，话不多说了，直接上代码，希望大家帮忙测试有没有什么bug:

实现代码：

$.extend($.fn.panel.methods, {
    addHeader: function(jq, params){
        return jq.each(function(){
            function removeNode(node){
                node.each(function(){
                    $(this).remove();
                    if ($.browser.msie) {
                        this.outerHTML = "";
                    }
                });
            };
            var that = this;
            var opts = $.data(this, 'panel').options;
            var panel = $.data(this, 'panel').panel;
            if (params) {
                opts.title = params.title ? params.title : opts.title;
                opts.collapsible = params.collapsible ? params.collapsible : opts.collapsible;
                opts.minimizable = params.minimizable ? params.minimizable : opts.minimizable;
                opts.maximizable = params.maximizable ? params.maximizable : opts.maximizable;
                opts.closable = params.closable ? params.closable : opts.closable;
                opts.tools = params.tools ? params.tools : opts.tools;
                opts.iconCls = params.iconCls ? params.iconCls : opts.iconCls;
            }
            opts.noheader = false;
            opts.title = (opts.title == null || opts.title == "") ? " " : opts.title;
            removeNode(panel.children("div.panel-header"));
            var header = $("<div class=\"panel-header\"><div class=\"panel-title\">" + opts.title + "</div></div>").prependTo(panel);
            if (opts.iconCls) {
                header.find(".panel-title").addClass("panel-with-icon");
                $("<div class=\"panel-icon\"></div>").addClass(opts.iconCls).appendTo(header);
            }
            var tool = $("<div class=\"panel-tool\"></div>").appendTo(header);
            if (opts.tools) {
                if (typeof opts.tools == "string") {
                    $(opts.tools).children().each(function(){
                        $(this).addClass($(this).attr("iconCls")).addClass("panel-tool-a").clone().appendTo(tool);
                    });
                }
                else {
                    for (var i = 0; i < opts.tools.length; i++) {
                        var t = $("<a href=\"javascript:void(0)\"></a>").addClass(opts.tools[i].iconCls).appendTo(tool);
                        if (opts.tools[i].handler) {
                            t.bind("click", eval(opts.tools[i].handler));
                        }
                    }
                }
            }
            if (opts.collapsible) {
                $("<a class=\"panel-tool-collapse\" href=\"javascript:void(0)\"></a>").appendTo(tool).bind("click", function(){
                    if (opts.collapsed == true) {
                        $(that).panel('expand', true);
                    }
                    else {
                        $(that).panel('collapse', true);
                    }
                    return false;
                });
            }
            if (opts.minimizable) {
                $("<a class=\"panel-tool-min\" href=\"javascript:void(0)\"></a>").appendTo(tool).bind("click", function(){
                    $(that).panel('minimize');
                    return false;
                });
            }
            if (opts.maximizable) {
                $("<a class=\"panel-tool-max\" href=\"javascript:void(0)\"></a>").appendTo(tool).bind("click", function(){
                    if (opts.maximized == true) {
                        $(that).panel('restore');
                    }
                    else {
                        $(that).panel('maximize');
                    }
                    return false;
                });
            }
            if (opts.closable) {
                $("<a class=\"panel-tool-close\" href=\"javascript:void(0)\"></a>").appendTo(tool).bind("click", function(){
                    $(that).panel('close');
                    return false;
                });
            }
            panel.children("div.panel-body").removeClass("panel-body-noheader");
        });
    },
    removeHeader: function(jq, params){
        return jq.each(function(){
            function removeNode(node){
                node.each(function(){
                    $(this).remove();
                    if ($.browser.msie) {
                        this.outerHTML = "";
                    }
                });
            };
            var panel = $.data(this, 'panel').panel;
            removeNode(panel.children("div.panel-header"));
            panel.children("div.panel-body").addClass("panel-body-noheader");
        });
    }
});

使用方式：

$('#p').panel('addHeader',{title:"fuck!",iconCls:'icon-ok'});
$('#p').panel('removeHeader');