PNotify - Ein sehr anpassbares Benachrichtigungs-Plugin

Für einige von uns, die ständig beschäftigt sind, behalten Benachrichtigungen uns auf jedem wichtigen Ereignis, newsbit und Informationen. Es verringert die Wartezeit und schafft es, uns mit den neuesten Ereignissen zu versorgen, und es ist kein Wunder, dass wir Benachrichtigungen auf Desktops und Handys erhalten.

Wenn Sie jedoch Benachrichtigungen für Ihre Website erstellen möchten, können Sie diese einfach mit diesem Plugin namens PNotify erstellen. Es ist ein kostenloses und Open-Source-Javascript-Plugin mit vielen Optionen und es ist einfach zu bedienen. Mit PNotify können Sie sogar bis zu 1000 Benachrichtigungen gleichzeitig anzeigen (siehe diesen Benchmark-Test, um es auszuprobieren). Wie cool ist das?

Warum PNotify verwenden?

PNotify, früher bekannt als Pines Notify, trägt drei Hauptbenachrichtigungsarten: Info, Benachrichtigung und Fehler . Es hat eine Reihe von Funktionen, Effekten, Themen und auch Stilen. Sie können verschiedene Stile aus Bootstrap, jQuery UI, Font Awesome oder mit Ihrem eigenen Stil wählen. Es gibt auch etwa 18 vorgefertigte Themen (mit Bootswatch gemacht), aus denen Sie wählen können, und es gibt sogar Übergangseffekte.

Das Tolle an PNotify ist, dass es nicht nur großartige grafische Features bietet, sondern auch mit leistungsfähigen und umfangreichen APIs (oder Modulen) angereichert ist. Diese APIs enthalten Desktopbenachrichtigungen (basierend auf dem Standard für Webbenachrichtigungsentwürfe), dynamische Updateunterstützung, Rückrufe für verschiedene Ereignisse, Verlaufsanzeige, um frühere Benachrichtigungen anzuzeigen, und HTML-Unterstützung im Titel und im Text.

PNotify bietet eine unaufdringliche Benachrichtigung, was bedeutet, dass Sie durch jedes Element hinter der Benachrichtigung klicken können, ohne es zu verwerfen . Mit den Stacks-Funktionen können Sie auch festlegen, wo die Benachrichtigung angezeigt wird. So können Sie den Hinweis überall positionieren: als Stil für die obere / untere Leiste oder sogar als QuickInfo.

Grundlegende Verwendung

Die Quellen von PNotify kommen in anpassbaren Bundle-Modulen und sind hier verfügbar.

Anfangen

Nachdem Sie die Quellen erhalten haben, fügen Sie sie wie folgt in Ihren HTML-Code ein:

