Vorheriger Artikel Nächster 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.

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
Vorheriger Artikel Zurück zur Startseite Nächster Artikel
Keine Antwort
Deine Meinung

Bitte melde dich an!

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

Jetzt anmelden

Mehr zum Thema Apps
StripJS: Die etwas andere Lightbox-Gallery
StripJS: Die etwas andere Lightbox-Gallery

StripJS ist eine responsive Lightbox-Galerie die nur einen Teil der Website verdeckt. Neben Bildern lassen sich damit auch Videos einbinden. » weiterlesen

Für euer CMS oder eure Web-App: Mit dem jQuery-Plugin ContentBuilderJS werden Inhalte einfach zusammengeklickt
Für euer CMS oder eure Web-App: Mit dem jQuery-Plugin ContentBuilderJS werden Inhalte einfach zusammengeklickt

ContentBuilderJS ist ein jQuery-Plugin, mit dem sich Webseiten aus vorgefertigten Blöcken einfach zusammenklicken lassen. Die Inhalte der jeweiligen Blöcke lassen sich anschließend direkt Inline … » weiterlesen

Frontend-Framework für Web-Apps: Zurb stellt Foundation für Apps vor
Frontend-Framework für Web-Apps: Zurb stellt Foundation für Apps vor

Zurb hat eine neue Version seines Frontend-Frameworks vorgestellt. Foundation für Apps soll, wie der Name schon andeutet, zur Erstellung responsiver Web-Apps genutzt werden. » weiterlesen

Kennst Du schon unser t3n Magazin?

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