Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

PeekABar: Notifications leicht gemacht

    PeekABar: Notifications leicht gemacht

Guck-Guck oder Peek-A-Boo? (Foto: © HumerMedia - Fotolia.com)

Notifications sind ein guter Weg, um Nutzer über den Status des Systems, das sie benutzen, auf dem Laufenden zu halten. Mit jQuery.peekABar könnt ihr das sehr leicht und schnell umsetzen. Wie genau ihr das Script nutzen können, lest ihr im Artikel.

PeekABar: Kleiner Alleskönner

Das einfach zu nutzende jQuery-Skript mit dem Namen peekABar lässt sich via CSS komplett individuell gestalten, ist in der Lage automatisiert wieder zu verschwinden und kann top sowie bottom genutzt werden. Für schnelles Testen können die Hintergrundfarbe sowie das Padding direkt bei der Initialisierung mitgegeben werden. Selbst eine einfache Animation ist für das Skript kein Problem – allerdings wird derzeit nur ein FadeIn-Effekt angeboten. Kurzum, PeekABar bietet alles nötige, was Entwickler für Notifications benötigen.

Eine Instanz mit allen möglichen Featuren sieht so aus:

// Create a bar
var bar = $.peekABar({
    html: 'Custom Message',
    delay: 2000,
    autohide: true,
    padding: '2em',
    backgroundColor: 'rgb(195, 195, 195)',
    animation: {
        type: 'fade',
        duration: '2000'
    },
    opacity: '0.8',
    cssClass: 'custom-class',
    position: 'bottom',
    closeOnClick: true
    onShow: function() {
        console.log('called after bar is shown');
    },
    onHide: function() {
        console.log('called after bar is hidden');
    }
});

// Show the bar
bar.show();

// Hide the bar
bar.hide();

// Show the bar with custom HTML
// This call will override the HTML
// set in any previous definitions.
bar.show({
    html: 'Overrides all, puny human.'
});

Ihr könnt euch das Skript bei GitHub herunterladen. Eine ausführliche Demo könnt ihr euch auf der offiziellen Website zu peekABar ansehen.

Wenn ihr direkt damit arbeiten wollt, dann kann das jQuery-Plugin auch, via Bower, direkt in euer Arbeitsumgebung geladen werden. Das nötige Snippet sieht so aus: bower install jquery.peekABar —save

Wo nutzt ihr Notifications?

Finde einen Job, den du liebst

Schreib den ersten Kommentar!

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

Jetzt anmelden

Hinweis

Du hast gerade auf einen Provisions-Link geklickt und wirst in Sekunden weitergeleitet.

Bei Bestellung auf der Zielseite erhalten wir eine kleine Provision – dir entstehen keine Mehrkosten.


Weiter zum Angebot