SweetAlert – Ein schöner Ersatz für JavaScript-Dialogfelder

Last updated 18. Oktober 2021

Inhalt

Beispiel für eine Eingabeaufforderungsbox

JavaScript ist in alle Browser eingebettet. JavaScript bietet Dialogfelder (Alert, Confirm, Prompt), die in allen gängigen Browsern verfügbar sind. Jeder Browser zeigt diese Dialogfelder in Bezug auf die Benutzeroberfläche unterschiedlich an.

Beim Erstellen einer Anwendung liegt unser Hauptaugenmerk auf der Benutzererfahrung. Und irgendwo bieten die Dialogfelder von JavaScript keine gute Benutzererfahrung. Dies liegt daran, dass diese Boxen in jedem Browser eine unterschiedliche Benutzeroberfläche haben, was die Konsistenz von Look and Feel irgendwie stört.

In diesem Artikel besprechen wir den SweetAlert, der ein schöner Ersatz für JavaScript-Dialogfelder ist. Abgesehen von diesen grundlegenden Warnungen bietet SweetAlert noch viel mehr wie Erfolgsmeldungen, Warnmodelle, Ajax-Behandlung in Popups usw.

SweetAlert-Dialogfelder

Während der Verwendung von SweetAlert haben wir die volle Kontrolle über den Text und die Schaltflächen der Dialogfelder. Wir können den Überschriftstext und den Schaltflächentext nach Belieben ändern.

Nachfolgend finden Sie einige Beispiele für SweetAlert-Dialogfelder.

Dialogfeld „Warnung”

Dialogfeld „Bestätigen”

Eingabeaufforderungsdialogfeld

So verwenden Sie SweetAlert

Die Verwendung von SweetAlert in der Anwendung ist ein unkomplizierter Vorgang. Es erfordert, dass wir ihre JS-Datei einschließen und wir sind gut darin, die Methoden der SweetAlert-Bibliothek zu verwenden.

Beispiel für eine Warnbox

<script src="//unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script>
swal("Hello world!");
</script>

Während Sie SweetAlert verwenden, müssen Sie die swalFunktion verwenden, um die verschiedenen Arten von Dialogfeldern aufzurufen. Der obige Code gibt ein Popup mit dem Text ‘Hallo Welt!’ aus.

Wir können auch den modalen Titel und dann den Text wie folgt festlegen;

swal("Here's the title!", "...and here's the text!");

Wenn Sie aufgrund der Art der Operation ein Popup anzeigen möchten, übergeben Sie das dritte Argument. Drittes Argument kann „Erfolg”, „Warnung”, „Fehler”, „Info” sein.

swal("Good job!", "You clicked the button!", "success"); //success, warning, error, info

Probieren Sie alle Werte des dritten Arguments aus und Sie erhalten für jeden von ihnen eine andere Benutzeroberfläche.

Beispiel für ein Bestätigungsfeld

Um das SweetAlert-Bestätigungsfeld zu verwenden, verwenden Sie den folgenden Code:

swal({
    title: "Are you sure?",
    text: "Once deleted, you will not be able to recover this record!",
    icon: "warning",
    buttons: true,
    dangerMode: true,
})
.then((willDelete) => {
    if (willDelete) {
        swal("Poof! Your record has been deleted!", {
            icon: "success",
        });
    } else {
        swal("Your imaginary file is safe!");
    }
});

Manchmal müssen wir AJAX-Anfragen mit dem Bestätigungsdialogfeld senden. In diesem Fall senden wir nach dem Klicken auf den Bestätigen-Button eine AJAX-Anfrage und behandeln die Antwort dann wie folgt.

swal({
    title: "Are you sure?",
    text: "Once deleted, you will not be able to recover this record!",
    icon: "warning",
    buttons: true,
    dangerMode: true,
})
.then((willDelete) => {
    if (willDelete) {
        jQuery.get('ajax.php', function(response) {
            if(response == true) {
                swal("Poof! Your record has been deleted!", {
                    icon: "success",
                });
            }
        });
    } else {
        swal("Your imaginary file is safe!");
    }
});

Beispiel für eine Eingabeaufforderungsbox

Ein Eingabeaufforderungsdialogfeld wird auf der Website sehr selten verwendet. Wenn es jedoch jemand mit SwetAlert verwenden möchte, verwenden Sie den folgenden Code.

swal("Write something here:", {
    content: "input",
})
.then((value) => {
    swal(`You typed: ${value}`);
});

Dies sind die Grundlagen der SweetAlert-Bibliothek. Weitere Informationen finden Sie in der SweetAlert- Dokumentation.

Zum Thema passende Artikel

Aufnahmequelle: artisansweb.net