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
⋮ Fondamentali di jQuery ⋮
225% JQuery ⊚
[nextpage title=”Benvenuti”] jQuery stà diventando rapidamente uno strumento che ogni sviluppatore web di interfacce dovrebbe conoscere. Lo scopo di questo libro è di fornire una panoramica della biblioteca, in modo che qu…
⋮ Python per tutti ⋮
196% Python ⊚
[nextpage title=”Copertina”] Python para todos è un libro sulla programmazione in Python. Questo è un tutoriale su Python adatto a tutti i livelli e si può scaricare in pdf gratuitamente in spagnolo. Il tutoriale di Python…
⋮ Nuovi metodi in jQuery 1.6 ⋮
59% JQuery ⊚
In questo articolo ci concentreremo sui nuovi metodi nella versione 1.6 della libreria jQuery JavaScript, così come i cambiamenti ai metodi già esistenti. Le informazioni fornite sono solo un riassunto veloce, raccomando u…
⋮ Guida allo Zend Framework ⋮
51% Zend ⊚
Zend Framework è un framework open source per PHP. Zend Framework separa la logica e le azioni usando il pattern MVC (Model View Controller). Cosa è lo Zend Framework? Framework per la costruzione di siti web più veloci e …
⋮ ECMAScript modalità Strict ⋮
27% JScript ⊚
ECMAScript, che è sostenuta dall’Ecma International come garanzia per l’adozione su tutta la linea, è lo standard di quello che la maggior parte delle persone conoscono come JavaScript. A rigor di termini (ma non volendo e…