jQuery - 6 | WebMaster & WebDesigner
0 likes428 views
jQuery UI è una libreria open source basata su jQuery che offre componenti personalizzabili per creare interazioni ed animazioni avanzate. Include aree come interazioni (drag&drop, ridimensionamento), widget (accordion, datepicker) ed effetti (transizioni animate). Il Themeroller consente di generare temi personalizzati per jQuery UI.
![JQuery [6]
Matteo Magni](https://image.slidesharecdn.com/06jquery-121106140545-phpapp02/85/jQuery-6-WebMaster-WebDesigner-1-320.jpg)
![Widgets [2]
• Dialog
Mostra dialog box sopra altri contenuti
• Progressbar
Progress bar, animate e non
• Slider
Slider completamente customizzabile con varie features
• Tabs
Tabbed user interface handling, con content sia inline che
ondemand](https://image.slidesharecdn.com/06jquery-121106140545-phpapp02/85/jQuery-6-WebMaster-WebDesigner-9-320.jpg)
jQuery - 6 | WebMaster & WebDesigner
- 1. JQuery [6] Matteo Magni
- 2. Jquery UI
- 3. Jquery UI jQuery UI è una libreria open source di plug- in basata sulla libreria JavaScript JQuery. Ogni componente è costruito secondo l'architettura di JQuery ed è completamente personalizzabile. Fornisce interazioni ed animazioni, effetti avanzati e widgets. (wikipedia)
- 4. Quattro aree • Interactions : drag&drop, ridimensionamento, ordinamento e selezione; • Widgets Componenti già pronti come accordion, datepicker... • Effects Transizioni animate • Utilities Utilità di basso livello da usare per le interazioni, i widgets e gli effetti
- 5. Interazioni • Draggable Rende gli elementi draggable • Droppable Controlla dove gli elementi dragged possono essere droppati • Resizable Rende gli elementi ridimensionabili • Selectable Avanzate caratteristiche di selezione per liste di elementi • Sortable Liste di elementi facilmente ordinabili
- 7. Widgets • Accordion classico container Accordion • Autocomplete Auto-completamento basato su ciò che l'utente digita • Button Pulsante avanzato • Datepicker Date-picker avanzato
- 9. Widgets [2] • Dialog Mostra dialog box sopra altri contenuti • Progressbar Progress bar, animate e non • Slider Slider completamente customizzabile con varie features • Tabs Tabbed user interface handling, con content sia inline che ondemand
- 10. Dialog
- 11. Effetti • Color Animation Animazione attraverso il passaggio da un colore ad un altro • Toggle Class, Add Class, Remove Class, Switch Class Animazione basata sul passaggio da uno style ad un altro • Effect Varietà di effetti (appear, slide-down, explode, fade-in, etc.) • Toggle Switch su un effetto On oppure Off • Hide, Show Simile all'effetto di cui sopra
- 12. Utilities • Position Imposta la posizione relativa di un elemento rispetto ad un altro (alignment)
- 13. Themeroller http://jqueryui.com/themeroller/ ThemeRoller è un applicativo online che ci consente di generare il tema di base di jQuery UI. Inoltre ci mette a disposizione alcuni temi già fatti.
- 16. Domande? Slide: http://www.slideshare.net/ilbonzo Code: https://github.com/ilbonzo/Cypher mail: matteo@magni.me