Dank moderner Webdesign-Techniken können Entwickler Animationen, die von den meisten Browsern unterstützt werden, schnell implementieren. Ich denke, Warnmeldungen sind sehr verbreitet, da die Standard-JavaScript-Warnfelder eher aufdringlich und schlecht gestaltet sind. Dies führt dazu, dass Entwickler herausfinden, welche Lösungen für eine benutzerfreundlichere Benutzeroberfläche besser geeignet sind.
Für dieses Tutorial möchte ich erklären, wie wir CSS3-Benachrichtigungsfelder zusammenstellen können, die oben im Seitentext angezeigt werden. Benutzer können dann auf die Benachrichtigungen klicken, um sie auszublenden und sie schließlich aus dem DOM zu entfernen. Als Spaß hinzugefügt, habe ich auch Schaltflächen hinzugefügt, in die Sie klicken können, um ein neues Benachrichtigungsfeld oben auf der Seite anzufügen. Schauen Sie sich meine Beispiel-Demo an, um eine bessere Vorstellung davon zu bekommen, was wir machen werden.
Live Demo - Quellcode herunterladen
Die Seite erstellen
Um zu beginnen, müssen wir zwei Dateien namens "index.html" erstellen. und? style.css ?. Ich füge einen Verweis auf die neueste jQuery-Bibliothek hinzu, die von Googles Code-CDN gehostet wird. Der HTML-Code ist ziemlich einfach, da nur ein Dummy-Text in einer Alert-Box erstellt werden muss. Das gesamte JavaScript wurde am Ende der Seite hinzugefügt, um HTTP-Anforderungen zu speichern.
Dies ist mein Header-Code zum Einstellen der externen Dokumente und des HTML5-Doctype. Nicht sehr kompliziert, da wir gerade eine Demo-Demo erstellen. Für die Benachrichtigungsfenster habe ich zwei verschiedene Stile eingerichtet - Erfolg und Fehler. Es gibt andere Designstile wie Warnungen und Infoboxen. Ich habe jedoch keine alternativen Stile erstellt, weil ich mich mehr auf die Effekte konzentrieren wollte.