PNotify - Un plugin di notifica altamente personalizzabile
Per alcuni di noi che sono costantemente occupati, le notifiche ci tengono aggiornati su ogni evento importante, news e informazioni. Riduce i tempi di attesa mentre ci aggiorna con gli ultimi eventi, e non c'è da meravigliarsi se riceviamo notifiche su desktop e cellulari allo stesso modo.
Se tuttavia vuoi creare una notifica per il tuo sito, puoi crearlo facilmente con questo plugin chiamato PNotify. È un plugin javascript gratuito e open source con molte opzioni ed è facile da usare. Con PNotify, puoi persino mostrare fino a 1000 notifiche contemporaneamente (consulta questo test di benchmark per provarlo). Quant'è fico?
Perché usare PNotify?
PNotify, precedentemente noto come Pines Notify, presenta tre tipi di notifica principali: Informazioni, Avviso e errore. Ha un sacco di funzioni, effetti, temi e anche stili. Puoi scegliere diversi stili da Bootstrap, dall'interfaccia utente di jQuery, da Font Awesome o dal tuo stile personale. Ci sono anche circa 18 temi già pronti (realizzati con Bootswatch) tra cui è possibile scegliere e ci sono anche effetti di transizione.
La cosa grandiosa di PNotify è che non ha solo fantastiche funzioni grafiche, ma è anche arricchito con potenti e ricche API (o moduli). Queste API includono notifiche desktop (basate sullo standard Draft di notifiche Web), supporto di aggiornamento dinamico, callback per vari eventi, visualizzatore di cronologia per visualizzare notifiche precedenti e supporto HTML nel titolo e nel corpo.
PNotify fornisce un notifica non invadente il che significa che puoi fare clic su qualsiasi elemento dietro la notifica senza chiuderla. Puoi anche determinare dove viene visualizzata la notifica con le funzionalità di Stacks, che ti consente di posizionare la notifica ovunque: come stile barra superiore / inferiore o anche come suggerimento.
Utilizzo di base
Le fonti di PNotify sono disponibili in moduli bundle personalizzabili e sono disponibili qui.
Iniziare
Dopo aver ottenuto i sorgenti, includili nel tuo codice HTML in questo modo:
PNotify è molto facile da usare. Ecco una semplice notifica:
$ (function () new PNotify (title: 'Simple Notification', testo: 'Ehi, sono una semplice notifica.'););
E questo è il risultato:
Fondamentalmente, per creare una notifica si avvia una nuova funzione PNotify. Il titolo, il testo, lo stile e altre opzioni possono quindi essere passati all'interno della funzione. Se non si specifica il tipo di notifica, verrà utilizzato il tipo predefinito che è a Avviso. Ci sono circa 20+ opzioni configurabili puoi passare. Per vedere la lista con il suo valore predefinito, clicca qui.
Messa in piega
Per cambiare lo stile, puoi passare il messa in piega opzione nella notifica e definire lo stile desiderato. Gli stili disponibili sono bootstrap2, bootstrap3, jQueryUI e fontawesome. Non dimenticare di includere fonti di stile correlate all'interno del tuo progetto.
Ad esempio, se voglio cambiare lo stile di notifica precedente al tema dell'interfaccia utente jQuery, utilizzo il seguente frammento:
nuovo PNotify (title: "stile dell'interfaccia utente jQuery", testo: "Ehi, sono in stile con il tema dell'interfaccia utente jQuery.", styling: "jqueryui");
C'è un altro modo per personalizzare la tua noticazione, tramite questo codice:
PNotify.prototype.options.styling = "jqueryui";
Modificare jQueryUI con lo stile che vuoi, quindi metti questa riga prima della notifica in questo modo:
PNotify.prototype.options.styling = "jqueryui"; nuovo PNotify (title: "stile dell'interfaccia utente jQuery", testo: "Ehi, sono in stile con il tema dell'interfaccia utente jQuery.");
Ecco il tuo risultato, in stile:
Aggiunta di moduli
I moduli sono API ricche che abilitano funzioni di notifica avanzate. Ci sono 7 moduli in PNotify: desktop, pulsanti, non di blocco, conferma, cronologia, callback e modulo di riferimento. I moduli possono essere utilizzati passando le opzioni appropriate nella notifica.
Ad esempio, di seguito sono riportati i codici per mostrarti come utilizzare il Modulo Desktop:
PNotify.desktop.permission (); nuovo PNotify (title: 'Desktop Notification', testo: 'I \' ma notifica desktop. Devi darmi il permesso in modo che possa apparire come quello che sono. In caso contrario, diventerò una notifica regolare. ', desktop: desktop: true, icona: null);
PNotify.desktop.permission (); è usato per assicurarsi che gli utenti abbiano dato il permesso per il sito per mostrare la notifica. Se gli utenti non consentono il sito, la notifica sarà mostrato come avviso regolare anziché.
Come puoi vedere, c'è l'opzione aggiuntiva di aggiungere del desktop al codice. Il desktop: vero abiliterà la notifica per desktop; se lo si imposta su false, la notifica diventerà un avviso regolare.
È inoltre possibile utilizzare un'icona personalizzata tramite il icona opzione. Riempi con l'url dell'icona; puoi impostarlo falso per disabilitare l'icona. Se lo si imposta con nullo, verrà utilizzata l'icona predefinita.
Per vedere le altre implementazioni dei moduli con le loro opzioni, vai a questo link.
È possibile proseguire con l'implementazione andando al suo sito ufficiale. Qui puoi vedere alcuni usi avanzati insieme ai demo. In alternativa, puoi visitare la sua pagina GitHub per ulteriori informazioni.
