jQuery - 6 | WebMaster & WebDesigner
-
Upload
matteo-magni -
Category
Technology
-
view
697 -
download
1
description
Transcript of jQuery - 6 | WebMaster & WebDesigner
![Page 1: jQuery - 6 | WebMaster & WebDesigner](https://reader033.fdocuments.us/reader033/viewer/2022051609/5479d9cab379597b2b8b4881/html5/thumbnails/1.jpg)
JQuery [6]Matteo Magni
![Page 2: jQuery - 6 | WebMaster & WebDesigner](https://reader033.fdocuments.us/reader033/viewer/2022051609/5479d9cab379597b2b8b4881/html5/thumbnails/2.jpg)
Jquery UI
![Page 3: jQuery - 6 | WebMaster & WebDesigner](https://reader033.fdocuments.us/reader033/viewer/2022051609/5479d9cab379597b2b8b4881/html5/thumbnails/3.jpg)
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)
![Page 4: jQuery - 6 | WebMaster & WebDesigner](https://reader033.fdocuments.us/reader033/viewer/2022051609/5479d9cab379597b2b8b4881/html5/thumbnails/4.jpg)
Quattro aree• Interactions :
drag&drop, ridimensionamento, ordinamento e selezione;
• WidgetsComponenti già pronti come accordion, datepicker...
• EffectsTransizioni animate
• UtilitiesUtilità di basso livello da usare per le interazioni, i widgets e gli effetti
![Page 5: jQuery - 6 | WebMaster & WebDesigner](https://reader033.fdocuments.us/reader033/viewer/2022051609/5479d9cab379597b2b8b4881/html5/thumbnails/5.jpg)
Interazioni• Draggable
Rende gli elementi draggable
• Droppable Controlla dove gli elementi dragged possono essere droppati
• ResizableRende gli elementi ridimensionabili
• Selectable Avanzate caratteristiche di selezione per liste di elementi
• Sortable Liste di elementi facilmente ordinabili
![Page 6: jQuery - 6 | WebMaster & WebDesigner](https://reader033.fdocuments.us/reader033/viewer/2022051609/5479d9cab379597b2b8b4881/html5/thumbnails/6.jpg)
Esempio
$(function() {
$( "#resizable" ).resizable();
});
![Page 7: jQuery - 6 | WebMaster & WebDesigner](https://reader033.fdocuments.us/reader033/viewer/2022051609/5479d9cab379597b2b8b4881/html5/thumbnails/7.jpg)
Widgets
• Accordion classico container Accordion
• Autocomplete Auto-completamento basato su ciò che l'utente digita
• Button Pulsante avanzato
• Datepicker Date-picker avanzato
![Page 8: jQuery - 6 | WebMaster & WebDesigner](https://reader033.fdocuments.us/reader033/viewer/2022051609/5479d9cab379597b2b8b4881/html5/thumbnails/8.jpg)
Datepicker
$(function() {
$( "#datepicker" ).datepicker();
});
![Page 9: jQuery - 6 | WebMaster & WebDesigner](https://reader033.fdocuments.us/reader033/viewer/2022051609/5479d9cab379597b2b8b4881/html5/thumbnails/9.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
![Page 10: jQuery - 6 | WebMaster & WebDesigner](https://reader033.fdocuments.us/reader033/viewer/2022051609/5479d9cab379597b2b8b4881/html5/thumbnails/10.jpg)
Dialog
![Page 11: jQuery - 6 | WebMaster & WebDesigner](https://reader033.fdocuments.us/reader033/viewer/2022051609/5479d9cab379597b2b8b4881/html5/thumbnails/11.jpg)
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.)
• ToggleSwitch su un effetto On oppure Off
• Hide, ShowSimile all'effetto di cui sopra
![Page 12: jQuery - 6 | WebMaster & WebDesigner](https://reader033.fdocuments.us/reader033/viewer/2022051609/5479d9cab379597b2b8b4881/html5/thumbnails/12.jpg)
Utilities
• Position Imposta la posizione relativa di un elemento rispetto ad un altro (alignment)
![Page 13: jQuery - 6 | WebMaster & WebDesigner](https://reader033.fdocuments.us/reader033/viewer/2022051609/5479d9cab379597b2b8b4881/html5/thumbnails/13.jpg)
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.
![Page 14: jQuery - 6 | WebMaster & WebDesigner](https://reader033.fdocuments.us/reader033/viewer/2022051609/5479d9cab379597b2b8b4881/html5/thumbnails/14.jpg)
![Page 15: jQuery - 6 | WebMaster & WebDesigner](https://reader033.fdocuments.us/reader033/viewer/2022051609/5479d9cab379597b2b8b4881/html5/thumbnails/15.jpg)
![Page 16: jQuery - 6 | WebMaster & WebDesigner](https://reader033.fdocuments.us/reader033/viewer/2022051609/5479d9cab379597b2b8b4881/html5/thumbnails/16.jpg)
Domande?
Slide:
http://www.slideshare.net/ilbonzo
Code:
https://github.com/ilbonzo/Cypher
mail: