jQuery彈出框代碼封裝DialogHelper
看了jQueryUI Dialog的例子,效果還不錯(cuò),就是用起來(lái)有點(diǎn)兒別扭,寫(xiě)出的代碼有點(diǎn)擰巴,需要再封裝一下!于是就有了下面這個(gè)簡(jiǎn)單的DialogHelper輔助類(lèi),因?yàn)檫@篇文章分享的重點(diǎn)是思路,所以目前版本的代碼也還非常粗糙。思路對(duì)了,后續(xù)再封裝成什么樣都不過(guò)是形式而已,希望這個(gè)思路能給大家點(diǎn)啟迪,同時(shí)歡迎大家開(kāi)拓思維,提出更好的改進(jìn)意見(jiàn)。
//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 = $('<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) && 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 = $("<div class='ShowDialogDiv' id='Dialog_" + options.Title + "'>");
var DialogHead = $("<div class='Dialog_Head'>").appendTo(newDialog);
$("<span class='HeadLabel'>").html(options.Action + " " + options.Title).appendTo(DialogHead);
var DialogClose = $("<span class='DialogClose'>").appendTo(DialogHead);
var DialogBody = $("<div class='Dialog_Body'>").html(contentHtml).appendTo(newDialog);
var DialogFoot = $("<div class='Dialog_Foot'>").appendTo(newDialog);
var newDiv = $("<div class='Right'>").appendTo(DialogFoot);
var ActionCancelDiv = $("<div class='ActionButtonContainer' title='Cancel'>").appendTo(newDiv);
DialogClose.on("click", function() {
dialogHelper.remove();
});
ActionCancelDiv.on("click", function() {
dialogHelper.remove();
});
var newA = $("<div class='ActionButton' id='ActionButtonCancel'>").appendTo(ActionCancelDiv);
$("<div class='Icon Cancel'>").appendTo(newA);
$("<div class='Title IconTitle'>").html("Cancel").appendTo(newA);
var ActionSaveDiv = $("<div class='ActionButtonContainer' title='Save'>").appendTo(newDiv);
var newB = $("<div class='ActionButton ActionButtonAttention' id='ActionButtonSave'>").appendTo(ActionSaveDiv);
newB.on('click', function () {
if (typeof saveBtnClickHandler == "function") {
saveBtnClickHandler();
}
});
$("<div class='Icon Save'>").appendTo(newB);
$("<div 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);
};
以上就是本文所分享的全部?jī)?nèi)容了,希望大家能夠喜歡。
相關(guān)文章
jQuery實(shí)現(xiàn)的fixedMenu下拉菜單效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)的fixedMenu下拉菜單效果代碼,通過(guò)自定義fixedMenu方法實(shí)現(xiàn)點(diǎn)擊下拉菜單效果,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08jQuery EasyUI之驗(yàn)證框validatebox實(shí)例詳解
本文通過(guò)實(shí)例代碼給大家講解了jQuery EasyUI之驗(yàn)證框validatebox知識(shí),非常不錯(cuò),具有參考借鑒價(jià)值,需要的的朋友參考下吧2017-04-04Jquery ajax不能解析json對(duì)象,報(bào)Invalid JSON錯(cuò)誤的原因和解決方法
我們知道Invalid JSON錯(cuò)誤導(dǎo)致的json對(duì)象不能解析,一般都是服務(wù)器返回的json字符串的語(yǔ)法有錯(cuò)誤。這種情況下,我們只需要仔細(xì)的檢查一下json就可以解決問(wèn)題。2010-03-03JQuery實(shí)現(xiàn)折疊式菜單的詳細(xì)代碼
這篇文章主要介紹了JQuery實(shí)現(xiàn)折疊式菜單的詳細(xì)代碼,本文通過(guò)實(shí)例代碼通過(guò)兩種風(fēng)格給大家詳細(xì)介紹,需要的朋友可以參考下2020-06-06jQuery獲取當(dāng)前對(duì)象標(biāo)簽名稱的方法
獲取當(dāng)前對(duì)象標(biāo)簽名稱的方法有很多,本教程為大家介紹下使用jquery獲取的具體實(shí)現(xiàn)2014-02-02jQuery Ajax實(shí)現(xiàn)跨域請(qǐng)求
這篇文章主要為大家詳細(xì)介紹了jQuery Ajax實(shí)現(xiàn)跨域請(qǐng)求的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01使用jQuery,Angular實(shí)現(xiàn)登錄界面驗(yàn)證碼詳解
這篇文章主要介紹了使用jQuery,Angular實(shí)現(xiàn)登錄界面驗(yàn)證碼詳解,需要的朋友可以參考下2017-04-04