Rumah >hujung hadapan web >tutorial js >Kod kotak pop timbul jQuery merangkum DialogHelper_jquery

Kod kotak pop timbul jQuery merangkum DialogHelper_jquery

WBOYasal: 2016-05-16 16:16:591219semak imbas

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 < 300 ? 300 : lebar;
            tinggi = tinggi < 450 ? 450 : ketinggian;
            $(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);
};

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

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Analisis masalah tidak sah $.click() dalam jQuery_jqueryArtikel seterusnya：Analisis masalah tidak sah $.click() dalam jQuery_jquery

Artikel berkaitan

Lihat lagi