Nelle lezioni introduttive abbiamo visto come la struttura grafica dei widget e delle interazioni di jQuery UI sia in gran parte veicolata dall'inclusione di un file CSS compreso nel pacchetto di installazione.
Dietro a questo file CSS si nasconde un'idea particolarmente innovativa per quanto riguarda i framework UI in JavaScript: quella di tema grafico.
Nel nostro caso il tema grafico che abbiamo sempre utilizzato nei nostri esempi è chiamato smoothness e viene rilasciato insieme alla libreria di base.
La struttura di questo tema rispecchia il markup generato dai vari metodi e widget di UI, spesso molto complessi e verbosi e proprio per questo apparentemente ingestibili nel caso si volessero applicare personalizzazioni per uniformare i controlli alla nostra interfaccia.
In realtà il team di jQuery UI, in collaborazione con Filament Group, ha sviluppato un applicativo online chiamato Themeroller per gestire con semplicità quest'operazione.
Themeroller
Themeroller è un applicativo online raggiungibile all'indirizzo http://jqueryui.com/themeroller/ che permette di modificare il tema base smoothness secondo le proprie esigenze con un alto grado di personalizzazione.
Oltre a questo, mette a disposizione molti temi preconfezionati da scaricare direttamente oppure da usare come base per il propio tema.
Fate attenzione che cliccando sul link di download dei temi verrete reindirizzati all'utility di download di jQuery UI, perciò dovrete scaricare tutto il pacchetto ed estrarre la cartella del tema dala directory css.
Approfondimenti sui temi
La struttura e la nomenclatura che compongono un tema per jQuery UI sono rigidamente standardizzati, per garantire la compatibilità fra il markup generato dalla libreria e la formattazione disponibile via CSS.
Inoltre, ogni tema mette a disposizione classi specifiche per la visualizzazione e la strutturazione di icone, messaggi contestuali ed altre parti dell'interfaccia. A tal riguardo potete fare riferimento a questo articolo, oppure riferirvi direttamente alla documentazione ufficiale
Ultimi articoli JavaScript
PhantomJS, headless browser per test con JavascriptIl tool ideale per realizzare, da terminale, operazioni in remoto su... |
Creare e leggere QR Code in JavaScriptApplicazioni 'QR Code enabled' per il Web e per il mobile,... |
Jquery UI Map: web-mapping con Google Maps e jQueryUn plugin di jQuery UI per intefacciare applicaizoni Web/mobile con... |
Scrollorama e Scrolldeck, slideshow d'effetto con jQueryPlugin jQuery per ottenere Slideshow con diversi effetti di scrolling |
jCanvas, un primo semplice graficoAlla scoperta della libreria jCanvas, per semplificare il disegno e... |
Guide JavaScript
Guida Node.jsIl framework che permette di per usare V8, l'interprete JavaScript... |
Canvas, guida ai frameworkCanvas, tra gli elementi di HTML5 è forse quello di maggior impatto.... |
Guida Javascript: tecniche avanzateUna guida dal taglio pratico per approfondire la programmazione a... |
Newsletter @JavaScript
Ogni martedì, direttamente nella tua e-mail: guide, articoli, script, novità e approfondimenti tecnici su JavaScript.
Iscriviti alla newsletter
Corsi in aula
|
|
Corso Webmaster base18 Giugno 2012 a Milano |
|
|
Corso Google AdWords Base25 Giugno 2012 a Milano |
|
|
Corso JQuery e Ajax per Webmaster03 Luglio 2012 a Milano |
|
|
Corso Google AdWords Base05 Giugno 2012 a Roma |
|
|
Corso Webmaster base11 Giugno 2012 a Roma |