jQuery弹出框代码封装DialogHelper
jquery弹出框代码封装dialoghelper,看了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 (contentp, optionarg) {
if (optionarg) {
for (var prop in optionarg) {
options[prop] = optionarg[prop];
}
}
_this.contentdiv = contentp || _this.contentdiv;
_this.maskdiv = $('<p>');
_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("mouut", 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 = $("<p class='showdialogdiv' id='dialog_" + options.title + "'>");
var dialoghead = $("<p class='dialog_head'>").appendto(newdialog);
$("<span class='headlabel'>").html(options.action + " " + options.title).appendto(dialoghead);
var dialogclose = $("<span class='dialogclose'>").appendto(dialoghead);
var dialogbody = $("<p class='dialog_body'>").html(contenthtml).appendto(newdialog);
var dialogfoot = $("<p class='dialog_foot'>").appendto(newdialog);
var newdiv = $("<p class='right'>").appendto(dialogfoot);
var actioncanceldiv = $("<p class='actionbuttoncontainer' title='cancel'>").appendto(newdiv);
dialogclose.on("click", function() {
dialoghelper.remove();
});
actioncanceldiv.on("click", function() {
dialoghelper.remove();
});
var newa = $("<p class='actionbutton' id='actionbuttoncancel'>").appendto(actioncanceldiv);
$("<p class='icon cancel'>").appendto(newa);
$("<p class='title icontitle'>").html("cancel").appendto(newa);
var actionsavediv = $("<p class='actionbuttoncontainer' title='save'>").appendto(newdiv);
var newb = $("<p class='actionbutton actionbuttonattention' id='actionbuttonsave'>").appendto(actionsavediv);
newb.on('click', function () {
if (typeof savebtnclickhandler == "function") {
savebtnclickhandler();
}
});
$("<p class='icon save'>").appendto(newb);
$("<p class='title icontitle savebutton'>").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);
};