jquery ui bootstrap melaksanakan style_jquery tersuai

Mula-mula lihat pada pemaparan kotak gesaan tersuai

Gesaan biasa amaran sudah tentu boleh disesuaikan dengan gaya

kotak pengesahan sahkan menyokong panggilan balik

Salin kod Kod adalah seperti berikut:

//Maklumat gesaan mesej, fungsi panggil balik(benar/salah)
window.shconfirm = fungsi (mesej, panggil balik)
Parameter fungsi panggil balik adalah benar/salah

kotak input pengguna jemputan segera

Salin kod Kod adalah seperti berikut:

//maklumat gesaan mesej, fungsi panggil balik(msg) (input mesej oleh pengguna), param: input regex pengesahan biasa, pengesahan biasa regexmsg gagal segera
window.shprompt = fungsi (mesej, panggil balik, regex, regexmsg)
Mesej di sini ialah mesej gesaan *
panggil balik ialah fungsi panggil balik * Parameter pulangan ialah nilai yang dimasukkan oleh pengguna (userinputmsg)
Kedua-dua parameter regex dan regexmsg adalah pilihan dan digunakan untuk mengesahkan input pengguna kedua-dua parameter perlu muncul pada masa yang sama. Tidak boleh digunakan secara bersendirian.

Berikut ialah pelaksanaan js,

Pada masa ini ini ialah gesaan amaran yang menyepadukan jquery ui dan enkapsulasi bootstrap sendiri.

Salin kod Kod adalah seperti berikut:

(fungsi () {
    var _shconfirm = {};
    var _shprompt = {};
    //闭包初始化；
    $(fungsi () {
        $("#dialogalert").dialog({
            modal: benar,
            autoBuka: palsu,
            tunjukkan: {
                kesan: "buta",
                tempoh: 500
            },
            sembunyikan: {
                kesan: "meletup",
                tempoh: 500
            },
            butang: {
                确定: fungsi () {
                    $(this).dialog("close");
                }
            }
        });
        $("#dialogconfirm").dialog({
            modal: benar,
            autoBuka: palsu,
            tunjukkan: {
                kesan: "slaid",
                tempoh: 500
            },
            sembunyikan: {
                kesan: "jatuh",
                tempoh: 500
            },
            butang: {
                确定: fungsi () {
                    _shconfirm.shconfirmCallBack(true);
                    $(this).dialog("close");
                },
                取消: fungsi () {
                    _shconfirm.shconfirmCallBack(false);
                    $(this).dialog("close");
                }
            }
        });
        $("#dialogprompt").dialog({
            modal: benar,
            autoBuka: palsu,
            tunjukkan: {
                kesan: "buta",
                tempoh: 500
            },
            sembunyikan: {
                kesan: "sedut",
                tempoh: 500
            },
            butang: {
                确定: fungsi () {
                    jika (_shprompt.shpromptObj.regex) {
                        jika (!_shprompt.shpromptObj.regex.test($("#dialogprompt .text").val())) {
                            $("#dialogprompt .alert .promptmsg").html(_shprompt.shpromptObj.regexmsg);
                            $("#dialogprompt .alert").slideDown();
                            kembali;
                        } lain {
                            $("#dialogprompt .alert").hide();
                        }
                    }
                    _shprompt.shpromptObj.callback($("#dialogprompt .text").val());
                    $(this).dialog("close");
                },
                取消: fungsi () {
                    _shprompt.shpromptObj.callback($("#dialogprompt .text").val());
                    $(this).dialog("close");
                }
            }
        });
    });
    window.shalert = fungsi (mesej) {
        $("#dialogalert .msgcontent").html(message);
        $("#dialogalert").dialog("open");
    };
    //message 提示的信息 ,callback(true/false)回调函数
    window.shconfirm = fungsi (mesej, panggil balik) {
        $("#dialogconfirm .msgcontent").html(message);
        $("#dialogconfirm").dialog("open");
        _shconfirm.shconfirmCallBack = panggil balik;
    };
    //message 提示的信息 ,panggilan balik(msg)回调函数（用户输入的消息）, param：regex 输入的 正则验证，regexmsg 的成证，regexmsg示
    window.shprompt = fungsi (mesej, panggil balik, regex, regexmsg) {
        $("#dialogprompt .msgcontent").html(message);
        $("#dialogprompt").dialog("open");
        _shprompt.shpromptObj = {
            panggil balik: panggil balik,
            regex: regex,
            regexmsg: regexmsg
        };
    }
})();

Berikut ialah kod panggilan

sahkan //Malangnya, js tidak dapat mensimulasikan jeda skrip js, jadi kami hanya boleh menggunakan fungsi panggil balik untuk meneruskan langkah seterusnya.

Salin kod Kod adalah seperti berikut:

fungsi ShConfirm() {
               shconfirm("Adakah anda pasti mahu melakukan ini!", fungsi (hasil) {
                       jika (hasil) {
makluman("Diklik OK");
                    } lain {
alert("Diklik Batal");
                }
            });
}

fungsi ShPrompt() {
                 shprompt("Apakah 1 1 sama dengan?", fungsi (teks) {
alert("Pengguna memasukkan: " teks);
                }, /^d{1,}$/, "Sila masukkan nombor!");
}

Hanya guna shalert terus. Ia mempunyai kesan yang sama seperti js alert.

Salin kod Kod adalah seperti berikut:

Saya telah meletakkan kod sumber pada Baidu Netdisk Semua orang dialu-alukan untuk belajar dan bertukar.

Alamat muat turun kod sumber

http://pan.baidu.com/s/1c00Cl36

Kawalan ini sebenarnya mempunyai bahagian yang boleh dikonfigurasikan semula, seperti kaedah pemulaan, dsb. Ini belum diekstrak Kerana tugasnya ketat, saya akan menggunakannya seperti ini dahulu.

Isu ini akan ditangani dalam pengoptimuman seterusnya.

Gaya asal adalah seperti ini, yang boleh dicapai dengan mengubah suai css yang dirujuk Terdapat arahan terperinci dalam demo.

Di atas adalah keseluruhan kandungan artikel ini, anda akan mendapat banyak manfaat.