老手网

解决DWZ(JUI)的panel面板一个严重BUG

分类:javascript 作者:oldhand 来源: 发布:2013-05-23 20:56:13
问题描述:
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);     

 

-
分享到:

Copyright © 2012 - 2014 oldhand.cn All Rights Reserved. 粤ICP备13025864号