Heim >Web-Frontend >js-Tutorial >Der jQuery-Popup-Box-Code kapselt DialogHelper_jquery

Der jQuery-Popup-Box-Code kapselt DialogHelper_jquery

WBOYOriginal: 2016-05-16 16:16:591213Durchsuche

Nachdem ich mir das jQueryUI-Dialogbeispiel angesehen habe, ist der Effekt nicht schlecht, aber die Verwendung ist etwas umständlich und der geschriebene Code ist etwas verdreht und muss erneut gekapselt werden! Es gibt also die folgende einfache DialogHelper-Hilfsklasse. Da der Schwerpunkt dieses Artikels auf Ideen liegt, ist die aktuelle Version des Codes noch sehr grob. Die Idee ist richtig, und was auch immer sie in Zukunft verkörpert, ist nur eine Formsache. Ich hoffe, dass diese Idee alle inspirieren kann. Gleichzeitig ist jeder willkommen, sein Denken zu erweitern und bessere Verbesserungsvorschläge vorzubringen.

Code kopieren Der Code lautet wie folgt:

//erfordere ScrollHelper.js
Funktion DialogHelper() {
    var _this = this;
    var doc = window.document;
    _this.maskDiv = null;
    _this.contentDiv = null;
    var-Optionen = {
        Deckkraft: 0,4
    };
    this.popup = function (contentdiv, optionArg) {
        if (optionArg) {
            for (var prop in optionArg) {
                Optionen[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({
                Eindämmung: „Dokument“,
                Cursor: 'bewegen',
                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 = Funktion (Wert, ganz) {
        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();
            Breite = Breite < 300 ? 300: Breite;
            Höhe = Höhe < 450 ? 450: Höhe;
            $(dialog).css({
                „width“: Breite „px“,
                „height“: Höhe „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-Optionen = {
        „Aktion“: „“,
        „Titel“: „“,
        „Breite“: „50 %“,
        „Höhe“: „50 %“
    };
    if (optionArg) {
        for (var prop in optionArg) {
            Optionen[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("Annuler").appendTo(newA);
var ActionSaveDiv = $("

").appendTo(newDiv);
var newB = $("

").appendTo(ActionSaveDiv);
    newB.on('clic', function() {
        if (typeof saveBtnClickHandler == "function") {
            saveBtnClickHandler();
        >
    });
    $("

").appendTo(newB);
$("

").html("Enregistrer").appendTo(newB);
    var minusHeight = DialogHead.outerHeight() DialogFoot.outerHeight();
    newDialog.data("position", {
        largeur : options.Largeur,
        hauteur : options.Hauteur
    });
    dialogHelper.position(newDialog, DialogBody, minusHeight);
    retourner newDialog;
};
var changeDialogLayout = function(optionArg, dialogObj) {
    options var = {
        "Largeur": "70%",
        "Hauteur": "90%"
    };
    si (optionArg) {
        pour (var prop dans optionArg) {
            options[prop] = optionArg[prop];
        >
    >
    var DialogBody = $(dialogObj).find(".Dialog_Body");
    var DialogHead = $(dialogObj).find(".Dialog_Head");
    var DialogFoot = $(dialogObj).find(".Dialog_Foot");
    var autre = 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() autre;
    dialogObj.data("position", {
        largeur : options.Largeur,
        hauteur : options.Hauteur
    });
    dialogHelper.position(dialogObj, DialogBody, minusHeight);
};

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

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Analyse des ungültigen Problems von $.click() in jQuery_jqueryNächster Artikel：Analyse des ungültigen Problems von $.click() in jQuery_jquery

In Verbindung stehende Artikel

Mehr sehen