JQuery [6] Matteo Magni
Jquery UI
Jquery UIjQuery UI è una libreria open source di plug-in basata sulla libreria JavaScript JQuery.Ogni componente è costrui...
Quattro aree• Interactions :  drag&drop, ridimensionamento, ordinamento e selezione;• Widgets  Componenti già pronti come ...
Interazioni• Draggable Rende gli elementi draggable• Droppable Controlla dove gli elementi dragged possono essere droppati...
Esempio$(function() {  $( "#resizable" ).resizable();});
Widgets• Accordion classico container Accordion• Autocomplete Auto-completamento basato su ciò che lutente digita• Button ...
Datepicker$(function() { $( "#datepicker" ).datepicker();});
Widgets [2]• Dialog Mostra dialog box sopra altri contenuti• Progressbar Progress bar, animate e non• Slider Slider comple...
Dialog
Effetti• Color Animation Animazione attraverso il passaggio da un colore ad un altro• Toggle Class, Add Class, Remove Clas...
Utilities• Position Imposta la posizione relativa di un elemento rispetto ad un altro (alignment)
Themeroller        http://jqueryui.com/themeroller/ThemeRoller è un applicativo online che ciconsente di generare il tema ...
Domande?               Slide:http://www.slideshare.net/ilbonzo               Code:https://github.com/ilbonzo/Cypher       ...
jQuery - 6 | WebMaster & WebDesigner
jQuery - 6 | WebMaster & WebDesigner
Upcoming SlideShare
Loading in …5
×

jQuery - 6 | WebMaster & WebDesigner

671 views

Published on

Sesta lezione del modulo jQuery del corso per WebMaster & WebDesigner

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
671
On SlideShare
0
From Embeds
0
Number of Embeds
138
Actions
Shares
0
Downloads
18
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

jQuery - 6 | WebMaster & WebDesigner

  1. 1. JQuery [6] Matteo Magni
  2. 2. Jquery UI
  3. 3. Jquery UIjQuery UI è una libreria open source di plug-in basata sulla libreria JavaScript JQuery.Ogni componente è costruito secondolarchitettura di JQuery ed è completamentepersonalizzabile. Fornisce interazioni edanimazioni, effetti avanzati e widgets.(wikipedia)
  4. 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. 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. 6. Esempio$(function() {  $( "#resizable" ).resizable();});
  7. 7. Widgets• Accordion classico container Accordion• Autocomplete Auto-completamento basato su ciò che lutente digita• Button Pulsante avanzato• Datepicker Date-picker avanzato
  8. 8. Datepicker$(function() { $( "#datepicker" ).datepicker();});
  9. 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. 10. Dialog
  11. 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 alleffetto di cui sopra
  12. 12. Utilities• Position Imposta la posizione relativa di un elemento rispetto ad un altro (alignment)
  13. 13. Themeroller http://jqueryui.com/themeroller/ThemeRoller è un applicativo online che ciconsente di generare il tema di base dijQuery UI.Inoltre ci mette a disposizione alcuni temigià fatti.
  14. 14. Domande? Slide:http://www.slideshare.net/ilbonzo Code:https://github.com/ilbonzo/Cypher mail: matteo@magni.me

×