当前位置： 移动技术网 > IT编程>开发语言>JavaScript > jQuery弹出框代码封装DialogHelper

jQuery弹出框代码封装DialogHelper

2019年03月31日  | 移动技术网IT编程  | 我要评论

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网