PNotify - Ein hochgradig anpassbares Benachrichtigungs-Plugin
Für einige von uns, die ständig beschäftigt sind, halten uns Benachrichtigungen über alle wichtigen Ereignisse, Neuigkeiten und Informationen auf dem Laufenden. Es verringert die Wartezeit, während es uns gelingt, uns mit den neuesten Ereignissen auf den neuesten Stand zu bringen, und es ist kein Wunder, dass wir Benachrichtigungen auf Desktops und Handys erhalten.
Wenn Sie jedoch eine Benachrichtigung für Ihre Site erstellen möchten, können Sie diese einfach mit diesem Plugin namens PNotify erstellen. Es ist ein kostenloses und quelloffenes Javascript-Plugin mit vielen Optionen, das einfach zu bedienen ist. Mit PNotify können Sie sogar bis zu 1000 Benachrichtigungen gleichzeitig anzeigen (siehe Benchmarking-Test). Wie cool ist das?
Warum PNotify verwenden??
PNotify, früher bekannt als Pines Notify, hat drei Hauptbenachrichtigungstypen: Info, beachten und Error. Es verfügt über eine Reihe von Funktionen, Effekten, Designs und Stilen. Sie können zwischen Bootstrap, jQuery UI, Font Awesome oder einem anderen Stil wählen. Es gibt auch ungefähr 18 vorgefertigte Designs (mit Bootswatch erstellt), aus denen Sie auswählen können, und es gibt sogar Übergangseffekte.
Das Tolle an PNotify ist, dass es nicht nur fantastische grafische Funktionen bietet, sondern auch mit leistungsstarken und umfangreichen APIs (oder Modulen) angereichert ist. Zu diesen APIs gehören Desktopbenachrichtigungen (basierend auf dem Web Notifications Draft-Standard), Unterstützung für dynamische Updates, Rückrufe für verschiedene Ereignisse, Verlaufsanzeige, um frühere Benachrichtigungen anzuzeigen, und HTML-Unterstützung im Titel und im Text.
PNotify bietet eine unauffällige Benachrichtigung Das bedeutet, dass Sie jedes Element hinter der Benachrichtigung durchklicken können, ohne es abzulehnen. Sie können auch festlegen, wo die Benachrichtigung mit den Stacks-Funktionen angezeigt wird. Dadurch können Sie die Benachrichtigung überall platzieren: als obere / untere Leiste oder sogar als Tooltip.
Grundlegende Verwendung
Die Quellen von PNotify werden in anpassbaren Paketmodulen geliefert und sind hier verfügbar.
Fertig machen
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: 'Simple Notification', Text: 'Hey, ich bin eine einfache Benachrichtigung.'););
Und das ist das Ergebnis:
Grundsätzlich initiieren Sie zum Erstellen einer Benachrichtigung 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 a verwendet beachten. Es gibt ungefähr 20+ konfigurierbare Optionen Sie können durch. Klicken Sie hier, um die Liste mit dem Standardwert anzuzeigen.
Styling
Um den Stil zu ändern, können Sie das übergeben Styling Option in der Benachrichtigung und definieren Sie Ihren gewünschten Stil. Verfügbare Stile sind bootstrap2, bootstrap3, Jqueryui und fontawesome. Vergiss es nicht verwandte Stilquellen einschließen in Ihrem Projekt.
Wenn ich beispielsweise den vorherigen Benachrichtigungsstil in das Design der jQuery-Benutzeroberfläche ändern möchte, verwende ich das folgende Snippet:
new PNotify (title: "jQuery UI Style", Text: "Hey, ich bin mit dem jQuery UI-Theme gestaltet.", Styling: "jqueryui");
Es gibt eine andere Möglichkeit, Ihre Benachrichtigung über diesen Code zu gestalten:
PNotify.prototype.options.styling = "jqueryui";
Veränderung Jqueryui mit dem gewünschten Stil, fügen Sie die folgende Zeile vor der Benachrichtigung ein:
PNotify.prototype.options.styling = "jqueryui"; new PNotify (title: "jQuery UI Style"), Text: "Hey, ich bin mit einem jQuery UI-Theme gestaltet.");
Hier ist dein Ergebnis, gestylt:
Module hinzufügen
Module sind umfangreiche APIs, die erweiterte Benachrichtigungsfunktionen ermöglichen. Es gibt 7 Module in PNotify: Desktop, Schaltflächen, NonBlock, Confirm, History, Callbacks und Referenzmodul. Module können verwendet werden, indem die entsprechenden Optionen in die Benachrichtigung übernommen werden.
Nachfolgend finden Sie die Codes, die Ihnen zeigen, wie Sie das Desktop-Modul verwenden:
PNotify.desktop.permission (); new PNotify (title: 'Desktop Notification', Text: 'Ich bin eine Desktop-Benachrichtigung. Sie müssen mir die Erlaubnis erteilen, damit ich als das erscheinen kann, was ich bin. Andernfalls werde ich zu einer regelmäßigen Benachrichtigung. ', desktop: desktop: true, icon: null);
PNotify.desktop.permission (); wird verwendet, um sicherzustellen, dass Benutzer dies tun Erlaubnis erteilt für die Site, um die Benachrichtigung anzuzeigen. Wenn Benutzer die Site nicht zulassen, erfolgt die Benachrichtigung als regelmäßige Benachrichtigung angezeigt stattdessen.
Wie Sie sehen, gibt es die zusätzliche Möglichkeit des Hinzufügens Desktop zum Code. Das Desktop: wahr aktiviert die Benachrichtigung für den Desktop; Wenn Sie den Wert auf false setzen, wird die Benachrichtigung regelmäßig angezeigt.
Sie können auch ein benutzerdefiniertes Symbol über das Symbol verwenden Symbol Möglichkeit. Füllen Sie es mit Ihrer Icon-URL. Sie können es einstellen falsch um das Symbol zu deaktivieren. Wenn Sie es mit einstellen Null, Das Standardsymbol wird verwendet.
Um andere Modulimplementierungen mit ihren Optionen anzuzeigen, klicken Sie auf diesen Link.
Sie können die Implementierung weiterführen, indem Sie die offizielle Website besuchen. Dort können Sie einige fortgeschrittene Anwendungen mit den Demos sehen. Alternativ können Sie die GitHub-Seite besuchen, um weitere Informationen zu erhalten.
