jquery - 6 | webmaster & webdesigner

of 16/16
JQuery [6] Matteo Magni

Post on 29-Nov-2014

688 views

Category:

Technology

1 download

Embed Size (px)

DESCRIPTION

Sesta lezione del modulo jQuery del corso per WebMaster & WebDesigner

TRANSCRIPT

  • 1. JQuery [6] Matteo Magni
  • 2. Jquery UI
  • 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. 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 lutente 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 alleffetto 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 ciconsente di generare il tema di base dijQuery UI.Inoltre ci mette a disposizione alcuni temigi fatti.
  • 14. Domande? Slide:http://www.slideshare.net/ilbonzo Code:https://github.com/ilbonzo/Cypher mail: [email protected]