immagine avatar

Ciao come puoi notare ho dato una bella rinfrescatina al mio blog!
Attendo un tuo feedback, per suggerimenti e ulteriori proposte di miglioramento, ma anche, sperando che non ci siano, segnalazioni di errori o malfunzionamenti del blog. Buona lettura!

Effetto Growl con jQuery

di MaiNick | 7 Dic 2009 | jQuery, Webdesign | 1 Commento
Gritter.jpg

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: , , , ,

Un Commento

Trackbacks

  1. diggita.it ha detto:

    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

^ Torna su