Esiste una libreria molto interessate se si usa jQuery ch’è jQuery UI. L’insieme di queste librerie sono molto utili e facilitano il lavoro con l’HTML nella pagina web.
Nel caso di jQuery UI, ci sono un buon numero di controlli ed efetti grafici che dotano, nelle nostre applicazioni web, un aspetto abbastanza professionale anche se non siamo dei bravi web designer o non siamo capaci di creare quell’aspetto.

Inoltre jQuery UI permette personalizzare l’aspetto dei controlli facendoci scegliere tra un’ampia varietà di aspetti già creati o adirittura ci da il modo di personalizzarli noi stessi.
Nuove funzioni in jQuery

⤽
Dal punto di vista dell’esperienza dell’utente, è importante che i controlli e l’informazione che si visualizzano nella pagina siano disegnati con un aspetto consistente per farli riconoscere facilmente. Quindi approfittando queste doti che ha la libreria jQuery UI cercherò di fare un tentativo per illustrare il suo utilizzo in altri punti della nostra applicazione.

La libreria jQuery UI cotiene due tipi di modi per evidenziare un messaggio all’utente per indicare errori e avvisi:
Questi messaggi sono utilizzati da jQuery UI in alcuni controlli, ma non hanno trovato un modo semplice per usarli arbitrariamente in una nostra applicazione. La parte buona di tutto questo è che jQuery è facile da estendere con nuove funzionalità e aggiungere metodi necessari per visualizzare gli errori o gli avvisi e mantenere in modo semplice lo stile generale della UI.
Per fare questo, dichiariamo due nuove funzioni in jQuery:

Copia codice 

jQuery.fn.comeErrore = function() {
    return this.each(function() {
        $(this).replaceWith(function(i, msg) {
            var ropeHtml = "<div class='ui-state-error ui-corner-all' style='padding: 0 .7em;'>";
            ropeHtml += "<p><span class='ui-icon ui-icon-alert' style='float: left; margin-right: .3em;'>";
            ropeHtml += "</span>";
            ropeHtml += msg;
            ropeHtml += "</p></div>";
            return ropeHtml;
        });
    });
};
jQuery.fn.comeAvviso = function() {
    return this.each(function() {
        $(this).replaceWith(function(i, msg) {
            var ropeHtml = "<div class='ui-state-highlight ui-corner-all' style='padding: 0 .7em;'>";
            ropeHtml += "<p><span class='ui-icon ui-icon-info' style='float: left; margin-right: .3em;'>";
            ropeHtml += "</span>";
            ropeHtml += msg;
            ropeHtml += "</p></div>";
            return ropeHtml;
        });
    });
};
Per aggiungere nuove funzioni a jQuery, dobbiamo aggregarle all’oggetto fn di jQuery. Lo si deve fare prima di usare jQuery sul nostro sito. Una volta che l’abbiamo fatto, per aggiungere un messaggio di errore basta scrivere:
Copia codice 

<div id="lista-errore">
</div>
<div id="lista-avviso">
</div>
In questo caso, nel nostro html avremmo un div identificato da (errore-list) e un altro div identificato da (avviso-list) in cui si dovrebbero aggiungere gli errori o le notifiche. Quando si desidera aggiungere un errore o una notifica, si crea un nuovo elemento di tipo p (paragrafo), impostiamo il messaggio, lo si aggiunge alla lista degli errori e/o avvisi e richiamiamo la nostra nuova funzione per formattarlo come un errore o come una notifica.
Copia codice 

$('<p>').text('Sono il messaggio di errore').appendTo('#lista-errore').comeErrore();
$('<p>').text('Sono il messaggio di avviso').appendTo('#lista-avviso').comeAvviso();
Tutto molto semplice e pratico.
Live Demo
⤽