Uno dei primi software che ho installato dopo l’acquisto del MacBook Pro è stato Growl, un’applicazione che intercetta i messaggi generati dai vari software presenti nel sistema e li mostra sullo schermo in modo semplice e sicuramente di effetto.
Il plugin jQuery di cui parlo oggi si ispira all’applicazione descritta sopra: con Gritter è possibile realizzare lo stesso effetto, una soluzione molto carina per generare notifiche di messaggi all’interno dei propri siti web.
Demo
Una demo di funzionamento del plugin Gritter.
Utilizzo
Generare una semplice notifica con solo testo:
$.gritter.add({
// (obbligatorio) titolo della notifica
title: 'Titolo della notifica',
// (obbligatorio) testo della notifica
text: 'Messaggio di notifica'
});
oppure una notifica più complessa:
$.gritter.add({
// (obbligatorio) titolo della notifica
title: 'Titolo della notifica',
// (obbligatorio) testo della notifica
text: 'Messaggio di notifica',
// immagine a sinistra
image: 'url immagine',
// tempo chiusura notifica in millisecondi
time: 5000,
// classe da applicare per lo stile personalizzato
class_name: 'my-class',
// funzione chiamata prima che si apre
before_open: function(){}
// funzione chiamata dopo che si è aperta
after_open: function(e){}
// funzione chiamata prima che si chiude
before_close: function(e){}
// funzione chiamata dopo che si è chiusa
after_close: function(){}
});
Opzioni
All’interno dell’intestazione <head>..</head> dopo aver richiamato il plugin possiamo inizializzarlo con opzioni globali per tutte le notifiche della pagina web:
$.extend($.gritter.options, {
// velocità visualizzazione notifica (stringa o millisecondi)
fade_in_speed: 'medium',
// velocità chiusura notifica (stringa o millisecondi)
fade_out_speed: 3000,
// tempo visualizzato sullo schermo
time: 5000
});
Progetto
Sul sito dell’autore potete scaricare il plugin e vedere le altre opzioni.
Tags: glitter, growl, jQuery, plugin jquery, popup
Nel corso degli anni ho acquisito una vasta esperienza nella progettazione e realizzazione in ambito siti e applicazioni web, ma continuo ad approfondire le mie conoscenze e a sperimentare, per migliorarmi e seguire l'evoluzione di Internet.
Mi occupo delle nuove tecnologie di sviluppo sul Web/Internet, con particolare attenzione ad Ajax, Web2.0, jQuery, PHP.
Ulteriori conoscenze da esperienze lavorative:
Utilizzo libreria Javascript jQuery
Utilizzo Ext JS framework Javascript per GUI (Utile per realizzare interfacce grafiche complesse per applicazioni web)
Conoscenza framework PHP Symfony
Utilizzo del database PostgreSQL
Un Commento
Trackbacks
Effetto Growl con Gritter plugin jQuery…
Gritter plugin jQuery una soluzione molto carina per generare notifiche di messaggi all’interno dei propri siti web. Questo plugin jQuery si ispira all’applicazione Growl per Mac nel realizzare lo stesso effetto….