jQuery弹出框代码封装DialogHelper


Posted in Javascript onJanuary 30, 2015

看了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 = $('<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);

};

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

Javascript 相关文章推荐
通过MSXML2自动获取QQ个人头像及在线情况(给初学者)
Jan 22 Javascript
jquery validation插件表单验证的一个例子
Mar 03 Javascript
JS判断表单输入是否为空(示例代码)
Dec 23 Javascript
js事件驱动机制 浏览器兼容处理方法
Jul 23 Javascript
jQuery简单实现彩色云标签效果示例
Aug 01 Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
Dec 26 Javascript
vue router-link传参以及参数的使用实例
Nov 10 Javascript
Layui 数据表格批量删除和多条件搜索的实例
Sep 04 Javascript
ionic3双击返回退出应用的方法
Sep 17 Javascript
利用webpack理解CommonJS和ES Modules的差异区别
Jun 16 Javascript
VSCode 配置uni-app的方法
Jul 11 Javascript
js实现滑动进度条效果
Aug 21 Javascript
jquery中animate的stop()方法作用实例分析
Jan 30 #Javascript
javascript中sort()的用法实例分析
Jan 30 #Javascript
JavaScript中的值是按值传递还是按引用传递问题探讨
Jan 30 #Javascript
javascript结合fileReader 实现上传图片
Jan 30 #Javascript
使用JavaScript+canvas实现图片裁剪
Jan 30 #Javascript
js判断手机和pc端选择不同执行事件的方法
Jan 30 #Javascript
项目中常用的JS方法整理
Jan 30 #Javascript
You might like
php中计算中文字符串长度、截取中文字符串的函数代码
2011/08/09 PHP
解析smarty 截取字符串函数 truncate的用法介绍
2013/06/20 PHP
php获取数组中重复数据的两种方法
2013/06/28 PHP
PHP写日志的实现方法
2014/11/05 PHP
JavaScript中将一个值转换为字符串的方法分析[译]
2012/09/21 Javascript
封装html的select标签的js操作实例
2013/07/02 Javascript
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
2013/07/09 Javascript
JQuery写动态树示例代码
2013/07/31 Javascript
JS注释所产生的bug 即使注释也会执行
2013/11/19 Javascript
DOM基础教程之事件对象
2015/01/20 Javascript
JavaScript 里的类数组对象
2015/04/08 Javascript
JavaScript按值删除数组元素的方法
2015/04/24 Javascript
nodejs修复ipa处理过的png图片
2016/02/17 NodeJs
js实现网页定位导航功能
2017/03/07 Javascript
Angular 2父子组件之间共享服务通信的实现
2017/07/04 Javascript
angular动态删除ng-repaeat添加的dom节点的方法
2017/07/20 Javascript
BootStrap TreeView使用实例详解
2017/11/01 Javascript
vue中axios解决跨域问题和拦截器的使用方法
2018/03/07 Javascript
基于vue v-for 多层循环嵌套获取行数的方法
2018/09/26 Javascript
vue操作dom元素的3种方法示例
2020/09/20 Javascript
Vue 实现一个简单的鼠标拖拽滚动效果插件
2020/12/10 Vue.js
Python的iOS自动化打包实例代码
2018/11/22 Python
python实现年会抽奖程序
2019/01/22 Python
Python3使用Selenium获取session和token方法详解
2021/02/16 Python
浅析Python模块之间的相互引用问题
2021/02/26 Python
html5教程调用绘图api画简单的圆形代码分享
2013/12/04 HTML / CSS
捷克领先的户外服装及配件市场零售商:ALPINE PRO
2018/01/09 全球购物
家长会演讲稿
2014/04/26 职场文书
青春奉献演讲稿
2014/05/08 职场文书
幼儿园课题方案
2014/06/09 职场文书
幼儿园家长安全责任书
2014/07/22 职场文书
教师批评与自我批评(群众路线)
2014/10/15 职场文书
党的群众路线教育实践活动制度建设计划方案
2014/10/31 职场文书
观看建国大业观后感
2015/06/01 职场文书
2015年四年级班主任工作总结
2015/10/22 职场文书
Nginx进程管理和重载原理详解
2021/04/22 Servers