jQuery弹出框代码封装DialogHelper
看了jQueryUIDialog的例子,效果还不错,就是用起来有点儿别扭,写出的代码有点拧巴,需要再封装一下!于是就有了下面这个简单的DialogHelper辅助类,因为这篇文章分享的重点是思路,所以目前版本的代码也还非常粗糙。思路对了,后续再封装成什么样都不过是形式而已,希望这个思路能给大家点启迪,同时欢迎大家开拓思维,提出更好的改进意见。
//requireScrollHelper.js functionDialogHelper(){ var_this=this; vardoc=window.document; _this.maskDiv=null; _this.contentDiv=null; varoptions={ opacity:0.4 }; this.popup=function(contentdiv,optionArg){ if(optionArg){ for(varpropinoptionArg){ options[prop]=optionArg[prop]; } } _this.contentDiv=contentdiv||_this.contentDiv; _this.maskDiv=$('<div>'); _this.maskDiv.addClass('MaskDiv'); _this.maskDiv.css({ 'filter':"Alpha(opacity="+(options.opacity-"0")*100+");", 'opacity':options.opacity, 'display':'block' }); $(doc.body).append(_this.maskDiv); if(_this.contentDiv){ $(doc.body).append(_this.contentDiv); _this.contentDiv.show(); _this.contentDiv.draggable({ containment:"document", cursor:'move', handle:".Dialog_Head" }); $(_this.maskDiv).on("mousemove",function(){ $("body").preventScroll(); }); $(_this.maskDiv).on("mouseout",function(){ $("body").liveScroll(); }); if($(".cke").length==0&&$(".Dialog_Body").length>0){ $(".Dialog_Body").preventOuterScroll(); } } }; this.remove=function(){ if(_this.contentDiv){ _this.contentDiv.remove(); } if(_this.maskDiv){ _this.maskDiv.remove(); } $("body").liveScroll(); }; this.formatPercentNumber=function(value,whole){ if(isNaN(value)&&typeofvalue==="string"){ if(value.indexOf("%")!==-1){ value=(value.replace("%","")/100)*whole; }elseif(value.indexOf("px")!==-1){ value=value.replace("px",""); } } returnMath.ceil(value); }; this.position=function(dialog,dialogBody,minusHeight){ dialog=dialog||$(".ShowDialogDiv"); if(dialog[0]){ varclientWidth=document.documentElement.clientWidth; varclientHeight=document.documentElement.clientHeight; varwidth=_this.formatPercentNumber(dialog.data("position").width,clientWidth)||dialog.width(); varheight=_this.formatPercentNumber(dialog.data("position").height,clientHeight)||dialog.height(); width=width<300?300:width; height=height<450?450:height; $(dialog).css({ "width":width+"px", "height":height+"px", "top":Math.ceil((clientHeight-height)/2)+"px", "left":Math.ceil((clientWidth-width)/2)+"px" }); dialogBody=dialogBody||$(".Dialog_Body"); if(dialogBody[0]){ minusHeight=minusHeight||($(".Dialog_Head").outerHeight()+$(".Dialog_Foot").outerHeight()); vardialogBodyHeight=height-minusHeight; dialogBody.height(dialogBodyHeight); } } } } varcreateDialogTemplate=function(optionArg,contentHtml,saveBtnClickHandler){ varoptions={ "Action":"", "Title":"", "Width":"50%", "Height":"50%" }; if(optionArg){ for(varpropinoptionArg){ options[prop]=optionArg[prop]; } } varnewDialog=$("<divclass='ShowDialogDiv'id='Dialog_"+options.Title+"'>"); varDialogHead=$("<divclass='Dialog_Head'>").appendTo(newDialog); $("<spanclass='HeadLabel'>").html(options.Action+""+options.Title).appendTo(DialogHead); varDialogClose=$("<spanclass='DialogClose'>").appendTo(DialogHead); varDialogBody=$("<divclass='Dialog_Body'>").html(contentHtml).appendTo(newDialog); varDialogFoot=$("<divclass='Dialog_Foot'>").appendTo(newDialog); varnewDiv=$("<divclass='Right'>").appendTo(DialogFoot); varActionCancelDiv=$("<divclass='ActionButtonContainer'title='Cancel'>").appendTo(newDiv); DialogClose.on("click",function(){ dialogHelper.remove(); }); ActionCancelDiv.on("click",function(){ dialogHelper.remove(); }); varnewA=$("<divclass='ActionButton'id='ActionButtonCancel'>").appendTo(ActionCancelDiv); $("<divclass='IconCancel'>").appendTo(newA); $("<divclass='TitleIconTitle'>").html("Cancel").appendTo(newA); varActionSaveDiv=$("<divclass='ActionButtonContainer'title='Save'>").appendTo(newDiv); varnewB=$("<divclass='ActionButtonActionButtonAttention'id='ActionButtonSave'>").appendTo(ActionSaveDiv); newB.on('click',function(){ if(typeofsaveBtnClickHandler=="function"){ saveBtnClickHandler(); } }); $("<divclass='IconSave'>").appendTo(newB); $("<divclass='TitleIconTitleSaveButton'>").html("Save").appendTo(newB); varminusHeight=DialogHead.outerHeight()+DialogFoot.outerHeight(); newDialog.data("position",{ width:options.Width, height:options.Height }); dialogHelper.position(newDialog,DialogBody,minusHeight); returnnewDialog; }; varchangeDialogLayout=function(optionArg,dialogObj){ varoptions={ "Width":"70%", "Height":"90%" }; if(optionArg){ for(varpropinoptionArg){ options[prop]=optionArg[prop]; } } varDialogBody=$(dialogObj).find(".Dialog_Body"); varDialogHead=$(dialogObj).find(".Dialog_Head"); varDialogFoot=$(dialogObj).find(".Dialog_Foot"); varother= Math.round(DialogBody.css("padding-top").replace(/[a-z]/ig,""))+Math.round(DialogBody.css("padding-bottom").replace(/[a-z]/ig,"")); varminusHeight=DialogHead.outerHeight()+DialogFoot.outerHeight()+other; dialogObj.data("position",{ width:options.Width, height:options.Height }); dialogHelper.position(dialogObj,DialogBody,minusHeight); };
以上就是本文所分享的全部内容了,希望大家能够喜欢。