Home > Article > Web Front-end > jQuery pop-up box code encapsulates DialogHelper_jquery

jQuery pop-up box code encapsulates DialogHelper_jquery

WBOYOriginal: 2016-05-16 16:16:591162browse

After looking at the jQueryUI Dialog example, the effect is not bad, but it is a bit awkward to use and the code written is a bit twisted and needs to be encapsulated again! So there is the following simple DialogHelper auxiliary class. Because the focus of this article is on ideas, the current version of the code is still very rough. The idea is right, and whatever it is encapsulated in the future is just a formality. I hope this idea can inspire everyone. At the same time, everyone is welcome to expand their thinking and put forward better suggestions for improvement.

Copy code The code is as follows:

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

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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Analysis of invalid problem of $.click() in jQuery_jqueryNext article：Analysis of invalid problem of $.click() in jQuery_jquery

See more

jQuery pop-up box code encapsulates DialogHelper_jquery

Related articles