La forza del sogno è quella di disegnare qualcosa
dove gli altri vogliono essere.
Effetto Growl con jQuery
7dic2009 Scritto da MaiNick / Archiviato in Webdesign, jQuery
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
Altri articoli
- Iscriviti al Feed RSS
- 68 iscritti
Una Risposta a “Effetto Growl con jQuery”
Trackbacks
diggita.it
dicembre 7th, 2009 alle 17:22
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….
Lascia un commento