MICHELEPISANI.IT

I plugins di jQuery più utilizzati nel web

Ottime per l'integrazione con la tecnologia Ajax

Notifiche chiare e personalizzabili con Notify.js

Maggio 12
07:372015

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

Tags
Condividi

Autore

Michele Pisani

Michele Pisani

Ho uno spiccato orientamento al problem-solving, se è troppo facile non mi diverto :)
Credo nella volontà e nel cambiamento perchè hanno fatto della mia passione il mio pane quotidiano.
Se devo descrivermi con una sola parola direi... "Concretezza", la mia stretta di mano è una garanzia.

0 Commenti

Non ci sono commenti

Nessuno ha ancora commentato questo articolo, fallo tu per primo!

Scrivi un Commento

Scrivi un Commento

Il tuo indirizzo email non sarà pubblicato.
I campi contrassegnati da un * sono obbligatori

Articoli e Argomenti correlati

Categorie popolari

Iscriviti alla mia newsletter

La tua e-mail con me sarà al sicuro.
Non fornirò mai le tue informazioni a nessuno!

Ultimi commenti

Michele Pisani

Ciao peppe,
che tipo di errore ti dà? Hai verificato se il resto delle caratteristiche è …

peppe

Ciao, perchè non posso unire takeshy kurosawa con takeshy kurosawa shop? non sono nomi simili?

Michele Pisani

Grazie Ottavia, fa sempre piacere ricevere un feedback. Buon proseguimento.

Ottavia Neruda

La tua guida mi è stata utilissima. L'ho trovata semplice, ben fatta ed intuitiva. Grazie.