提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

jQuery弹出框代码封装DialogHelper

jQuery封装代码 弹出
2023-06-13 09:15:43 时间

看了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);
};

以上就是本文所分享的全部内容了，希望大家能够喜欢。

相关文章