Upload
salvatore-paone
View
1.040
Download
0
Embed Size (px)
Citation preview
a.a. 2012/2013 | Salvatore Paone | [email protected] 1
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 | [email protected] 2
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 | [email protected] 3
<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 | [email protected] 4
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 | [email protected] 5
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 | [email protected] 6
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 | [email protected] 7
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 | [email protected] 8
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 | [email protected] 9
¡ 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 | [email protected] 10
¡ 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 | [email protected] 11
<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 | [email protected] 12
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 | [email protected] 13
¡ http://api.jqueryui.com/accordion/#option-‐animate
a.a. 2012/2013 | Salvatore Paone | [email protected] 14
<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 | [email protected] 15
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 | [email protected] 16
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 | [email protected] 17
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 | [email protected] 18
1. Colorbox -‐ a jQuery lightbox A lightweight customizable lightbox plugin
2. jQuery Zoom A plugin to enlarge images on mouseover or mousedown.
a.a. 2012/2013 | Salvatore Paone | [email protected] 19
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 | [email protected] 20
$(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 | [email protected] 21
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 | [email protected] 22
<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 | [email protected] 23
<a href="dove-siamo.html" data-rel="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 | [email protected] 24
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 | [email protected] 25
<!-- diversifico la transizione fra pagine --> <a href="#mission" data-transition="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 | [email protected] 26