php和jquery ui弹出框,JavaScript_jQuery弹出框代码封装DialogHelper，看了jQueryUI Dialog的例子，效果 - phpStudy...

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 (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);

};

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

深入理解Hibernate中的flush机制

php实现四舍五入的方法小结

QTabWidget标签实现双击关闭的方法(推荐)

jquery实现简单的表单验证

jQuery类选择器用法实例

苹果Mac怎么查看系统版本？mac系统版本和配置情况查看教程图文介绍

浅谈javascript中call()、apply()、bind()的用法

Win7系统如何修复IE浏览器？Win7系统修复IE浏览器的方法

Win10系统玩上古卷轴5提示缺少X3DAudio1_7.dll文件的原因及解决方法

php的memcache类分享(memcache队列)

php简单开启gzip压缩方法(zlib.output_compression)

ECHO.js 纯javascript轻量级延迟加载的实例代码

简单的php+mysql聊天室实现方法(附源码)

Javascript 高级手势使用介绍