jQuery

[email protected]

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.


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


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


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.


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.


¡  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


¡ 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();


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.


¡  http://api.jqueryui.com/accordion/#option-‐animate


<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>


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.


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.


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.


1.   Colorbox -‐ a jQuery lightbox A lightweight customizable lightbox plugin

2.   jQuery Zoom A plugin to enlarge images on mouseover or mousedown.


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>


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.


<div data-role="page" id="identificativo_pagina">  </div> <div data-role="page" id="identificativo_pagina_2">  </div> In questo tipo di template multi-‐pagina, la navigazione interna è realizzata considerando ogni pagina come un’ancora:

<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.


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 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.

jQuery

Education

Transcript of jQuery