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);
};
以上就是本文所分享的全部内容了，希望大家能够喜欢。