jquery ui Bootstrap implementiert benutzerdefinierte style_jquery

Sehen Sie sich zunächst die Darstellung des benutzerdefinierten Eingabeaufforderungsfelds an

Gewöhnliche Alarmaufforderungen können natürlich im Stil angepasst werden

Confirm-Bestätigungsfeld unterstützt Rückruf

Code kopieren Der Code lautet wie folgt:

//Informationen zur Nachrichtenaufforderung, Rückruffunktion (wahr/falsch)
window.shconfirm = Funktion (Nachricht, Rückruf)
Die Parameter der Rückruffunktion sind wahr/falsch

Benutzereingabefeld für sofortige Einladung

Code kopieren Der Code lautet wie folgt:

//Informationen zur Nachrichtenaufforderung, Callback(msg)-Rückruffunktion (Nachrichteneingabe durch den Benutzer), Parameter: Regex-Eingabe bei regulärer Überprüfung, Regexmsg-Eingabeaufforderung bei regulärer Überprüfung fehlgeschlagen
window.shprompt = Funktion (Nachricht, Rückruf, Regex, Regexmsg)
Bei dieser Nachricht handelt es sich um die Aufforderungsnachricht *
Rückruf ist die Rückruffunktion * Der Rückgabeparameter ist der vom Benutzer eingegebene Wert (userinputmsg)
Die beiden Parameter regex und regexmsg sind optional und dienen zur Überprüfung der Benutzereingabe. Beide Parameter müssen gleichzeitig angezeigt werden. Kann nicht alleine verwendet werden.

Das Folgende ist die Implementierung von js,

Derzeit handelt es sich um eine Warnmeldung, die die JQuery-Benutzeroberfläche und die eigene Kapselung von Bootstrap integriert.

Code kopieren Der Code lautet wie folgt:

(Funktion () {
    var _shconfirm = {};
    var _shprompt = {};
    //闭包初始化；
    $(function () {
        $("#dialogalert").dialog({
            modal: wahr,
            autoOpen: false,
            anzeigen: {
                Wirkung: „blind“,
                Dauer: 500
            },
            verstecken: {
                Effekt: „explodieren“,
                Dauer: 500
            },
            Schaltflächen: {
                Funktion: Funktion () {
                    $(this).dialog("close");
                }
            }
        });
        $("#dialogconfirm").dialog({
            modal: wahr,
            autoOpen: false,
            anzeigen: {
                Effekt: „gleiten“,
                Dauer: 500
            },
            verstecken: {
                Wirkung: „drop“,
                Dauer: 500
            },
            Schaltflächen: {
                Funktion: Funktion () {
                    _shconfirm.shconfirmCallBack(true);
                    $(this).dialog("close");
                },
                Funktion: Funktion () {
                    _shconfirm.shconfirmCallBack(false);
                    $(this).dialog("close");
                }
            }
        });
        $("#dialogprompt").dialog({
            modal: wahr,
            autoOpen: false,
            anzeigen: {
                Wirkung: „blind“,
                Dauer: 500
            },
            verstecken: {
                Wirkung: „Puff“,
                Dauer: 500
            },
            Schaltflächen: {
                Funktion: Funktion () {
                    if (_shprompt.shpromptObj.regex) {
                        if (!_shprompt.shpromptObj.regex.test($("#dialogprompt .text").val())) {
                            $("#dialogprompt .alert .promptmsg").html(_shprompt.shpromptObj.regexmsg);
                            $("#dialogprompt .alert").slideDown();
                            zurück;
                        } sonst {
                            $("#dialogprompt .alert").hide();
                        }
                    }
                    _shprompt.shpromptObj.callback($("#dialogprompt .text").val());
                    $(this).dialog("close");
                },
                Funktion: Funktion () {
                    _shprompt.shpromptObj.callback($("#dialogprompt .text").val());
                    $(this).dialog("close");
                }
            }
        });
    });
    window.shalert = Funktion (Nachricht) {
        $("#dialogalert .msgcontent").html(message);
        $("#dialogalert").dialog("open");
    };
    //message 提示的信息 ,callback(true/false)回调函数
    window.shconfirm = Funktion (Nachricht, Rückruf) {
        $("#dialogconfirm .msgcontent").html(message);
        $("#dialogconfirm").dialog("open");
        _shconfirm.shconfirmCallBack = Rückruf;
    };
    //message 提示的信息 ,callback(msg)回调函数（用户输入的消息）, param：regex 输入的 正则验证，regexmsg 正则验证不通过的提示
    window.shprompt = Funktion (Nachricht, Rückruf, Regex, Regexmsg) {
        $("#dialogprompt .msgcontent").html(message);
        $("#dialogprompt").dialog("open");
        _shprompt.shpromptObj = {
            Rückruf: Rückruf,
            Regex: Regex,
            regexmsg: regexmsg
        };
    }
})();

Das Folgende ist der Anrufcode

bestätigen //Leider kann js die Pause des js-Skripts nicht simulieren, daher können wir nur die Rückruffunktion verwenden, um mit dem nächsten Schritt fortzufahren.

Code kopieren Der Code lautet wie folgt:

Funktion ShConfirm() {
               shconfirm("Sind Sie sicher, dass Sie dies tun möchten!", Funktion (Ergebnis) {
                       if (Ergebnis) {
warning("Auf OK geklickt");
                    } sonst {
warning("Auf Abbrechen geklickt");
                }
            });
}

Funktion ShPrompt() {
                 shprompt("Was ist 1 1 gleich?", Funktion (Text) {
alarm("Der Benutzer hat Folgendes eingegeben: " text);
                }, /^d{1,}$/, "Bitte geben Sie eine Zahl ein!");
}

Verwenden Sie Shalert einfach direkt. Es hat den gleichen Effekt wie js Alert.

Code kopieren Der Code lautet wie folgt:

Ich habe den Quellcode auf Baidu Netdisk gestellt. Jeder ist willkommen, zu lernen und sich auszutauschen.

Quellcode-Download-Adresse

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

Dieses Steuerelement verfügt tatsächlich über rekonfigurierbare Teile, wie z. B. Initialisierungsmethoden usw. Da die Aufgabe eng ist, werde ich sie zunächst so verwenden.

Diese Probleme werden in der nächsten Optimierung behoben.

Der ursprüngliche Stil ist wie folgt und kann durch Ändern des referenzierten CSS erreicht werden. Detaillierte Anweisungen finden Sie in der Demo.

Das Obige ist der gesamte Inhalt dieses Artikels, Sie werden davon sehr profitieren.