Kod kotak pop timbul jQuery merangkum DialogHelper_jquery

Setelah melihat contoh Dialog jQueryUI, kesannya tidak teruk, tetapi ia agak janggal untuk digunakan dan kod yang ditulis agak berpintal dan perlu dikapsulkan semula! Oleh itu, terdapat kelas tambahan DialogHelper mudah berikut Oleh kerana fokus artikel ini adalah pada idea, versi kod semasa masih sangat kasar. Idea ini betul, dan apa sahaja yang dirangkumkan pada masa hadapan hanyalah formaliti. Saya harap idea ini dapat memberi inspirasi kepada semua Pada masa yang sama, semua orang dialu-alukan untuk mengembangkan pemikiran mereka dan mengemukakan cadangan yang lebih baik untuk penambahbaikan.

Salin kod Kod adalah seperti berikut:

//memerlukan ScrollHelper.js
fungsi DialogHelper() {
    var _ini = ini;
    var doc = window.document;
    _this.maskDiv = null;
    _this.contentDiv = null;
    pilihan var = {
        kelegapan: 0.4
    };
    this.popup = fungsi (contentdiv, optionArg) {
        jika (optionArg) {
            untuk (var prop dalam optionArg) {
                options[prop] = optionArg[prop];
            }
        }
        _this.contentDiv = contentdiv || _this.contentDiv;
        _this.maskDiv = $('

');
        _this.maskDiv.addClass('MaskDiv');
        _this.maskDiv.css({
            'penapis': "Alpha(opacity=" ( options.opacity - "0") * 100 ");",
            'opacity': options.opacity,
            'paparan': 'sekat'
        });
        $(doc.body).append(_this.maskDiv);
        jika (_this.contentDiv) {
            $(doc.body).append(_this.contentDiv);
            _this.contentDiv.show();
            _this.contentDiv.draggable({
                pembendungan: "dokumen",
                kursor: 'bergerak',
                pemegang: ".Dialog_Head"
            });
            $(_this.maskDiv).on("mousemove", function() {
                $("badan").preventScroll();
            });
            $(_this.maskDiv).on("mouseout", function() {
                $("badan").liveScroll();
            });
            if ($(".cke").length == 0 && $(".Dialog_Body").panjang > 0) {
                $(".Dialog_Body").preventOuterScroll();
            }
        }
    };
    this.remove = fungsi () {
        jika (_this.contentDiv) {
            _this.contentDiv.remove();
        }
        jika (_this.maskDiv) {
            _this.maskDiv.remove();
        }
        $("badan").liveScroll();
    };
    this.formatPercentNumber = fungsi (nilai, keseluruhan) {
        if (isNaN(value) && typeof value === "rentetan") {
            jika (value.indexOf("%") !== -1) {
                value = (value.replace("%", "") / 100) * whole;
            } else if (value.indexOf("px") !== -1) {
                value = value.replace("px", "");
            }
        }
        kembalikan Math.ceil(nilai);
    };
    this.position = fungsi (dialog, dialogBody, minusHeight) {
        dialog = dialog || $(".ShowDialogDiv");
        jika (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();
            lebar = lebar             tinggi = tinggi             $(dialog).css({
                "lebar": lebar "px",
                "tinggi": ketinggian "px",
                "atas": Math.ceil((clientHeight - ketinggian) / 2) "px",
                "kiri": Math.ceil((clientWidth - width) / 2) "px"
            });
            dialogBody = dialogBody || $(".Dialog_Body");
            jika (dialogBody[0]) {
                tolakTinggi = tolakTinggi || ($(".Dialog_Head").outerHeight() $(".Dialog_Foot").outerHeight());
                var dialogBodyHeight = ketinggian - minusHeight;
                dialogBody.height(dialogBodyHeight);
            }
        }
    }
}
var createDialogTemplate = fungsi (optionArg, contentHtml, saveBtnClickHandler) {
    pilihan var = {
        "Tindakan": "",
        "Tajuk": "",
        "Lebar": "50%",
        "Ketinggian": "50%"
    };
    jika (optionArg) {
        untuk (var prop dalam 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("klik", function() {
        dialogHelper.remove();
    });
    ActionCancelDiv.on("klik", 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", {
        Breite: Optionen.Width,
        Höhe: Optionen.Height
    });
    dialogHelper.position(newDialog, DialogBody, minusHeight);
    return newDialog;
};
var changeDialogLayout = function(optionArg, dialogObj) {
    var-Optionen = {
        „Breite“: „70 %“,
        „Höhe“: „90 %“
    };
    if (optionArg) {
        for (var prop in optionArg) {
            Optionen[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", {
        Breite: Optionen.Width,
        Höhe: Optionen.Height
    });
    dialogHelper.position(dialogObj, DialogBody, minusHeight);
};

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