Notifiche chiare e personalizzabili con Notify.js

Dare ad un utente del proprio sito web un messaggio di notifica immediato, poco invasivo (come lo sono ad esempio le alert) ed allo stesso tempo completamente personalizzabile è una prerogativa ambita da clienti e gestori di siti web. Con un plugin di jQuery, Notify.js, potente nel risultato e semplice nell'integrazione è possibile soddisfare questa necessità.

Un esempio rende più di 1000 parole, per cui, dopo aver integrato nel vostro sito la libreria di jQuery (la 1.10.2 che ho testato personalmente funziona senza problemi), dovrete recarvi sul sito ufficiale di Notify.js per scaricare il plugin (sul sito trovate tutta una serie di opzioni applicabili alle notifiche) ed integrarlo nella pagina come di seguito:

<script type="text/javascript" src="/javascript/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/javascript/notify.min.js"></script>

Inseriamo una select a cui associare un evento che scaturirà la notifica alla selezione di una delle sue opzioni:

<label>Di che colore era il cavallo bianco di Napoleone?</label><br />
<select id="risposta">
    <option value="">-- seleziona la risposta --</option>
    <option value="0">giallo</option>
    <option value="1">bianco</option>
    <option value="2">verde</option>
</select>

Ed inseriamo il codice Javascript necessario al suo funzionamento:

$(function(){
    document.getElementById("risposta").onchange = function(e) {
        selected_value = this.value;
        if (selected_value == "") {
            $.notify("Seleziona una risposta...", "info");
        } else {
            if (selected_value == "1") {
                $.notify("Risposta esatta!", "success");
            } else {
                $.notify("Risposta errata!", "error");
            }
        }
    };
 });

Il risultato potrete testarlo sull'apposita pagina che ho creato allo scopo presente su JSFiddle. In alternativa trovate di seguito l'esempio funzionante testabile cliccando sul tab "Result":