Sesta lezione del modulo jQuery del corso per 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

6. Esempio
$(function() {
$( "#resizable" ).resizable();
});

7. Widgets
• Accordion
classico container Accordion
• Autocomplete
Auto-completamento basato su ciò che l'utente digita
• Button
Pulsante avanzato
• Datepicker
Date-picker avanzato

8. Datepicker
$(function() {
$( "#datepicker" ).datepicker();
});

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