从两个方法的定义就能看出这两个方法用于新增和删除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');