Drücke die Tasten ◄ ► für weitere Artikel  

jQuery Benachrichtigungen: Unauffällige Helfer für Web-Apps

Benachrichtigungen sind ein wichtiger Bestandteil von Web-Anwendungen. Einige Möglichkeiten, diese unaufdringlich und elegant einzubinden, stellen wir euch hier vor.

jQuery Benachrichtigungen: Unauffällige Helfer für Web-Apps

Ein Projekt zu entwickeln, das sofort von jedem bedient werden kann, ist schwierig. Man kann das Design vereinfachen, aber nur in den seltensten Fällen etwas kreieren, was derartig intuitiv ist, dass jeder Benutzer sofort damit klarkommt.

Benachrichtigungen wie Tooltips und Notification-Bars sind ein wichtiger Bestandteil von solchen Web-Projekten. Unaufdringliche Helfer, die den JavaScript- Boardmitteln bei weitem überlegen sind. Einige Scripte  für solche Benachrichtigungen möchten wir euch heute vorstellen.

jBar notification Plugin

jBar Notification
jBar

jBar ist ein Benachrichtigungs-Plugin für , das einfache Benachrichtigungen im oberen Bereich des Browsers ermöglicht. Nachdem die jBar erscheint, kann sie mit einem Klick wieder ausgeblendet werden und wird durch ein kleines Ribbon ersetzt, mit dem die jBar wieder zum Vorschein gebracht werden kann.

Die jBar kann fixed oder static positioniert werden. Fixed bedeutet, dass man die Bar auch beim Scrollen sieht. Static lässt sie dementsprechend beim Scrollen aus dem Viewport verschwinden. Das Plugin erlaubt die Verzögerung, mit der die jBar erscheinen soll, und alle Farben sowie Verlinkungen und Texte einzustellen.

Nicht möglich hingegen sind Anpassungen wie das Ausblenden des so genannten calltoAction-Button, sodass jBar ohne Quellcode Anpassungen nur für Notifications mit einem Bestätigungs-Button, zum Beispiel als Ersatz für alert(), geeignet ist.

Auf der Projektseite von jBar könnt ihr euch selbst vom Plugin überzeugen.

Notify! - Notification Bar

Screenshot von Notify!
Notify!

Notify! sieht zwar nicht so schick aus wie jBar, bietet aber einen erweiterten Funktionsumfang. So ist es möglich, jegliche Informationen in Notify! zu hinterlegen. Das heißt es können neben Texten und Links auch Bilder und Videos eingebunden werden. Notify! kann so eingebunden werden, dass die Benachrichtigungsleiste immer im Viewport bleibt, beim Scrollen nachrückt, beim Scrollen aus dem Viewport verschwindet oder on-demand eingeblendet wird.

Suboptimal ist, dass Notify! sich nicht automatisch an die Höhe des Inhalts anpasst. Das und die eher dürftige Optik, lässt sich aber schnell im Stylesheet beheben.

Auf der Projektseite von Notify! steht das Script als Demo und Download bereit.

jQuery Notice

jQuery Notice

Mit jQuery Notice können Benachrichtigungen realisiert werden, wie sie vielen Mac-Usern schon von der beliebten Benachrichtigungs-Software Growl bekannt sind,. Die Benachrichtigungsfenster werden in der oberen rechten Ecke des Browsers eingeblendet und verschwinden nach einiger Zeit. Auch besteht die Möglichkeit, feste Benachrichtigungen einzublenden, die nur vom User weggeklickt werden können.

jQuery Notice ist wie Growl für kurze Textbenachrichtigungen ausgelegt. Dennoch können beliebige HTML-Inhalte - also auch beispielsweise Bilder eingefügt werden. Eine automatische Anpassung der Größe,  findet jedoch ohne Anpassung des Stylesheets nicht statt.

Eine Demo und den Link zum Download findet ihr auf der Projektseite von jQuery Notice.

Owl - Unobtrusive CSS3 Notification

Owl Notification Screenshot
Owl

Owl bietet eine optisch sehr ansprechende iOS-mäßige Benachrichtigungslösung auf CSS3 Basis an. Die Benachrichtigungen können Texte, Bilder und Ions  enthalten (im Lieferumfang des Scriptes sind über 100 Vector-Glyphen) und werden mit einer schicken Animation auf aktuellen Versionen der gängigsten Browser eingeblendet. Die Benachrichtigungen haben einen eingebauten Timer, der alle vier Sekunden den Zeitpunkt seit Erstellung der Benachrichtigung errechnet und anzeigt.

Benachrichtigungen können automatisch ausgeblendet oder so erzeugt werden, dass sie vom User weg geklickt werden müssen. Außerdem können Callback-Funktionen eingefügt und so neue Benachrichtigungen erzeugt oder andere Funktionen eurer Projekte ausgeführt werden.

Den Download und eine Demo findet ihr auf der Projektseite von Owl.

71 Shares bis jetzt – Dankeschön!

Bewerten
VN:F [1.9.22_1171]
Eine Antwort
  1. von Jetzt WebApps noch schneller und kreativ… am 07.01.2013 (10:01Uhr)

    [...] für Web-Apps Benachrichtigungen sind ein wichtiger Bestandteil von Web-Anwendungen. Read more on t3n Magazin Tags: gestalten, kreativer, schneller, [...]

Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema Apps
10 nützliche JavaScript-Funktionen und jQuery-Plugins
10 nützliche JavaScript-Funktionen und jQuery-Plugins

Fast täglich werden neue JavaScript-Bibliotheken und -Plugins veröffentlicht. Einige nützliche Helfer und Effekte haben wir in diesem Artikel zusammengetragen. » weiterlesen

Tempy.js: Blitzschnelle Client-Templates mit HTML5-LocalStorage
Tempy.js: Blitzschnelle Client-Templates mit HTML5-LocalStorage

Es gibt viele verschiedene Möglichkeiten zur Realisierung von Client-Side-Templates. Tempy.js nutzt den LocalStorage, um die Aufrufe zu minimieren und die Performance zu steigern. Wir stellen es... » weiterlesen

Natives JavaScript statt jQuery – So machst du deine Webprojekte schlanker
Natives JavaScript statt jQuery – So machst du deine Webprojekte schlanker

Die JavaScript-Bibliothek jQuery erleichtert uns zweifellos das Leben als Entwickler. Der enorme Funktionsumfang und die vergleichsweise hohe Dateigröße stehen bei manchen Projekten aber nicht im... » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n-Newsletter
Top-Themen der Woche für Web-Pioniere
Jetzt kostenlos
anmelden
Diesen Hinweis verbergen