Notifiche popup stile growl con jQuery

Oggi voglio condividere con voi questo plugin di notifiche stile Growl (Mac OS) in jQuery, che può essere davvero molto interessante in molteplici usi.

Il plugin si presta molto bene per sbizzarrirsi sperimentando nuove tecniche avanzate di jQuery, e, per i neofiti del linguaggio, permette di avere subito sotto mano un potente plugin di notifiche molto carino e personalizzabile.

01. Struttura Html

La struttura html del plugin è molto semplice:

<div id="notifica"></div>
<div id="riapri"><img src="riapri.png" alt="Riapri" /></div>

Aggiungeremo poi il resto via jQuery, in ogni caso l’ID notifica conterrà tutto il code che andremo ad inserire mentre il div riapri ci consentirà di riaprire la notifica.

02. Stile CSS

Vediamo ora lo stile da dare alle nostre notifiche, ho pensato di restare sul classico in stile MAC OS, con sfondo nero trasparente (opacità 0.6). In ogni caso potete anche cambiare lo stile come meglio credete agendo sul css “notifica”.

	#notifica{
		background-color:#000;
		width:250px; /*ampiezza della notifica*/
		position:fixed; right:0px; bottom:0px; /*Agisci qui per modificare dove far apparire la notifica*/
		z-index:10;
		opacity:0.6;  /*modifica l'opacita*/
		border-radius: 5px;
		color:#FFF; /*colore del testo*/
		}

	.notice{ position:relative;}
	.contenuto{ margin: 10px 0px 10px 20px;  } /*Modifica i margini del testo*/

	.chiudi{ background-image:url(close.png); background-repeat:no-repeat; width:50px; height:50px; position:absolute; right:-20px; top:-30px;}

	#riapri{  position:fixed; right:50px; bottom:20px; z-index:10; cursor:pointer;}

Ora che abbiamo lo stile passiamo allo sviluppo effettivo del plugin.

03. Engine jQuery delle notifiche

Prima di tutto includiamo le librerie dentro l’head del vostro sito:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'></script>

Ok ora siete pronti per inserire questo codice subito sotto:

<script type="text/javascript">

var tempo = 1000; //modifica il tempo di apparizione della notifica

function notifica(notice) {
	$('<div class="notice"></div>')
 	.append('<a href="#" class="chiudi"></a>')//Pulsante chiusura
	.append($('<div class="contenuto"></div>').html($(notice)))
	.hide()
	.appendTo('#notifica')
	.fadeIn(tempo);
}

//Inizio il DOM
$(document).ready(function() {

 $("#riapri").css("display","none"); //RENDO INVISIBILE IL RIAPRI

 notifica("<p>Questo è un messaggio</p>"); //INSERISCI LE TUE NOTIFICHE QUI

	//INIZIO CHIUSURA E RIAPERTURA NOTIFICA
	$(".chiudi").click(
            function(){
            $("#notifica").fadeOut(1000);
			$("#riapri").fadeIn(500);
			$(".chiudi").hide()
            });

	$("#riapri").click(
            function(){
            $("#notifica").fadeIn(1000);
			$(".chiudi").show();
			$(this).fadeOut(500);
            });

    });//FINE DOM

</script>

Come vedete lo script è di facile interpretazione (vedi i commenti per maggiori info), ecco alcune precisazioni tecniche:

– dopo html ho passato un dollaro, in questo modo potrete inserire nelle notifiche qualunque cosa vogliate: testo, html, etc etc.

– Le notifiche vanno aggiunte con notifica(“<p>TUO TESTO</p>”);

– Puoi modificare il tempo di apparizione della notifica agendo sulla variabile “tempo”.

– Per modificare il tempo di chiusura e apertura agite sui numeri tra parentesi.

04. Demo e Download

DEMO #1 (BASE) | DEMO #2 (AVANZATO CON TEMA) |DEMO#3| DOWNLOAD

05. Tema personalizzato Growl Targetweb

DOWNLOAD 

Ho predisposto un tema già curato nei minimi particolari e pronto per essere usato, inizia subito a usare il mio sistema di notifiche! (nel file download sopra trovate già anche questo tema!).

Tema credits @365Psd (adattato)

06. Principali usi e sviluppi

I principali usi di questo plugin sono presto detti: io ad esempio l’ho usato nel  pannello di gestione del mio CMS per aprire eventuali notifiche ai miei clienti. Oltre a questo però è usabile davvero per qualsiasi cosa! Ultimo brano ascoltato, playlist, email advisor, e molto altro!

E’ possibile integrare facilmente il plugin a un database PHP/MYSQL (eseguite il loop per generare la notifica), ma è facilmente integrabile anche su WordPress (stay tuned on Targetweb!).

Per chi ha un pò di esperienza con jQuery è facilissimo intravedere le mille modifiche apportabili al plugin, ecco un esempio concreto.

07. Informazioni e note

Potete scaricare e usare il plugin come preferite, (un commento di ringraziamento è sempre gradito!), se non l’avete ancora fatto prima di scaricare il plugin vi invito ad iscrivervi alla pagina di facebook di Targetweb, per rimanere sempre aggiornati su release, news e ulteriori plugin rilasciati.

A domani!