jQuery
1 like•1,984 views
Il documento fornisce una panoramica su jQuery, una libreria JavaScript che semplifica lo sviluppo di applicazioni web, con focus sul suo utilizzo in contesti cross-browser. Viene anche introdotto jQuery UI, che include vari widget e strumenti per migliorare l'interazione dell'utente, come accordion e tabs, e si menzionano plugin utili per funzionalità aggiuntive. Infine, si accenna a jQuery Mobile, un framework per lo sviluppo di applicazioni web ottimizzate per dispositivi mobili.
jQuery
- 1. salvatore.paone@unifi.it a.a. 2012/2013 | Salvatore Paone | salvatore.paone@unifi.it 1
- 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. 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. <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. 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. 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. 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. 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. 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. ¡ 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. ¡ 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. <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. 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. ¡ http://api.jqueryui.com/accordion/#option-‐ animate a.a. 2012/2013 | Salvatore Paone | salvatore.paone@unifi.it 14
- 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. 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. 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. 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. 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. 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. $(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. 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. <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. <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. 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. <!-- 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