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:

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:
<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.
$('<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
⤽

Similari
⋮ Finestre di messaggio CSS con CSS3 ⋮
12% Css3 ⊚
Quando si sviluppano applicazioni Web e si vuole visualizzare i messaggi all’utente, sarebbe opportuno renderli il più chiaro possibile. Inoltre, i colori possono dare all’utente una rapida occhiata su quello che sta succe…
⋮ Sporca e veloce finestra modal ⋮
10% JQuery ⊚
Se avete bisogno di una finestra modale e avete jQuery caricato si può semplicemente personalizzare e incollare le seguenti righe di codice in qualsiasi gestore di eventi o eventhandler per far apparire rapidamente un mess…
⋮ Creare URL corto utilizzando jQuery e Ajax ⋮
10% JQuery ⊚
Molti tutorial disponibili sul web per la creazione di URL brevi utilizzano lo script sul lato server, questo script funziona sul lato client. È facile e ha soli 5 righe di codice per chiamare le API di Bit.ly in modo asin…
⋮ Utilizzando il metodo data() di jQuery ⋮
8% JQuery ⊚
Ad un certo punto, tutti noi dobbiamo memorizzare qualche set di dati sul client. Possiamo memorizzare lo spazio dei nomi di variabili sempre in maggiore quantità evitando collisioni; possiamo memorizzare le variabili in q…
⋮ Il framework jQuery e jQuery-plugins ⋮
8% Plugins ⊚
jQuery è una ben nota libreria Javascript Web 2.0 light-weight cross-browser, sviluppato da un team guidato da John Resig. jQuery è costruito sulla cima di Sizzle, che è un motore per i selettori CSS scritto in Javascript …