15.042013

jQuery.notific8 - Ansprechende Benachrichtigungen erstellen

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:

notifications

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.