问题描述:
DWZ的panel面板比较常用,我们常常需要在其标题栏上再增加一个些按钮,如下图
问题出来了,增加按钮后,点面板收缩按钮,增加的按钮就消失了
而且面板收缩的click事件,也跟新增的按钮绑定了,
这样导致面板无法使用,还好是开源代码,研究其代码就能解决问题
/**
* @author Roger Wu
* @version 1.0
*/ function S4() {
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
} (function ($) {
$.extend($.fn, {
jPanel: function (options) {
var op = $.extend({ header: "panelHeader", headerC: "panelHeaderContent", content: "panelContent", coll: "collapsable", exp: "expandable", footer: "panelFooter", footerC: "panelFooterContent" }, options);
return this.each(function () {
var $panel = $(this);
var close = $panel.hasClass("close");
var collapse = $panel.hasClass("collapse"); var $content = $(">div", $panel).addClass(op.content);
var title = $(">h1", $panel).wrap('<div class="' + op.header + '"><div class="' + op.headerC + '"></div></div>');
var buttonid = "panel_" + S4();
if (collapse) $("<a id=\"" + buttonid + "\" href=\"\"></a>").addClass(close ? op.exp : op.coll).insertAfter(title); var header = $(">div:first", $panel);
var footer = $('<div class="' + op.footer + '"><div class="' + op.footerC + '"></div></div>').appendTo($panel); var defaultH = $panel.attr("defH") ? $panel.attr("defH") : 0;
var minH = $panel.attr("minH") ? $panel.attr("minH") : 0;
if (close)
$content.css({
height: "0px",
display: "none"
});
else {
if (defaultH > 0)
$content.height(defaultH + "px");
else if (minH > 0) {
$content.css("minHeight", minH + "px");
}
}
if (!collapse) return;
var $pucker = $("#" + buttonid);
var inH = $content.innerHeight() - 6;
if (minH > 0 && minH >= inH) defaultH = minH;
else defaultH = inH;
$pucker.click(function () {
if ($pucker.hasClass(op.exp)) {
$content.jBlindDown({
to: defaultH, call: function () {
$pucker.removeClass(op.exp).addClass(op.coll);
if (minH > 0) $content.css("minHeight", minH + "px");
}
});
} else {
if (minH > 0) $content.css("minHeight", "");
if (minH >= inH) $content.css("height", minH + "px");
$content.jBlindUp({
call: function () {
$pucker.removeClass(op.coll).addClass(op.exp);
}
});
}
return false;
});
});
}
});
})(jQuery);