Hallo Frontendler. Heute möchte ich euch das jQuery Plugin notific8 vorstellen. Mit diesem Plugin könnt ihr stylische, optisch ansprechende Benachrichtigungen (Notifications) erstellen. Inspirieren ließ sich der Entwickler dabei von den Notifications in Windows 8. Diese wiederum haben sich von Mac OS anregen lassen. In beiden Systemen ist es so, dass in der oberen rechten Ecke kleine Kästen einfahren und dem User aktuelle Mitteilungen in den Vordergrund drängen. Z. B. über Updates, Termine und E-Mails. Diese kleinen Notifications verschwinden dann nach einiger Zeit ebenso sanft, wie sie aufgetaucht sind. All das kann man nun auch mit dem jQuery Plugin notific8 auf Websites nachbilden.
Der Spaß funktioniert wie folgt:
$.notific8('My notification with all options.', {
life: 5000, // Wie lange soll die Benachrichtigung auf der Seite verbleiben bevor sie verschwindet
heading: 'Notification Head', // Überschrift der Benachrichtigung
theme: 'amethyst', // Theme
sticky: false, // Besonderheit: True = Benachrichtigung muss vom User aktiv weggeklickt werden
horizontalEdge: 'bottom', // Horizontale Anordnung
verticalEdge: 'left', // Vertikale Anordnung
zindex: 1500 // Der vergebene z-index
});Und kann dann so aussehen:
Wie ihr anhand der Konfiguration des Plugins sehen könnt, habt ihr sogar noch einige Einstellmöglichkeiten. Es ist z. B. möglich:
- Die Notification an einer anderen Stelle als oben rechts zu positionieren.
- Ein anderes Theme zu definieren
- Außerdem kann der Entwickler den User dazu drängen die Benachrichtigung explizit schließen zu müssen. Denkbar praktisch bei äußerst wichtigen Notifications.
Mehrfach-Notifications
Im produktiven Umfeld sind natürlich auch mehrfache Notifications denkbar. Sprich es kommt zur Aneinanderreihung von Benachrichtigungen, die allesamt verarbeitet werden müssen. jQuery.notific8 hat damit keine Probleme. Es ordnet eine eintreffende Notification einfach unter einer evtl. bereits bestehenden Notification an - keine Ruckler oder verschluckte Benachrichrigungen.
Ausprobieren
Auf der Entwicklerseite könnt ihr das Plugin mit den verschiedenen Einstellmöglichkeiten testen. Bei github gibts wie immer den Code und die Docs.
Fazit
Mit jQuery.notific8 gibt es eine elegante Möglichkeit mehr das Thema der Benachrichtigungen auf Websites und Apps zu lösen. User kennen diese Art der Notifications von Windows 8 und Mac OS (wobei Windows 8 hier sicherlich noch nachlegen muss und wird). Ein Einsatz kann also ein Wiedererkennungswert erzeugen. Die Benutzer wissen, wie sie mit den einfahrenden Kästen zu interagieren haben. Außerdem sind sie elegant und passen in den Trend des neuen Flat-Designs - Viel Spaß damit.