it.hideout-lastation.com
Paradiso Per Designer E Sviluppatori


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 ed 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 bella 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 una notifica discreta che significa che è possibile 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.

Uso 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 è un avviso . Sono disponibili oltre 20 opzioni configurabili . Per vedere la lista con il suo valore predefinito, clicca qui.

Messa in piega

Per cambiare lo stile, puoi passare l'opzione di styling 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 jQuery con tema UI.", styling: "jqueryui"}); 

C'è un altro modo per personalizzare la tua noticazione, tramite questo codice:

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

Cambia jqueryui con lo stile che desideri, 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, NonBlock, 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 mostrare 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 al sito di mostrare la notifica. Se gli utenti non consentono il sito, la notifica verrà invece visualizzata come avviso regolare .

Come puoi vedere, c'è l'opzione aggiuntiva di aggiungere desktop al codice. Il desktop: true abiliterà la notifica per desktop; se lo si imposta su false, la notifica diventerà un avviso regolare.

Puoi anche usare un'icona personalizzata tramite l'opzione icon . Riempi con l'url dell'icona; puoi impostarlo su false per disabilitare l'icona. Se lo si imposta con null, verrà utilizzata l'icona predefinita.

Per vedere le altre implementazioni dei moduli con le loro opzioni, vai a questo link.

È possibile continuare 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.

In che modo la felicità può aiutare la tua attività

In che modo la felicità può aiutare la tua attività

Tutte le entità aziendali costruiscono le proprie aziende in fondazioni note come valori fondamentali. Queste basi sono ciò che normalmente rappresentano, sia per i loro clienti che per i dipendenti. Tuttavia, questi valori sono spesso messi da parte nell'oblio . E se scommetti sul denaro come sostituto di questi valori, allora hai ragione.I

(Consigli tecnici e di design)

9 fantastici giochi che puoi controllare con il tuo smartphone

9 fantastici giochi che puoi controllare con il tuo smartphone

Chi dice che i giocattoli sono fatti solo per i bambini? Anche se potremmo avere superato i giocattoli con cui siamo cresciuti, alcuni dei giocattoli che puoi trovare sul mercato in questi giorni possono davvero farti venire voglia di far uscire il tuo bambino interiore. Quindi, per diamine con i consigli di età, diamo un'occhiata ad alcuni dei nuovi giocattoli innovativi che puoi giocare con il tuo dispositivo iOS o Android.

(Consigli tecnici e di design)