PNotify ist sehr einfach zu bedienen. Hier ist eine einfache Benachrichtigung:

 $ (function () {new PNotify ({title: 'Einfache Benachrichtigung', Text: 'Hey, ich bin eine einfache Benachrichtigung.');}); 

Und das ist das Ergebnis:

Um eine Benachrichtigung zu erstellen, initiieren Sie eine neue PNotify-Funktion. Der Titel, Text, Stil und andere Optionen können dann innerhalb der Funktion übergeben werden. Wenn Sie den Benachrichtigungstyp nicht angeben, wird der Standardtyp verwendet, bei dem es sich um einen Hinweis handelt . Es gibt über 20 konfigurierbare Optionen, die Sie weitergeben können. Um die Liste mit ihrem Standardwert anzuzeigen, klicken Sie hier.

Styling

Um den Stil zu ändern, können Sie die styling Option in der Benachrichtigung übergeben und Ihren gewünschten Stil definieren. Verfügbare Stile sind bootstrap2, bootstrap3, jqueryui und fontawesome . Vergessen Sie nicht, verwandte Stilquellen in Ihr Projekt einzubeziehen.

Wenn ich beispielsweise den vorherigen Benachrichtigungsstil in das jQuery UI-Design ändern möchte, verwende ich das folgende Snippet:

 new PNotify ({title: "jQuery UI Style", Text: "Hey, ich styme mit jQuery UI-Design.", styling: "jqueryui"}); 

Es gibt eine andere Möglichkeit, Ihre Benachrichtigungen über diesen Code zu stylen:

 PNotify.prototype.options.styling = "jqueryui"; 

Ändere jqueryui mit dem jqueryui Stil und lege dann diese Zeile vor die Benachrichtigung wie folgt:

 PNotify.prototype.options.styling = "jqueryui"; new PNotify ({title: "jQuery UI Style", Text: "Hey, ich bin mit jQuery UI designed."); 

Hier ist dein Ergebnis, gestylt:

Hinzufügen von Modulen

Module sind umfangreiche APIs, die erweiterte Benachrichtigungsfunktionen ermöglichen. Es gibt 7 Module in PNotify: Desktop, Buttons, NonBlock, Bestätigen, Verlauf, Callbacks und Referenzmodul. Module können verwendet werden, indem die entsprechenden Optionen an die Benachrichtigung übergeben werden.

Im Folgenden finden Sie Beispiele für die Verwendung des Desktop-Moduls:

 PNotify.desktop.permission (); new PNotify ({title: 'Desktop Notification', Text: 'Ich bin eine Desktop-Benachrichtigung. Du musst mir die Erlaubnis geben, damit ich als was erscheinen kann. Wenn nicht, werde ich eine regelmäßige Benachrichtigung erhalten. ', desktop: {desktop: true, symbol: null}}); 

PNotify.desktop.permission(); wird verwendet, um sicherzustellen, dass Benutzer die Erlaubnis erteilt haben , dass die Website Benachrichtigungen anzeigt. Wenn Benutzer die Site nicht zulassen, wird die Benachrichtigung stattdessen als normale Benachrichtigung angezeigt .

Wie Sie sehen können, gibt es die zusätzliche Option, dem Code desktop hinzuzufügen. Der desktop: true aktiviert die Benachrichtigung für den Desktop. Wenn Sie es auf false setzen, wird die Benachrichtigung zu einer regelmäßigen Benachrichtigung.

Sie können auch ein benutzerdefiniertes Symbol über die icon . Fülle es mit deiner Icon URL aus; Sie können es auf false, um das Symbol zu deaktivieren. Wenn Sie es mit null festlegen, wird das Standardsymbol verwendet.

Um weitere Modul-Implementierungen mit ihren Optionen zu sehen, gehen Sie zu diesem Link.

Sie können die Implementierung weiterführen, indem Sie auf die offizielle Seite gehen. Dort können Sie eine fortgeschrittene Verwendung zusammen mit den Demos sehen. Alternativ können Sie die GitHub-Seite für weitere Informationen besuchen.

Erstellen Sie Ihren eigenen Auto-Response-Bot mit Bottr

Die meisten von uns erinnern sich an den Microsoft-Tay-Vorfall, bei dem Internetnutzer innerhalb einiger Tage einige ziemlich verrückte Wörter einem KI-Bot beigebracht haben . Es ist ein lustiges Beispiel für Bots im Web, aber Sie können Ihren eigenen Twitter- oder FB-Bot ohne den KI-Kram machen .Bot

(Tech- und Design-Tipps)

5 Wege, die deine Karriere dich krank macht

Erhebe deine Hand, wenn du jemals den Satz ausgesprochen hast: "Sie zahlen mir nicht genug, um diesen Mist zu ertragen." Dieses Gefühl teilen viele von uns.Aber es bringt drei Fragen mit sich: Ist dein Unglück wirklich über das Gehalt, das du verdienst, oder würdest du glücklich sein mit demselben Lohn, der einen anderen Job macht? Hab

(Tech- und Design-Tipps)