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
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; }); }); };
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>
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();
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…
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…
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…
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…
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 …
Aggiungi un commento