首页 / JQUERY / jQuery弹出框代码封装DialogHelper_jquery

jQuery弹出框代码封装DialogHelper_jquery

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了jQuery弹出框代码封装DialogHelper_jquery，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4689字，纯文字阅读大概需要7分钟。

内容图文

看了jQueryUI Dialog的例子，效果还不错，就是用起来有点儿别扭，写出的代码有点拧巴，需要再封装一下！于是就有了下面这个简单的DialogHelper辅助类，因为这篇文章分享的重点是思路，所以目前版本的代码也还非常粗糙。思路对了，后续再封装成什么样都不过是形式而已，希望这个思路能给大家点启迪，同时欢迎大家开拓思维，提出更好的改进意见。

代码如下:

//require ScrollHelper.js
function DialogHelper() {
var _this = this;
var doc = window.document;
_this.maskDiv = null;
_this.contentDiv = null;
var options = {
opacity: 0.4
};
this.popup = function (contentdiv, optionArg) {
if (optionArg) {
for (var prop in optionArg) {
options[prop] = optionArg[prop];
}
}
_this.contentDiv = contentdiv || _this.contentDiv;
_this.maskDiv = $('
');
_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) && typeof value === "string") {
if (value.indexOf("%") !== -1) {
value = (value.replace("%", "") / 100) * whole;
} else if (value.indexOf("px") !== -1) {
value = value.replace("px", "");
}
}
return Math.ceil(value);
};
this.position = function (dialog, dialogBody, minusHeight) {
dialog = dialog || $(".ShowDialogDiv");
if (dialog[0]) {
var clientWidth = document.documentElement.clientWidth;
var clientHeight = document.documentElement.clientHeight;
var width = _this.formatPercentNumber(dialog.data("position").width, clientWidth) || dialog.width();
var height = _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());
var dialogBodyHeight = height - minusHeight;
dialogBody.height(dialogBodyHeight);
}
}
}
}
var createDialogTemplate = function (optionArg, contentHtml, saveBtnClickHandler) {
var options = {
"Action": "",
"Title": "",
"Width": "50%",
"Height": "50%"
};
if (optionArg) {
for (var prop in optionArg) {
options[prop] = optionArg[prop];
}
}
var newDialog = $("
");
var DialogHead = $("
").appendTo(newDialog);
$("").html(options.Action + " " + options.Title).appendTo(DialogHead);
var DialogClose = $("").appendTo(DialogHead);
var DialogBody = $("
").html(contentHtml).appendTo(newDialog);
var DialogFoot = $("
").appendTo(newDialog);
var newDiv = $("
").appendTo(DialogFoot);
var ActionCancelDiv = $("
").appendTo(newDiv);
DialogClose.on("click", function() {
dialogHelper.remove();
});
ActionCancelDiv.on("click", function() {
dialogHelper.remove();
});
var newA = $("
").appendTo(ActionCancelDiv);
$("
").appendTo(newA);
$("
").html("Cancel").appendTo(newA);
var ActionSaveDiv = $("
").appendTo(newDiv);
var newB = $("
").appendTo(ActionSaveDiv);
newB.on('click', function () {
if (typeof saveBtnClickHandler == "function") {
saveBtnClickHandler();
}
});
$("
").appendTo(newB);
$("
").html("Save").appendTo(newB);
var minusHeight = DialogHead.outerHeight() + DialogFoot.outerHeight();
newDialog.data("position", {
width: options.Width,
height: options.Height
});
dialogHelper.position(newDialog, DialogBody, minusHeight);
return newDialog;
};
var changeDialogLayout = function(optionArg, dialogObj) {
var options = {
"Width": "70%",
"Height": "90%"
};
if (optionArg) {
for (var prop in optionArg) {
options[prop] = optionArg[prop];
}
}
var DialogBody = $(dialogObj).find(".Dialog_Body");
var DialogHead = $(dialogObj).find(".Dialog_Head");
var DialogFoot = $(dialogObj).find(".Dialog_Foot");
var other = Math.round(DialogBody.css("padding-top").replace(/[a-z]/ig, "")) + Math.round(DialogBody.css("padding-bottom").replace(/[a-z]/ig, ""));
var minusHeight = DialogHead.outerHeight() + DialogFoot.outerHeight() + other;
dialogObj.data("position", {
width: options.Width,
height: options.Height
});
dialogHelper.position(dialogObj, DialogBody, minusHeight);
};

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

内容总结

以上是互联网集市为您收集整理的jQuery弹出框代码封装DialogHelper_jquery全部内容，希望文章能够帮你解决jQuery弹出框代码封装DialogHelper_jquery所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/323758.html

来源：【匿名】