jQuery

salvatore.paone@uniﬁ.it

a.a.
2012/2013
|
Salvatore
Paone
|

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
|

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
|

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
|

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
|

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

Eﬀects

Utilities

a.a.
2012/2013
|
Salvatore
Paone
|

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
|

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
sempliﬁcare
e
ordinare
la
fruizione
e

l’inserimento
dei
dati
da
una
pagina
web.

a.a.
2012/2013
|
Salvatore
Paone
|

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
|

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
ﬁnestre
di
dialogo

personalizzabili

a.a.
2012/2013
|
Salvatore
Paone
|

10

¡  Menu:
crea
menu
nidiﬁcabili.

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

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
|

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
|

13

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

animate

a.a.
2012/2013
|
Salvatore
Paone
|

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>
<p>Testo 2</p>
         </div>
<p>Testo 3</p>
    </div>
</div>

a.a.
2012/2013
|
Salvatore
Paone
|

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
|

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
|

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
speciﬁco
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
fotograﬁche.

a.a.
2012/2013
|
Salvatore
Paone
|

18

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
|

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
|

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
|

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
|

22

<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.a.
2012/2013
|
Salvatore
Paone
|

23

<a href="dove-siamo.html" datarel="dialog">Dove siamo</a>

Per
default
jQuery
Mobile
inserisce
un
tasto

per
chiudere
la
ﬁnestra
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
|

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
|

25

<a href="#mission" datatransition="slideup">Mission</a>

Se
vogliamo
ottenere
un
eﬀetto
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
|

26

jQuery

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a jQuery

Similar a jQuery (20)

Más de Salvatore Paone

Más de Salvatore Paone (9)

Último

Último (20)

jQuery