So erstellen Sie ein benutzerdefiniertes Alarmfeld in JavaScript

In JavaScript möchten wir häufig Webseiten mit kundenspezifischen Warnungsfeldern erstellen, um eine Webseite attraktiver zu machen. Darüber hinaus können einige zusätzliche Funktionen auch in der Alarmbox hinzugefügt werden, um Anpassungszwecke zu erhalten. In solchen Fällen erleichtert das Erstellen einer benutzerdefinierten Alarmbox Ihr Entwicklungsleben und verbessert das Erscheinungsbild der Website.

In diesem Blog veranschaulicht.

So entwerfen Sie eine benutzerdefinierte Alarmbox in JavaScript?

Zum Erstellen eines benutzerdefinierten Warnungsfelds in JavaScript können Sie:

• "Sweetalert" -Bibliothek
• "JQuery" Bibliothek

Wir werden jetzt jede der beiden Ansätze nacheinander durchlaufen!

Methode 1: Erstellen Sie eine benutzerdefinierte Alarmbox in JavaScript mit der SweetAgerert -Bibliothek

SweetAlert ist eine JavaScript -Bibliothek, mit der Warnungen in Webanwendungen und Websites mit Hilfe einer Schaltfläche angepasst werden können. Sie können seine nutzen “Schwal.Feuer()Methode zum Erstellen eines Warnkästchens und Anpassung mit CSS. Es kann durch Angeben der “durchgeführt werdenInhaltsdelieferetzwerk”(CDN) Link der SweetAlert -Bibliothek in“”Tag zum Zugriff darauf.

Beispiel

Im folgenden Beispiel werden wir das laden "JQuery" -Datei und "CDN" Datei in unseren Skript -Tags wie folgt:

Jetzt werden wir CSS auf der Taste anwenden. Sein Styling umfasst das “Polsterung"Dadurch wird der Gesamtbereich der Taste auf 15px und" festgelegt "Textausrichtung”Wird den Text auf die Mitte ausrichten:

Dann erstellen Sie eine “Taste"Mit dem Namen benutzerdefinierter Benachrichtigungsbox aktivieren, das das Alarmfeld auslöst und zuweisen"ShowAlert”Als ID, auf die die JavaScript -Funktion zugegriffen wird:

Greifen Sie zuletzt auf die angegebene Taste -ID zu und wenden Sie die “anklicken()Methode darauf. Infolgedessen, wenn die Schaltfläche angeklickt wird, ist die “Schwal.Feuer()Die Methode gibt den entsprechenden Text in einem Alarmfeld zurück:

Die Ausgabe der obigen Implementierung erfolgt wie folgt:

Methode 2: Erstellen Sie mit der JQuery -Bibliothek das benutzerdefinierte Alarmfeld in JavaScript

JQuery ist eine JavaScript-Bibliothek, in der Events mit einer benutzerfreundlichen API viel einfacher behandelt werden kann. Sie können es verwenden, um die ID und Klasse des Alarmboxs zu erhalten und ihnen verschiedene Methoden anzuwenden, um eine benutzerdefinierte Warnung zu erstellen.

Das folgende Beispiel erklärt das angegebene Konzept.

Beispiel

Erstens laden wir die JavaScript -Bibliothek “JQuery”In unserem Programm:

Initialisieren Sie nun die "Div ID", "Div -Klasse" und "Button Class" In der HTML -Datei:

Im folgenden Schritt werden wir eine Taste mit dem Namen “angeben“Aktivieren Sie die benutzerdefinierte Alarmbox”. Es wird so funktionieren, dass beim Klicken der Schaltfläche die “die“ONCLICK"Ereignis wird die" auslösen "showAlert ()" Methode:

Danach werden wir die Funktion showAlert () definieren, die zwei Argumente akzeptiert. In seinem Körper werden wir auf die Div -ID zugreifen, die Div -Class -Nachricht und die Button -Klasse abrufen. Der "Text()Die Methode gibt den Textinhalt der Nachricht und die “zurücklösen()Die Methode entfernen die Ereignishandler aus der Nachricht. Wenn die Schaltfläche angeklickt wird. Zuletzt die “klicken()Die Methode wird für die Handhabung der Nachricht im Alarmbox angewendet:

Style die benutzerdefinierte Alarmbox, um sie attraktiv zu machen:

Ausgang

Wir haben verschiedene kreative Methoden erörtert, um eine benutzerdefinierte Alarmbox in JavaScript zu erstellen. Sie können eine der Methoden entsprechend Ihrer Anforderung anwenden.

Abschluss

Um ein benutzerdefiniertes Alarmfeld in JavaScript zu erstellen, können Sie die “verwendenSweetalert Library, die ein „CDN“ enthältDatei, um das zu aktivieren "Schwal.Feuer()Methode und “JQueryDie Bibliothek, in der die JQuery -Bibliothek in das Projekt geladen wird, holen Sie verschiedene Attribute des Alarmbox. In diesem Artikel wurden die Methoden zum Erstellen benutzerdefinierter Warnungsfelder mit JavaScript erläutert.