O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
salvatore.paone@unifi.it	
  

a.a.	
  2012/2013	
  |	
  Salvatore	
  Paone	
  |	
  salvatore.paone@unifi.it	
  

1	
  
jQuery	
  è	
  una	
  libreria	
  di	
  funzioni	
  (framework)	
  
javascript,	
  cross-­‐browser	
  per	
  le	
  applica...
Per	
  ottenere	
  la	
  libreria:	
  
http://jquery.com/download/	
  
1.  Production	
  version	
  	
  -­‐	
  questo	
  è...
<head>
<script src="jquery-1.9.1.min.js"></script></script>
<script src="script.js"></script>
</head>
<head>
<script src="...
La	
  sintassi	
  di	
  base:	
  
¡ 
¡ 
¡ 
¡ 
¡ 
¡ 
¡ 

$(selector).action();
jQuery(‘p’).css(‘color’, ‘blue’);
$(‘...
La	
  versione	
  di	
  UI	
  che	
  useremo	
  negli	
  esempi	
  è	
  la	
  
1.10.3	
  nel	
  formato	
  “completo”	
  c...
http://code.jquery.com/jquery-­‐1.9.1.js	
  
http://code.jquery.com/ui/1.10.3/jquery-­‐ui.js	
  
http://code.jquery.com/ui...
Questi	
  tipi	
  di	
  controlli	
  web	
  ricadono	
  in	
  jQuery	
  
UI	
  sotto	
  il	
  nome	
  di	
  Widget.	
  Il	...
jQuery	
  UI	
  comprende	
  nativamente	
  11	
  tipi	
  di	
  
widget,	
  completamente	
  compatibili	
  con	
  i	
  te...
¡  Accordion:	
  Visualizza	
  pannelli	
  di	
  contenuto	
  

comprimibili	
  per	
  presentare	
  le	
  informazioni	
...
¡  Menu:	
  crea	
  menu	
  nidificabili.	
  
¡  Progressbar:	
  consente	
  di	
  visualizzare	
  un	
  

indicatore	
  ...
<div id="accordion">
    <h3><a href="#">Primo headerheader</a></h3>
    <div>First contenuto</div>
    <h3><a href="#">Se...
Accordion	
  offre	
  un	
  buon	
  numero	
  di	
  opzioni	
  per	
  personalizzare	
  il	
  comportamento	
  del	
  widge...
¡  http://api.jqueryui.com/accordion/#option-­‐

animate	
  

a.a.	
  2012/2013	
  |	
  Salvatore	
  Paone	
  |	
  salvat...
<div id="tabs">
    <ul>
        <li><a href="#fragment-1"><span>Uno</span></a></li>
        <li><a href="#fragment-2"><sp...
la	
  struttura	
  grafica	
  dei	
  widget	
  e	
  delle	
  interazioni	
  
di	
  jQuery	
  UI	
  sia	
  in	
  gran	
  par...
Oltre	
  a	
  questo,	
  mette	
  a	
  disposizione	
  molti	
  
temi	
  preconfezionati	
  da	
  scaricare	
  direttament...
In	
  jQuery	
  un	
  plugin	
  non	
  è	
  altro	
  che	
  un’estensione	
  
(non	
  autonoma)	
  di	
  un	
  programma,	...
1. 
2. 

Colorbox	
  -­‐	
  a	
  jQuery	
  lightbox	
  
A	
  lightweight	
  customizable	
  lightbox	
  plugin	
  
jQuery	...
Come	
  sempre	
  abbiamo	
  la	
  versione	
  ridotta	
  (min	
  di	
  produzione)	
  e	
  la	
  versione	
  non	
  compr...
$(document).ready(function(){
$('#ex1').zoom();
$('#ex2').zoom({ on:'grab' });
$('#ex3').zoom({ on:'click' });
$('#ex4').z...
Basato	
  su	
  jQuery	
  ed	
  ispirato	
  al	
  progetto	
  UI,	
  
jQuery	
  Mobile	
  è	
  un	
  progetto	
  molto	
  ...
<div data-role="page"
id="identificativo_pagina">
    <!-- contenuto della prima pagina -->
</div>
<div data-role="page"
i...
<a href="dove-siamo.html" datarel="dialog">Dove siamo</a>

	
  
Per	
  default	
  jQuery	
  Mobile	
  inserisce	
  un	
  t...
Oltre	
  alla	
  transizione	
  predefinita	
  è	
  possibile	
  
definire	
  transizioni	
  specifiche	
  fra	
  una	
  pagi...
<!-- diversifico la transizione fra pagine -->
<a href="#mission" datatransition="slideup">Mission</a>

Se	
  vogliamo	
  ...
Próximos SlideShares
Carregando em…5
×

jQuery

1.754 visualizações

Publicada em

Publicada em: Educação
  • Seja o primeiro a comentar

jQuery

  1. 1. salvatore.paone@unifi.it   a.a.  2012/2013  |  Salvatore  Paone  |  salvatore.paone@unifi.it   1  
  2. 2. jQuery  è  una  libreria  di  funzioni  (framework)   javascript,  cross-­‐browser  per  le  applicazioni  web,   che  si  propone  come  obiettivo  quello  di   semplificare  la  programmazione  lato  client  delle   pagine  HTML.  Il  framework  fornisce  metodi  e   funzioni  per  gestire  al  meglio  aspetti  grafici  e   strutturali  come  posizione  di  elementi,  effetto  di   click  su  immagini,  manipolazione  del   Document  Object  Model  e  quant'altro  ancora,   mantenendo  la  compatibilità  tra  browser  diversi  e   standardizzando  gli  oggetti  messi  a  disposizione   dall'interprete  javascript  del  browser.   a.a.  2012/2013  |  Salvatore  Paone  |  salvatore.paone@unifi.it   2  
  3. 3. Per  ottenere  la  libreria:   http://jquery.com/download/   1.  Production  version    -­‐  questo  è  per  il  vostro   sito  web  di  produzione  il  codice  è   minimizzato  e  compresso   2.  Development  version  -­‐  versione  di  sviluppo  e   di  test,  il  codice  è  facilmente  leggibile   3.  CDN  di  Google  –  Content  Delivery  Network   a.a.  2012/2013  |  Salvatore  Paone  |  salvatore.paone@unifi.it   3  
  4. 4. <head> <script src="jquery-1.9.1.min.js"></script></script> <script src="script.js"></script> </head> <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/ 1.9.1/jquery.min.js”></script> <script src="script.js"></script> </head> a.a.  2012/2013  |  Salvatore  Paone  |  salvatore.paone@unifi.it   4  
  5. 5. La  sintassi  di  base:   ¡  ¡  ¡  ¡  ¡  ¡  ¡  $(selector).action(); jQuery(‘p’).css(‘color’, ‘blue’); $(‘p’).css(‘color’, ‘blue’); $(this).hide(); $("p").hide(); $(".test").hide(); $("#test").hide(); Ovvero: selettore, azione, parametri a.a.  2012/2013  |  Salvatore  Paone  |  salvatore.paone@unifi.it   5  
  6. 6. La  versione  di  UI  che  useremo  negli  esempi  è  la   1.10.3  nel  formato  “completo”  compatibile   con  jQuery  1.6+.   Al  momento  jQuery  UI  è  suddivisa  in:   Interactions   Widgets   Effects   Utilities       a.a.  2012/2013  |  Salvatore  Paone  |  salvatore.paone@unifi.it   6  
  7. 7. http://code.jquery.com/jquery-­‐1.9.1.js   http://code.jquery.com/ui/1.10.3/jquery-­‐ui.js   http://code.jquery.com/ui/1.10.3/themes/ smoothness/jquery-­‐ui.css     In  generale  tutti  i  link  assoluti  per  UI  e  non  solo   http://code.jquery.com/         a.a.  2012/2013  |  Salvatore  Paone  |  salvatore.paone@unifi.it   7  
  8. 8. Questi  tipi  di  controlli  web  ricadono  in  jQuery   UI  sotto  il  nome  di  Widget.  Il  nome  potrebbe   essere  in  alcuni  casi  fuorviante,  visto  che  è   spesso  associato  ad  applicazioni  del  desktop,   tuttavia  in  questo  caso  si  tratta  solo  di  controlli   atti  a  semplificare  e  ordinare  la  fruizione  e   l’inserimento  dei  dati  da  una  pagina  web.   a.a.  2012/2013  |  Salvatore  Paone  |  salvatore.paone@unifi.it   8  
  9. 9. jQuery  UI  comprende  nativamente  11  tipi  di   widget,  completamente  compatibili  con  i  temi   UI  generati  da  Theme  Roller  (la  web  application   per  la  gestione  dei  temi)  e  ricchi  di  opzioni  di   personalizzazione.   a.a.  2012/2013  |  Salvatore  Paone  |  salvatore.paone@unifi.it   9  
  10. 10. ¡  Accordion:  Visualizza  pannelli  di  contenuto   comprimibili  per  presentare  le  informazioni  in   una  quantità  limitata  di  spazio.   ¡  Autocomplete:  suggerisce  parole  mentre   l'utente  sta  scrivendo.   ¡  Button:  inserisce  pulsanti  personalizzabili   ¡  Datepicker:  Visualizza  un  calendario   ¡  Dialog:  visualizza  finestre  di  dialogo   personalizzabili     a.a.  2012/2013  |  Salvatore  Paone  |  salvatore.paone@unifi.it   10  
  11. 11. ¡  Menu:  crea  menu  nidificabili.   ¡  Progressbar:  consente  di  visualizzare  un   indicatore  di  stato   ¡  Slider:  Visualizza  diapositive  accessibili   tramite  tastiera   ¡  Spinner:  Visualizza  i  pulsanti  per  immettere   numeri  tramite  la  tastiera  o  il  mouse.   ¡  Tabs:  Trasforma  un  insieme  di  elementi   contenitori  in  una  struttura  a  tab.   ¡  Tooltip:  mostra  informazioni  addizionali.   a.a.  2012/2013  |  Salvatore  Paone  |  salvatore.paone@unifi.it   11  
  12. 12. <div id="accordion">     <h3><a href="#">Primo headerheader</a></h3>     <div>First contenuto</div>     <h3><a href="#">Secondo header</a></h3>     <div>Secondo contenuto</div> </div> A  questo  punto  ci  basterà  richiamare  il   metodo  .accordion()  sull’elemento  con  id   accordion  per  attivare  il  widget   $("#accordion").accordion();   a.a.  2012/2013  |  Salvatore  Paone  |  salvatore.paone@unifi.it   12  
  13. 13. Accordion  offre  un  buon  numero  di  opzioni  per  personalizzare  il  comportamento  del  widget.  Fra  cui:     ¡  ¡  ¡  active  :  (selettore,  jQuery,  elemento  DOM,  numero,   booleano  –  'first-­‐child’)  indica  uno  specifico  elemento  o  la  sua   posizione  nell’accordion  in  modo  da  renderlo  subito  visibile   una  volta  applicato  il  widget.   autoHeight  :  (booleano  –  true)  indica  se  applicare  l’altezza   del  contenitore  di  testo  più  alto  a  tutti  gli  altri  elementi.   Questa  opzione  è  attiva  di  default  perché  rende  il  controllo   più  consistente  e  impedisce  che  il  cambiamento  di  altezza   dell’accordion  possa  influire  sul  posizionamento  di  altri  box   nell’interfaccia.   collapsible  :  (booleano  –  false)  strettamente  collegato   all’opzione  precedente,  se  impostato  su  true  permette  di   chiudere  tutte  le  aree  di  testo,  facendo  collassare   completamente  il  controllo.   a.a.  2012/2013  |  Salvatore  Paone  |  salvatore.paone@unifi.it   13  
  14. 14. ¡  http://api.jqueryui.com/accordion/#option-­‐ animate   a.a.  2012/2013  |  Salvatore  Paone  |  salvatore.paone@unifi.it   14  
  15. 15. <div id="tabs">     <ul>         <li><a href="#fragment-1"><span>Uno</span></a></li>         <li><a href="#fragment-2"><span>Due</span></a></li>         <li><a href="#fragment-3"><span>Tre</span></a></li>     </ul>     <div id="fragment-1">         <p>Testo 1</p>     </div>     <div id="fragment-2"> <p>Testo 2</p>          </div>     <div id="fragment-3"> <p>Testo 3</p>     </div> </div> a.a.  2012/2013  |  Salvatore  Paone  |  salvatore.paone@unifi.it   15  
  16. 16. la  struttura  grafica  dei  widget  e  delle  interazioni   di  jQuery  UI  sia  in  gran  parte  veicolata   dall’inclusione  di  un  file  CSS  compreso  nel   pacchetto  di  installazione.  Themeroller  è  un   applicativo  online  raggiungibile  all’indirizzo   http://jqueryui.com/themeroller/  che  permette   di  modificare  il  tema  base  smoothness  secondo   le  proprie  esigenze  con  un  alto  grado  di   personalizzazione.   a.a.  2012/2013  |  Salvatore  Paone  |  salvatore.paone@unifi.it   16  
  17. 17. Oltre  a  questo,  mette  a  disposizione  molti   temi  preconfezionati  da  scaricare  direttamente  oppure   da  usare  come  base  per  il  propio  tema.   Fate  attenzione  che  cliccando  sul  link  di  download  dei   temi  verrete  reindirizzati  all’utility  di  download  di  jQuery   UI,  perciò  dovrete  scaricare  tutto  il  pacchetto  ed  estrarre   la  cartella  del  tema  dalla  directory  css.   La  struttura  e  la  nomenclatura  che  compongono  un   tema  per  jQuery  UI  sono  rigidamente  standardizzati,  per   garantire  la  compatibilità  fra  il  markup  generato  dalla   libreria  e  la  formattazione  disponibile  via  CSS.     a.a.  2012/2013  |  Salvatore  Paone  |  salvatore.paone@unifi.it   17  
  18. 18. In  jQuery  un  plugin  non  è  altro  che  un’estensione   (non  autonoma)  di  un  programma,  che  ha  come   compito  quello  di  ampliarne  le  funzioni  del  core.   Più  nello  specifico  un  plugin  è  una,  o   un  insieme,  di  funzioni  che  hanno  lo  scopo  di   utilizzare  il  framework  per  compiti  pre-­‐stabiliti  e   quindi  aiutare  gli  sviluppatori  quando  si  tratta  di   validare  i  nostri  formulari,  creare  delle  slideshow,   inserire  nei  nostri  siti  delle  gallerie  fotografiche.     a.a.  2012/2013  |  Salvatore  Paone  |  salvatore.paone@unifi.it   18  
  19. 19. 1.  2.  Colorbox  -­‐  a  jQuery  lightbox   A  lightweight  customizable  lightbox  plugin   jQuery  Zoom   A  plugin  to  enlarge  images  on  mouseover  or   mousedown.   a.a.  2012/2013  |  Salvatore  Paone  |  salvatore.paone@unifi.it   19  
  20. 20. Come  sempre  abbiamo  la  versione  ridotta  (min  di  produzione)  e  la  versione  non  compressa  (di   sviluppo).   <link rel="stylesheet" href="colorbox.css" /> <script src="../jquery.colorbox-min.js"></script> Può  essere  utilizzato  sia  su  una  singola  immagine  sia  per  raccolte  in  stile  slideshow.  Per   raggruppare  gli  elementi  includiamo  nel  mark-­‐up  l’attributo  rel=“gipso”  per  poi  utilizzare  il   selettore  di  attributi  di  jQuery  per  trovari  tali  immagini.     $(document).ready(function(){ //Examples of how to assign the Colorbox event to elements $(".gipso").colorbox({ rel:'gipso’, transition: 'fade’, speed: 500, current: "{current} di {total} foto d “, }); $(".flora").colorbox(); }); a.a.  2012/2013  |  Salvatore  Paone  |  salvatore.paone@unifi.it   20  
  21. 21. $(document).ready(function(){ $('#ex1').zoom(); $('#ex2').zoom({ on:'grab' }); $('#ex3').zoom({ on:'click' }); $('#ex4').zoom({ on:'toggle' }); }); <span  class='zoom'  id='ex1'>    <img  src='daisy.jpg'  id='jack'  width='555'  height='320'    alt='Daisy  on  the  Ohoopee'/>    <p>Hover</p>   </span>   a.a.  2012/2013  |  Salvatore  Paone  |  salvatore.paone@unifi.it   21  
  22. 22. Basato  su  jQuery  ed  ispirato  al  progetto  UI,   jQuery  Mobile  è  un  progetto  molto  giovane,   ma  offre  una  buona  stabilità  ed  un  numero  di   funzionalità  adeguate  per  sviluppare   applicazioni  web  mobile  complete.   Sul  sito  ufficiale  di  jQuery  Mobile  è  disponibile   una  griglia,  aggiornata  all’ultima  versione  della   libreria,  nella  quale  verificare  il  tipo  di  supporto   offerto.   a.a.  2012/2013  |  Salvatore  Paone  |  salvatore.paone@unifi.it   22  
  23. 23. <div data-role="page" id="identificativo_pagina">     <!-- contenuto della prima pagina --> </div> <div data-role="page" id="identificativo_pagina_2">     <!-- contenuto della seconda pagina --> </div> In  questo  tipo  di  template  multi-­‐pagina,  la  navigazione  interna  è   realizzata  considerando  ogni  pagina  come  un’ancora: a.a.  2012/2013  |  Salvatore  Paone  |  salvatore.paone@unifi.it   23  
  24. 24. <a href="dove-siamo.html" datarel="dialog">Dove siamo</a>   Per  default  jQuery  Mobile  inserisce  un  tasto   per  chiudere  la  finestra  di  dialogo  nell’angolo   in  alto  a  sinistra  dell’header,  tuttavia  è  possibile   realizzare  questo  controllo  includendo  un   semplice  link  con  data-­‐rel="back",  nello  stesso   modo  in  cui  realizzeremmo  un  link  back  per  la   navigazione  classica.   a.a.  2012/2013  |  Salvatore  Paone  |  salvatore.paone@unifi.it   24  
  25. 25. Oltre  alla  transizione  predefinita  è  possibile   definire  transizioni  specifiche  fra  una  pagina  e   l’altra  e  per  l’apertura  delle  finestre  di  dialogo   in  modo  da  diversificare,  ad  esempio,  il   passaggio  fra  le  sezioni  del  sito  e  le  pagine  di   una  stessa  sezione.     Sulla  documentazione  ufficiale  del  progetto   sono  disponibili  delle  dimostrazioni  delle   transizioni  supportate.     a.a.  2012/2013  |  Salvatore  Paone  |  salvatore.paone@unifi.it   25  
  26. 26. <!-- diversifico la transizione fra pagine --> <a href="#mission" datatransition="slideup">Mission</a> Se  vogliamo  ottenere  un  effetto  riavvolgimento  è   anche  possibile  invertire  l’andamento  della  transizione   aggiungendo  data-­‐direction="reverse"  al  link  in   questione.     Questa  caratteristica  è  già  presente  di  default  in  tutti  i   pulsanti  con  data-­‐rel="back"  per  migliorare  il  feedback   visivo  durante  la  navigazione  del  sito.     a.a.  2012/2013  |  Salvatore  Paone  |  salvatore.paone@unifi.it   26  

×