欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuery弹出框代码封装DialogHelper

程序员文章站 2022-06-08 10:59:16
jquery弹出框代码封装dialoghelper,看了jqueryui dialog的例子,效果还不错,就是用起来有点儿别扭,写出的代码有点拧巴,需要再封装一下!于是就有了下面这...

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