Guida jQuery UI

Transcript

Guida jQuery UI

Guida jQuery UI
di: Marco Solazzi
1. Introduzione
Gli obiettivi del progetto; come e dove scaricare jQuery UI
Effetti
2. Animazioni
Animare l'interfaccia attraverso la modifica del colore e delle classi applicate agli elementi
3. Il metodo effect()
Creare effetti avanzati con questo metodo specifico di jQuery UI
Interazioni
4. Generalità
Le interazioni in jQuery UI: sintassi comune
5. Draggable (trascinare oggetti)
Metodi e opzioni per trascinare oggetti sulla pagina
6. Droppable (rilasciare oggetti trascinati)
Come e dove posizionare sulla pagina oggetti trascinati con draggable
7. Resizable (ridimensionare finestre ed elementi)
Ridimensionare facilmente elementi dell'interfaccia a partire dalle finestre modali
8. Selectable (selezionare oggetti)
Selezione multipla con rettangolo o di oggetti non contigui
9. Sortable (ordinare elementi)
Ordinare interattivamente elementi di una lista
Widget
10. Introduzione ai widget di jQuery UI
Cosa sono i widget e quando usarli
11. Accordion
Nascondere e mostrare elementi in base all'interazione dell'utente
12. Datepicker
Analisi del widget di jQuery UI destinato alla selezione delle date
13. Dialog
Creare e gestire finestre popup, avvisi e messaggi di dialogo
14. Progressbar
Il widget per comunicare all'utente il progresso di un'operazione in corso
15. Slider
Creare e gestire controlli per la modifica 'a scorrimento' di valori
16. Tabs: opzioni
Creare box e pannelli con interfaccia 'a schede'
17. Tabs: eventi e metodi
Eventi e metodi per gestire al meglio il widget tab
18. Themeroller e i temi di jQuery UI
Personalizzare facilmente i temi di jQuery UI
Introduzione (versione per la stampa) | Guide JavaScript | Javascript....
1 di 2
http://javascript.html.it/guide/stampa_lezione/4476/introduzione/
Introduzione
Il web e le interfacce utente
La User Experience (UX) e lo studio delle User Interface (UI) sono oggetto di studio nel campo dello sviluppo
software da molti anni, tanto che tutte le aziende produttrici di sistemi operativi hanno sempre speso molte
risorse nella realizzazione e ottimizzazione di linee guida per la creazione di controlli per l'interazione
applicazione - utente.
Nel web il campo di studi relativo alle interfacce utente è invece stato limitato dalle scarse risorse di interattività
offerte dai linguaggi web che fino a poco tempo fa erano rappresentate da link e form.
Negli ultimi anni, soprattutto grazie al rinnovamento dei motori di rendering JavaScript e a nuove risorse per i
CSS e non ultimo per l'HTML, è stato possibile sperimentare nuove vie di interazione, applicando e spesso
riadattando i controlli utilizzati in ambiente software alle pagine web.
L'esigenza in questo caso è stata fin da subito quella di rendere l'ambiente del web il più possibile simile a quello
più diffusamente conosciuto dei programmi desktop, applicando pattern come quello delle finestre modali, dei
calendari dinamici e dell'aggiornamento dei dati in tempo reale senza bisogno di refresh.
JavaScript e AJAX sono i principali protagonisti di questa rivoluzione negli usi e costumi delle interfacce
internet, anche grazie all'introduzione di framework e librerie di supporto per gli sviluppatori.
jQuery UI
In questa guida parleremo dell'attuale progetto ufficiale per la realizzazione di interfacce utente di jQuery
(http://javascript.html.it/guide/leggi/168/guida-jquery/), chiamato jQuery UI (http://jqueryui.com/).
Il progetto, nonostante alcuni gravi problemi di compatibilità e stabilità delle prime versioni, ha raggiunto ormai
una buona maturità ed un'architettura estendibile che lo rendono un ottimo punto di partenza per tutti gli
sviluppatori che vogliano dedicarsi alla realizzazione di una moderna applicazione per il web.
Partito come un progetto parallelo a jQuery, UI è stato ben presto inglobato nello sviluppo della libreria, pur
mantenendo un gruppo di sviluppo autonomo ancor oggi guidato da Paul Bakaus, il primo sviluppatore del
progetto. Arrivato alla prima versione stabile nel tardo 2007, ha subito numerose revisioni e riscritture fino
all'attuale versione 1.7. Un'altro contributo importante al progetto viene da Filament Group
(http://www.filamentgroup.com/), l'azienda alla base della struttura grafica dei controlli (o widget) e della loro
architettura a temi (che vedremo in una lezione successiva).
Al momento jQuery UI è suddivisa in 3 macroaree di interesse:
effetti grafici (in aggiunta a quelli di jQuery);
interazioni complesse (ordinamento di elementi, drag and drop, etc);
widget (controlli complessi come calendari, finestre modali e navigazione a schede).
jQuery UI: come, dove, quando
Poiché la struttura della libreria è estremamente modulare, sul sito del progetto è disponibile sia un download
completo (http://jqueryui.com/download/jquery-ui-1.7.2.custom.zip) di tutto il codice (sia sorgente che
compresso per la produzione), sia un builder, con il quale ognuno può realizzare una versione personalizzata
della libreria e del tema per i controlli in modo da scaricare solo ciò che serve all'applicazione:
http://jqueryui.com/download (http://jqueryui.com/download).
In generale, quest'ultima opzione è utile una volta concluso il progetto e definiti gli effetti ed i controlli di cui
14/06/2012 00:12
Introduzione (versione per la stampa) | Guide JavaScript | Javascript....
2 di 2
http://javascript.html.it/guide/stampa_lezione/4476/introduzione/
abbiamo veramente bisogno in modo da alleggerire il peso dell'applicazione.
Pronti, partenza...
La versione di UI che useremo negli esempi è la 1.7.2 nel formato "completo" che si basa su jQuery 1.3 e
versioni successive.
In ogni caso, tutti i pacchetti scaricati dal sito sono installabili molto semplicemente.
Decomprimete il file scaricato. Troverete tre cartelle: css (contenente il tema dei controlli (nel nostro caso
smothness), js (con i file compressi di jQuery e jQuery UI) e development-bundle (con tutti i sorgenti ed i file
dei singoli moduli della libreria).
inserite questo codice nella sezione della pagina in cui userete jQuery UI:
<link type="text/css" href="css/smoothness/jquery-ui-1.7.2.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
Nel caso abbiate già inserito un tag per richiamare jQuery, potete omettere la seconda riga. Fate attenzione,
comunque, che la versione 1.7.2 di jQuery UI richiede jQuery 1.3.2.
Vedremo più avanti come poter caricare altri temi e personalizzarli. Al momento iniziamo a scoprire cosa ci offre
jQuery UI a partire dagli effetti grafici.
Per la natura stessa della guida, infine, vi consigliamo di abbinare la sua lettura a quella della Guida jQuery
(http://javascript.html.it/guide/leggi/168/guida-jquery/) per cogliere al meglio le specificità del progetto e i
modi in cui completa l'offerta del framework principale.
Versione originale: http://javascript.html.it/guide/lezione/4476/introduzione/
© 1997-2006 HTML.it
La vendita, il noleggio, il prestito e la diffusione del contenuto di questa pagina sono vietate, tranne nei casi specificati nella pagina
http://www.html.it/info/note-legali.php
14/06/2012 00:12
Animazioni (versione per la stampa) | Guide JavaScript | Javascript....
1 di 2
http://javascript.html.it/guide/stampa_lezione/4477/animazioni/
Animazioni
Molto spesso gli sviluppatori sono portati ad utilizzare gli effetti grafici come "contorno ludico" alla vera e propria
interazione con l'utente. La diretta conseguenza di questo atteggiamento, è che spesso ci troviamo di fronte a
pagine piene di inutili animazioni che ricordano molto dei giochi in Flash o le vecchie pagine anni '90 farcite di
gif animate.
In realtà, le animazioni sono uno strumento fondamentale per catturare l'attenzione dell'utente, creare
relazioni fra gli elementi dell'interfaccia e creare un'interazione più fluida con i visitatori.
In jQuery UI l'approccio usato dagli sviluppatori è stato quello di implementare gli effetti grafici soprattutto
come estensioni dei metodi già presenti nella libreria di base.
Animazioni sul colore
La libreria estende anzitutto le capacità del metodo .animate() nativo, introducendo le transizioni di colore che
permettono di sostituire un colore con un altro con un effetto graduale.
Le proprietà CSS che supportano questo effetto sono: backgroundColor, borderBottomColor,
borderLeftColor, borderRightColor, borderTopColor, color, outlineColor. L'animazione eseguirà una
transizione dal colore attuale ad uno impostato in formato esadecimale, rgb o stringa (ad esempio "red",
esempio (http://www.html.it/guide/esempi/jqueryui/esempi/02-effetti-01.html)).
//CSS
.error { background-color: #F00; color:#FFF; }
//JS
$("#box").text("Errore!").addClass("error",1000);
Animazioni "di classe"
Seguendo l'approccio ad estensione, UI aggiunge nuove caratteristiche ai metodi per la manipolazione delle
classi CSS. Così, passando un numero in millsecondi come secondo parametro di .addClass(), le proprietà CSS
definite nella classe saranno applicate con una transizione della durata indicata:
$("#box").text("Errore!").addClass("error",1000,"linear",function () {
alert("Errore Notificato!");
});
L'introduzione di questa particolare tipologia di effetti è molto importante, in quanto permette di separare la
parte di scripting da quella grafica, semplificando futuri adattamenti grafici o addirittura l'adozione di diversi
stili grafici pur mantenendo inalterato il codice JavaScript. Oltre al parametro della durata, il metodo
.addClass() accetta altri due argomenti opzionali indicanti l'andamento (easing) dell'animazione ed una
funzione da lanciare alla sua conclusione (callback).
$("#box").switchClass('classeCorrente','nuovaClasse',500,'easeOutBounce',function(){
alert("Animazione conclusa!");
});
Ecco un esempio live (http://www.html.it/guide/esempi/jqueryui/esempi/02-effetti-02.html).
14/06/2012 00:12
Animazioni (versione per la stampa) | Guide JavaScript | Javascript....
2 di 2
http://javascript.html.it/guide/stampa_lezione/4477/animazioni/
Altri metodi coinvolti nell'estensione sono .removeClass() e.toggleClass(); ambedue accettano i tre
argomenti come .addClass().
Per concludere è stato aggiunto un quarto metodo, .switchClass(), che permette di animare un'elemento a
partire da una classe applicandogli le proprietà di una seconda. Nell'ordine gli argomenti sono: classe
iniziale, classe finale, durata, andamento (opzionale) e funzione conclusiva (opzionale):
$("#box").switchClass('classeCorrente','nuovaClasse',500,'easeOutBounce',function(){
alert("Animazione conclusa!");
});
Easing avanzato
Il terzo campo nel quale UI estende jQuery è il numero di andamenti, in inglese easing, disponibili.
Nato come plugin per jQuery, questo specifico codice JavaScript permette di modificare la dinamica con cui si
svolge l'animazione, simulando effetti elastici o di attrito al fine di rendere più realistica l'animazione.
Potete trovare la lista di tutti gli andamenti disponibili sulla home page del progetto (http://gsgd.co.uk/sandbox
/jquery/easing/).
Versione originale: http://javascript.html.it/guide/lezione/4477/animazioni/
© 1997-2006 HTML.it
14/06/2012 00:12
Il metodo effect() (versione per la stampa) | Guide JavaScript | Javascri...
1 di 1
http://javascript.html.it/guide/stampa_lezione/4478/il-metodo-effect/
Il metodo effect()
L'unico nuovo metodo introdotto dalla libreria è .effect(). Nella sua forma più semplice accetta un primo
argomento stringa che rappresenta il tipo di effetto che vogliamo applicare alla collezione: 'blind', 'bounce',
'clip', 'drop', 'explode', 'fold', 'highlight', 'puff', 'pulsate', 'scale', 'shake', 'size', 'slide',
'transfer'. Ecco un esempio pratico (http://www.html.it/guide/esempi/jqueryui/esempi/02-effetti-03.html)
che li mostra dal vivo.
Di questi effetti i più interessanti sono highlight (spesso usato per evidenziare cambiamenti all'interno di una
pagina, per esempio l'aggiornamento del testo di un box), blind (usato per nascondere un elemento) e
transfer (per indicare il rapporto fra due elementi).
Oltre al tipo di effetto il metodo accetta ulteriori due argomenti opzionali: un oggetto JavaScript per la
personalizzazione dell'effetto ed una funzione da eseguire alla fine dell'animazione. I parametri con i quali è
possibile modificare le impostazioni di base degli effetti variano di caso in caso e sono tutti elencati nella
documentazione ufficiale (http://docs.jquery.com/UI/Effects).
Per esempio highlight accetta un oggetto formato da una chiave per il colore (color) da usare ed una per la
modalità di visualizzazione ("hide" o "show"), mentre blind sostituisce color con direction ("vertical" o
"horizontal") per specificare se l'oggetto va animato in orizzontale o verticale.
Scorciatoie di visualizzazione.
Parte degli effetti disponibili con in metodo .effect() possono essere realizzati anche con alcuni metodi già
presenti in jQuery: .show(), .hide() e .toggle(). Questi metodi accettano gli stessi parametri di .effect(),
ma mantengono l'azione svolta in jQuery, permettendo così di visualizzare un elemento con un effetto a tendina
e nasconderlo con una esplosione (esempio (http://www.html.it/guide/esempi/jqueryui/esempi/02-effetti03.html)):
//Mostra nascondi box
$("#mostrabox").click(function () {
var box = $('#box');
if (box.is(':visible')) {
box.hide('explode');
} else {
box.show('blind');
}
});
Come detto in precedenza solo alcuni effetti possono essere associati ai metodi .show(), .hide() e .toggle():
Blind, Clip, Drop, Explode, Fold, Puff, Slide, Scale. Per tutti gli altri è necessario ricorrere sempre a
.effect().
Versione originale: http://javascript.html.it/guide/lezione/4478/il-metodo-effect/
© 1997-2006 HTML.it
14/06/2012 00:13
Generalità (versione per la stampa) | Guide JavaScript | Javascript.HT...
1 di 1
http://javascript.html.it/guide/stampa_lezione/4481/generalita/
Generalità
Una parte molto importante dell'interazione fra utenti ed interfaccia riguarda il tipo di interazione da compiere.
Nel web "tradizionale" le possibilità in questo campo erano abbastanza limitate e si riducevano quasi
esclusivamente al click e alla digitazione da tastiera in campi di form.
Al giorno d'oggi, invece, le librerie UI permettono un'interazione più ricca e molto più vicina a quella diffusa
nelle applicazioni desktop. Alcune di queste interazioni riguardano l'ordinamento degli elementi, il loro
trascinamento e la selezione. Molti di noi sono ormai abituati al diverso contesto interattivo, ma provate a
pensare quanto sia diversa (e più povera) l'interazione che abbiamo con una comune pagina web rispetto al
contesto desktop.
In questo capitolo vedremo come alcune interazioni complesse siano rese semplici da implementare grazie ai
metodi di jQuery UI.
Sintassi comune
Prima di iniziare a vedere nel dettaglio le interazioni, è utile sottolineare che nella maggior parte dei casi è
possibile richiamare ed interagire con i metodi di jQuery UI nello stesso modo. Così, se la sintassi seguente
rende trascinabile un elemento con id box (esempio (http://www.html.it/guide/esempi/jqueryui/esempi
/03-draggable-01.html)):
$("#box").draggable();
a sua volta il metodo accetta un argomento sotto forma di oggetto JavaScript che permette di
personalizzare le opzioni di base. Oltre a tale oggetto, possiamo passare ai metodi degli argomenti come
stringa di testo con i quali, ad esempio, disabilitare l'interazione:
$("#box").draggable("disable");
per poi riattivarla passando a .draggable() la stringa "enable".
Se invece volessimo rimuovere definitivamente l'interazione, dovremo passare come primo argomento
"destroy".
Un'ultima possibilità è quella di ricavare o impostare un determinato parametro di configurazione anche dopo
l'inizializzazione dell'interazione:
$("#box").draggable("option","delay"); //ricava un'opzione
$("#box").draggable("option","delay",500); //imposta un'opzione
Versione originale: http://javascript.html.it/guide/lezione/4481/generalita/
© 1997-2006 HTML.it
14/06/2012 00:13
Draggable (trascinare oggetti) (versione per la stampa) | Guide JavaScri... http://javascript.html.it/guide/stampa_lezione/4482/draggable-trascinar...
Draggable (trascinare oggetti)
Sebbene spostare oggetti sia un'interazione particolarmente familiare, nel web essa comporta una serie di
considerazioni complesse ed un non meno complesso codice JavaScript per garantire la compatibilità crossbrowser.
jQuery UI risponde a questa esigenza anzitutto con il metodo .draggable() che, associato ad un elemento, lo
rende trascinabile alla pressione del mouse:
$("#contenitore div").draggable();
Per permettere la personalizzazione grafica, a tutti gli elementi associati all'interazione, viene aggiunta la classe
ui-draggable. In più, per permettere un feedback visivo durante il trascinamento, viene aggiunta anche la
classe ui-draggable-dragging.
Opzioni
Naturalmente non tutto si risolve con il semplice metodo senza argomenti: un'interazione di questo tipo
comporta la necessità di essere personalizzabile per aderire al meglio a diverse situazioni ed interfacce.
Questi i parametri principali che possono essere passati al metodo in un secondo argomento di tipo { chiave :
valore} (e il valore di default):
appendTo: (elemento, selettore - 'parent')
L'elemento o il selettore CSS che sarà individuato come contenitore degli elementi draggabili
(trascinabili), il valore di default "parent" indica che verrà usato l'elemento contenitore degli elementi.
axis: (stringa - false)
Limita il movimento sull'asse orizzontale ('x') o verticale ('y').
cancel: (selettore - ':input,option')
Previene l'interazione quando il cursore interagisce con gli elementi indicati nel selettore. Il valore di
default, per esempio, evita che un'elemento sia mosso accidentalmente quando si sceglie un'opzione da
un menu a tendina o si scrive in un campo form.
connectToSortable: (selettore - false)
Questa opzione può essere utile quando sono presenti elementi mobili indipendenti che vogliamo poter
aggiungere ad una lista di elementi ordinabili (indicata dal selettore CSS). Come vedremo più avanti
.sortables() è basato sul drag and drop, ma considera gli elementi mobili come una lista ordinata in cui
ognuno occupa una posizione definita.
containment: (selettore, elemento, array, stringa - false)
Definisce il limite entro il quale gli elementi possono essere trascinati. Alcune opzioni sono: 'parent',
'document', 'window', [x1, y1, x2, y2].
cursor: (stringa - 'auto')
Specifica come deve apparire il cursore durante il trascinamento. In questo caso viene usato il valore CSS
della regola cursor. Non esiste una vera e propria regola, in questo caso: c'è chi usa 'move' e chi
'pointer'. Personalmente preferisco quest'ultima opzione perché è più intuitiva per l'utente medio.
delay: (intero - 0)
Indica i millisecondi fra il momento in cui l'utente clicca con il mouse e l'inizio dell'interazione. Può essere
utile per evitare click accidentali. Tuttavia un intervallo troppo lungo può essere interpretato come una
lentezza dell'applicazione.
distance: (intero - 1)
Indica di quanti pixel dovrà muoversi il mouse (quando premuto) perché l'elemento inizi a seguirlo. Come
1 di 3
14/06/2012 00:14
nel caso precedente questa opzione può prevenire interazioni accidentali, tuttavia valori elevati
renderanno gli elementi troppo appiccicosi e difficili da spostare.
grid: (array - false)
Lega il movimento dell'elemento mobile ad una griglia definita in pixel. Questa opzione è utile quando si
ha la necessità di ordinare spazialmente più elementi, per esempio nel caso in cui volessimo rendere
l'idea di una scacchiera. Il valore passato è un array con un valore per la larghezza ed uno per l'altezza di
un blocco della griglia.
handle: (elemento, selettore - false)
Identifica un elemento da utilizzare come maniglia per il trascinamento. In questo modo l'interazione
verrà avviata solo quando l'utente cliccherà e trascinerà quello specifico elemento, ma non in altre parti
dell'elemento mobile.
helper: (stringa, funzione - 'original')
Permette l'utilizzo di elementi di aiuto. Se impostato su 'clone', ad esempio, verrà creato un clone
dell'oggetto da trascinare e sarà spostato quest'ultimo invece dell'elemento originale fino al suo rilascio.
In alcuni casi è possibile generare con una funzione un elemento DOM che funga da segnaposto per
l'elemento (per esempio un piccolo box) in modo da limitare la complessità dell'elemento trascinato,
aumentare le performance e semplificare l'interfaccia. Di default viene utilizzato direttamente l'elemento
da trascinare.
opacity: (decimale - false)
Indica l'opacità che deve assumere l'elemento di aiuto. Può essere utile per indicare visivamente lo stato
precario dell'elemento e per mostrare gli elementi a lui sottostanti.
scope: (stringa - 'default')
Viene utilizzato per raggruppare elementi trascinabili con aree di rilascio specifiche. In pratica serve a
definire dei contenitori entro i quali poter rilasciare gli elementi.
scroll: (booleano - true)
Se impostato su true il contenitore dell'elemento trascinato scorrerà (scrolling) seguendo il movimento.
Questa opzione è utile per facilitare l'interazione ad utenti con basse risoluzioni o schermi piccoli o in
presenza di aree di trascinamento molto estese.
snap: (booleano, selettore - false)
Se impostato ad un selettore o su true, l'elemento trascinato si incollerà ad un elemento adiacente
arrivato ad una certa distanza da questo.
snapMode: (stringa - 'both')
Definisce a quale limite degli elementi adiacenti si incollerà l'elemento trascinato. I valori possibili sono:
'inner', 'outer', 'both'.
snapTolerance: (intero - 20)
La distanza entro la quale si verifica lo snap. L'effetto per l'utente sarà quello di una calamita.
La lista completa delle opzioni è disponibile su questa pagina (http://docs.jquery.com/UI/Draggable), mentre
qui (http://www.html.it/guide/esempi/jqueryui/esempi/03-draggable-02.html) sono disponibili alcuni esempi.
Eventi associati
Oltre alle opzioni è possibile associare all'oggetto passato a .draggable() delle funzioni di callback in base agli
eventi dell'interazione, questi sono:
start (inizio del trascinamento)
stop (fine dell'interazione)
drag (durante il trscinamento)
Tutte le callback ricevono due argomenti: l'evento nativo del browser e un oggetto ui con le seguenti proprietà:
ui.helper - l'oggetto jQuery dell'elemento trascinato
ui.position - la posizione attuale dell'elemento trascinato del tipo {alto,sinistra}, relativamente
all'elemento contenitore
ui.offset - la posizione attuale dell'elemento trascinato del tipo {alto,sinistra}, relativamente alla
pagina
2 di 3
14/06/2012 00:14
Versione originale: http://javascript.html.it/guide/lezione/4482/draggable-trascinare-oggetti/
© 1997-2006 HTML.it
3 di 3
14/06/2012 00:14
Droppable (rilasciare oggetti trascinati) (versione per la stampa) | Guid...
http://javascript.html.it/guide/stampa_lezione/4483/droppable-rilasciar...
Droppable (rilasciare oggetti trascinati)
L'interazione droppable è strettamente collegata a draggable e insieme concorrono al paradigma del drag'n'drop
ormai molto diffuso sul web.
Sintetizzando il concetto, droppable realizza il contenitore in cui gli elementi trascinabili possono essere
rilasciati.
In jQuery UI questa interazione è richiamata dal metodo .droppable():
$("#dropbox").droppable();
Opzioni
Le opzioni principali che possono essere passate a .droppable() (sempre attraverso un oggetto JavaScript)
sono:
accept: (selettore, funzione - '*')
Indica quali elementi trascinabili sono accettati all'interno del contenitore. Può essere un selettore CSS
del tipo "#lista div" oppure una funzione da applicare sull'elemento trascinato e che deve restituire
true perché questo venga accettato. Di default ogni elemento può essere rilasciato nel
contenitore.
greedy: (booleano - false)
Se impostato su true previene la propagazione dell'evento di rilascio agli elementi annidati nel
contenitore. Questo significa che un elemento risulterà aggiunto al contenitore solo se rilasciato
direttamente al suo interno, ma non all'interno di eventuali figli.
scope: (stringa - 'default')
Permette di accettare solo elementi trascinati che appartengono allo stesso scope (che viene impostato
con la stessa modalità in draggable), in modo da poter filtrare gli elementi prima ancora di rilasciarli.
tollerance: (stringa - 'intersect')
Definisce quando un oggetto può essere rilasciato in modo che possa essere catturato dal contenitore. I
valori possibili sono:
fit: tutto l'elemento trascinato è sopra al contenitore
intersect: almeno metà dell'elemento è sopra il contenitore
pointer: il mouse è nel contenitore
touch: appena l'elemento tocca il contenitore.
Questa opzione è molto importante per quanto riguarda l'esperienza utente, in quanto da essa dipende
l'usabilità dell'interazione. In realtà nessuna di esse è più indicata dell'altra, ma tutto dipende dalle
dimensioni degli elementi trascinati e dalla distanza fra il punto di inizio e fine del
trascinamento. Ad esempio, intersect è un buon compromesso solo nel caso in cui l'oggetto trascinato
non sia troppo grande, mentre touch potrebbe attivare l'interazione troppo presto rendendo l'interfaccia
imprecisa.
Eventi
Come per .draggable(), è possibile associare una funzione di callback ad alcuni eventi durante l'interazione.
Tutte le funzioni accettano due argomenti: l'evento e un oggetti ui con le seguenti chiavi:
.draggable - un oggetto jQuery del elemento che trascinato.
.helper - l'helper dell'oggetto trascinato (che potrebbe essere l'oggetto stesso).
1 di 2
14/06/2012 00:14
Droppable (rilasciare oggetti trascinati) (versione per la stampa) | Guid...
http://javascript.html.it/guide/stampa_lezione/4483/droppable-rilasciar...
.position - la posizione dell'helper in formato oggetto { top: , left: }.
.offset - la posizione assoluta dell'helper in formato oggetto { top: , left: }.
Gli eventi a cui è possibile associare una funzione sono:
activate / deactivate: questi eventi sono lanciati quando un elemento a cui è associato .draggable()
viene trascinato o rilasciato. Può risultare utile per evidenziare l'area di rilascio solo quando un oggetto
viene trascinato per mantenere più pulita l'interfaccia.
over / out / drop: questi eventi segnano l'interazione fra l'elemento trascinato e l'area di rilascio,
più precisamente quando l'elemento è dentro l'area (vedi l'opzione tollerance), ne esce oppure vi viene
rilasciato.
Su questa pagina (http://www.html.it/guide/esempi/jqueryui/esempi/04-droppable.html)è possibile vedere
alcuni esempi del metodo in azione.
Versione originale: http://javascript.html.it/guide/lezione/4483/droppable-rilasciare-oggetti-trascinati/
© 1997-2006 HTML.it
2 di 2
14/06/2012 00:14
Resizable (ridimensionare finestre ed elementi) (versione per la stampa)...
1 di 2
http://javascript.html.it/guide/stampa_lezione/4501/resizable-ridimens...
Resizable (ridimensionare finestre ed elementi)
Ridimensionare le finestre del nostro sistema operativo è un'operazione che compiamo spesso e che serve a
gestire meglio la limitata dimensione del nostro monitor; al contrario, sul web l'esigenza di poter ridimensionare
blocchi e finestre a comparsa è stata per molti anni poco sentita, viste le limitate interazioni disponibili per
l'utente.
Con l'introduzione di finestre modali al posto dei pop-up e successivamente di layout "mobili" e personalizzabili,
è stato necessario realizzare anche questo tipo di interazione.
jQuery UI mette a disposizione il metodo .resizable(), che permette di ridimensionare un elemento con
lo stesso tipo di azioni ormai familiari nelle applicazioni desktop semplicemente richiamando su di esso il
metodo:
$("#box").resizable();
In questo modo verranno aggiunte delle maniglie (di default sul lato destro, basso e nell'angolo inferiore
destro del box) con le quali poter allargare o restringere un elemento (esempio (http://www.html.it/guide
/esempi/jqueryui/esempi/05-resizable-01.html)).
L'utilizzo di questa interazione è molto delicato poiché il ridimensionamento di un elemento potrebbe causare
problemi alla visualizzazione di quelli adiacenti o addirittura "scombinare" l'intero layout. Proprio per questo è
importante personalizzarne il comportamento per adattarlo alle nostre esigenze.
Opzioni
Le opzioni di personalizzazione più importanti in questo caso sono:
maxHeight / maxWidth / minHeight / minWidth : (intero - null)
imposta dimensioni massime e minime per l'elemento ridimensionato. È un'impostazione importante per
evitare che l'utente possa rimpicciolire troppo un box, perdendo la possibilità di interagirvi, oppure al
contrario che possa ingrandirlo troppo oltre il layout o il viewport del browser tanto da oscurare altri
elementi;
containment : (stringa, selettore, elemento - false)
indica un elemento che delimiti l'estendibilità dell'oggetto ridimensionabile. Anche in questo caso, se
possibile, identificare un contenitore serve a limitare entro limiti ragionevoli le possibilità dell'utente;
aspectRatio : (booleano, decimale - false)
dà la possibilità di forzare una proporzione fra altezza e larghezza durante il ridimensionamento. Se
impostato su true verranno mantenute le proporzioni originali altrimenti si possono impostare
proporzioni personalizzate come 0.5 o 16/9;
handles : (stringa,oggetto - 'e, s, se')
indica quali maniglie devono essere create per il ridimensionamento. Le posizioni possibili sono
identificate secondo le sigle dei punti cardinali, quindi quelle di default sono est, sud, sudest (destra,
sotto, in basso a destra);
Fra le opzioni troviamo anche grid, delay e distance, che ricalcano quelle già trovate in .draggable().
Rispettivamente indicano una griglia di ridimensionamento fissa, dopo quanto tempo avviare l'interazione e
dopo quanti pixel di trascinamento di una maniglia. La regolazione di questi parametri concorre alla sensazione
di "appiccicosità" dell'elemento al layout sottostante.
Infine, due tipologie di opzioni contrastanti sono animate e ghost: la prima abilita il ridimensionamento
con un'animazione (e specifici valori per andamento e durata), la seconda crea un helper semitrasparente
14/06/2012 00:14
Resizable (ridimensionare finestre ed elementi) (versione per la stampa)...
2 di 2
http://javascript.html.it/guide/stampa_lezione/4501/resizable-ridimens...
che fa da traccia durante il ridimensionamento.
La differenza a livello di interfaccia è sostanziale: come succede nei sistemi desktop, un'animazione risulta senza
dubbio più "spettacolare" tuttavia richiede più risorse rispetto ad un helper e soprattutto rallenta l'utente che
deve aspettare la fine dell'effetto per continuare il suo lavoro.
In generale, se non strettamente necessario, l'animazione risulta superflua e controproducente.
Ecco alcuni esempi (http://www.html.it/guide/esempi/jqueryui/esempi/05-resizable-02.html) di
personalizzazione del metodo.
Eventi
Chiudiamo questa lezione con la lista di eventi collegati a .resizable(), che sono start, stop e resize, lanciati
all'inizio, alla fine e durante il ridimensionamento.
Tutti questi eventi accettano due argomenti: l'evento Javascript e un oggetto ui con le seguenti proprietà:
.helper - un oggetto jQuery contenente l'helper
.originalPosition - {top, left} posizione originale dell'elemento
.originalSize - {width, height} dimensione originale
.position - {top, left} posizione corrente
.size - {width, height} dimensione corrente
Versione originale: http://javascript.html.it/guide/lezione/4501/resizable-ridimensionare-finestre-ed-elementi/
© 1997-2006 HTML.it
14/06/2012 00:14
Selectable (selezionare oggetti) (versione per la stampa) | Guide JavaSc...
1 di 1
http://javascript.html.it/guide/stampa_lezione/4525/selectable-selezion...
Selectable (selezionare oggetti)
La caratteristica vincente dei file manager grafici rispetto a quelli testuali o alla riga di comando, è la possibilità
di selezionare file e cartelle semplicemente selezionandole con un click del mouse, oppure disegnando
un rettangolo su più elementi che vengono raggruppati in un'unica selezione.
Il metodo .selectable() di jQuery UI permette di applicare facilmente questa interazione ad elementi presenti
in un interfaccia web, fornendo sia un metodo di selezione multipla "con rettangolo" sia un sistema di
selezione di elementi non contigui con l'uso del tasto Ctrl (o Mela) in abbinamento al click sinistro del
mouse.
Poter selezionare in questo modo degli elementi fornisce un'interazione più veloce e intuitiva con liste di oggetti
rispetto a quelle basate, ad esempio, sui tradizionali checkbox dei moduli (provare per credere
(http://www.html.it/guide/esempi/jqueryui/esempi/06-selectable-01.html)).
Opzioni
Le opzioni pù importanti con le quali personalizzare l'interazione sono:
filter : (selettore - "*")
permette di identificare specifici elementi da rendere selezionabili, per esempio:
$("#lista").selectable({filter : "li.selezionabile"});
delay : (intero - 0)
millisecondi dopo i quali selezionare un elemento.
distance : (intero - 0)
solo dopo che il rettangolo di selezione sarà sovrapposto a un elemento per i pixel specificati questo verrà
selezionato. Questa opzione è strettamente legata a quanto impostato in tolerance.
tolerance : (stringa - 'touch')
se impostato su 'touch' l'elemento sarà selezionato appena il rettangolo di selezione lo toccherà,
altrimenti, se impostato su 'fit', tutto l'elemento dovrà essere all'interno del rettangolo di selezione.
Anche in questo caso l'opzione migliore è relativa alle dimensioni dell'area di selezione e degli
elementi selezionabili. Touch è spesso la risposta migliore ma con elementi molto concentrati potrebbe
rendere difficoltosa e frustrante la selezione. Ecco alcuni esempi (http://www.html.it/guide/esempi
/jqueryui/esempi/06-selectable-02.html).
Eventi
Gli eventi associati a .selectable() sono:
start / stop: lanciati all'inizio e alla fine dell'interazione.
selecting / unselecting: lanciati quando un elemento sta per essere selezionato o deselezionato.
Potrebbe essere utile per colorarlo diversamente in modo da migliorare il feedback dato all'utente.
selected / unselected: lanciati su elementi appena selezionati o deselezionati.
Versione originale: http://javascript.html.it/guide/lezione/4525/selectable-selezionare-oggetti/
© 1997-2006 HTML.it
14/06/2012 00:15
Sortable (ordinare elementi) (versione per la stampa) | Guide JavaScript...
1 di 3
http://javascript.html.it/guide/stampa_lezione/4549/sortable-ordinare-...
Sortable (ordinare elementi)
L'ultima interazione di jQuery UI che affrontiamo è .sortable() e nasce dall'unione di più interazioni delle quali
condivide molte opzioni: .draggable() e .droppable().
La caratteristica aggiuntiva del metodo rispetto alle interazioni che lo compongono è che gli elementi non
vengono solo trascinati e rilasciati, ma vanno a creare un insieme ordinato ricavabile tramite un metodo
specifico. In questo modo è possibile offrire all'utente un sistema intuitivo e diretto per ordinare liste di vario
genere al posto di metodi più tradizionali come select e campi di testo numerici (esempio (http://www.html.it
/guide/esempi/jqueryui/esempi/07-sortable-01.html)).
Configurazione
Come per le altre interazioni, anche .sortable() ha alcune interessanti opzioni di personalizzazione.
Anzitutto condivide opzioni presenti in .draggable(), come axis (per specificare l'asse secondo cui è possibile
trascinare un elemento), delay e distance per controllare quando l'interazione fra il mouse e gli elementi deve
iniziare, oppure grid per costringere gli spostamenti secondo una griglia in pixel.
Il metodo ha anche opzioni proprie, più specifiche per la personalizzazione dell'ordinamento degli elementi:
connectWith : (selettore - false)
Connette gli elementi ordinabili ad un'altra lista ordinabile, in modo che possano essere trascinati dall'una
all'altra.
$('.lista').sortable({ connectWith: '.altralista' });
dropOnEmpty : (booleano - false)
Se impostato su false gli elementi della lista non possono essere rilasciati in una lista collegata (con
connectWith) se quest'ultima è al momento vuota.
Ecco alcuni esempi (http://www.html.it/guide/esempi/jqueryui/esempi/07-sortable-02.html) di
personalizzazione.
Eventi
Gli eventi associati all'interazione, e ai quali possiamo collegare una funzione di callback, sono:
start / sort / stop: lanciato all'inizio, durante ed alla fine dell'interazione.
change: lanciato durante l'ordinamento, ma sono quando la posizione dell'elemento trascinato è
cambiata.
beforeStop: lanciato quando l'ordinamento è finito ma l'helper (impostato con l'opzione helper) è
ancora disponibile.
update: lanciato quando l'utente rilascia un elemento e la sua posizione è cambiata.
receive: lanciato quando una lista connessa (con connectWith) riceve un elemento dalla lista corrente.
remove: lanciato quando un elemento è rimosso da una lista per essere inserito in una collegata.
over / out: lanciato quando un'elemento viene spostato su una lista collegata o ne esce.
activate / deactivate: lanciato su tutte le liste collegate quando ha inizio l'interazione sulla lista
principale.
Tutti gli eventi prevedono due argomenti: l'evento nativo del browser ed un oggetto ui con le seguenti
proprietà:
14/06/2012 00:15
2 di 3
.helper: l'helpercorrente.
.position: posizione dell'helper.
.offset: posizione assoluta dell'helper.
.item: l'elemento trascinato corrente.
.placeholder: il segnaposto se definito.
.sender: la lista di provenienza, solo nel caso in cui ci siano liste collegate a quella principale.
Metodi specifici
Come per le altre interazioni, anche .sortable() supporta dei metodi generici per inizializzare o rimuovere
l'interazione, oppure per cambiare alcune opzioni su un'interazione preesistente:
//Inizializza la lista con le opzioni di default
$("#lista1").sortable();
//Personalizza un'opzione specifica
$("#lista1").sortable("option","connectWith","#lista2");
Oltre a questi metodi, comuni a tutte le interazioni, .sortable() ne offre altri utili per gestire l'ordinamento
degli elementi nella lista:
cancel: cancella l'ultimo cambiamento avvenuto nella lista.
È utile per permettere all'utente di tornare sui propri passi, oppure associato agli eventi stop e
receive per rimediare ad eventuali ordinamenti errati:
$("#lista1").sortable({
stop : function (event,ui) {
if (ui.item.is(".bloccato")) {
// this si riferisce alla lista
$(this).sortable("cancel");
}
}
});
refresh: aggiorna gli elementi della lista, aggiungendo quelli non presenti al momento
dell'inizializzazione dell'interazione (aggiunti, per esempio, con AJAX).
serialize: serializza gli id degli elementi ordinati, restituendo una stringa inviabile via AJAX o attraverso
un form. La struttura degli id da assegnare agli elementi della lista segue una regola generale del tipo
nomevariable_valore, quindi una lista del tipo:
<ul
<li
<li
<li
</ul>
id="lista">
id="lista_1">Uno</li>
id="lista_3">Tre</li>
id="lista_2">Due</li>
Sarà serializzata nella stringa:
"lista[]=1&lista[]=2&lista[]=3"
toArray: raccoglie gli id degli elementi nella lista e li restituisce sotto forma di array JavaScript.
Riprendendo la lista dell'esempio precedente:
var lista
//restituisce
// lista[0] =
// lista[1] =
// lista[2] =
= $("#lista").sortable("toArray");
"lista_1"
"lista_3"
"lista_2"
14/06/2012 00:15
3 di 3
Per quanto riguarda il metodo serialize, è possibile modificare il comportamento di default passando un
secondo argomento sotto forma di oggetto JavaScript contenente una o più delle seguenti opzioni:
key: indica una stringa da sostituire alla prima parte dell'id (corrispondente al nome della variabile)
attribute: indica un attributo valido dell'elemento da utilizzare al posto di id
expression: filtra il valore di id (o dell'attributo specificato con attribute) con un'espressione regolare
per estrarne il valore da inserire nella stringa finale.
Versione originale: http://javascript.html.it/guide/lezione/4549/sortable-ordinare-elementi/
© 1997-2006 HTML.it
14/06/2012 00:15
Introduzione ai widget di jQuery UI (versione per la stampa) | Guide J...
1 di 2
http://javascript.html.it/guide/stampa_lezione/4575/introduzione-ai-wi...
Introduzione ai widget di jQuery UI
Nelle interfacce delle applicazioni web moderne, i controlli nativi dei browser come select, checkbox e campi di
testo, risultano spesso limitativi per le esigenze di interazione con l'utente. In alcuni casi, ad esempio, avere a
disposizione un calendario a comparsa per la selezione delle date facilita l'utente rispetto a dover scegliere da
tre menu a discesa, magari controllando il giorno della settimana sul calendario del sistema operativo.
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.
Quali Widget?
Un'altra parte del discorso relativa all'utilizzo dei widget è: quali usare e quando?
In linea di principio, è importante utilizzare i widget quando strettamente richiesto, in modo da non
sovraccaricare la pagina con eccessivo codice JavaScript in esecuzione, senza lasciarsi abbagliare dai luccichii
degli effetti grafici.
In definitiva, non sempre i dati vanno divisi in tab o accordion, oppure non sempre mostrare un messaggio con
una finestra modale può migliorare il feedback all'utente (chi di voi non ha mai visto alcuni messaggi di errore di
Facebook, trovandoli eccessivamente tecnici).
Widget disponibili
jQuery UI comprende nativamente sei tipi di widget, completamente compatibili con i temi UI generati da
Theme Roller (http://jqueryui.com/themeroller/) (la web application per la gestione dei temi) e ricchi di opzioni
di personalizzazione.
I widget che vedremo nelle prossime lezioni sono:
Accordion
Datepicker
Dialog
Progressbar
Slider
Tabs
Derivando dalle interazioni, tutti i widget ne prevedono una sintassi simile. È quindi possibile passare un oggetto
al metodo che inzializza il controllo, come leggerla e modificarla successivamente:
//inizializzo un widget
$("#accordion").accordion({ active : 2 });
//leggo un'opzione
var active = $("#accordion").accordion("option","active");
// imposto un'opzione
$("#accordion").accordion("option","active",1);
Oltre ad option, in generale i widget accettano altri tre metodi:
destroy: rimuove il widget dall'elemento a cui era associato;
disable: disabilita temporaneamente il widget;
enable: abilita il widget nel caso in cui sia stato disabilitato.
14/06/2012 00:20
Introduzione ai widget di jQuery UI (versione per la stampa) | Guide J...
2 di 2
http://javascript.html.it/guide/stampa_lezione/4575/introduzione-ai-wi...
Voglio di più!
In un capitolo successivo di questa guida vedremo come estendere jQuery UI con widget personalizzati. Questo
processo è semplificato da una nomenclatura e una documentazione abbastanza rigorose, ma proprio per
questo è necessario rispettare molte regole e non sempre si raggiunge la flessibilità voluta.
Versione originale: http://javascript.html.it/guide/lezione/4575/introduzione-ai-widget-di-jquery-ui/
© 1997-2006 HTML.it
14/06/2012 00:20
Accordion (versione per la stampa) | Guide JavaScript | Javascript.HT...
1 di 2
http://javascript.html.it/guide/stampa_lezione/4576/accordion/
Accordion
Il primo widget che prendiamo in considerazione è Accordion (in italiano "fisarmonica"), un controllo attraverso
il quale vengono nascosti e mostrati determinati blocchi di dati in base all'interazione con l'utente.
Questo tipo di widget viene utilizzato principalmente in due casi: per ridurre l'ingombro del testo nella
pagina oppure per focalizzare l'attenzione dell'utente su una determinata porzione di testo.
Struttura di base
Diversamente da altre librerie UI (per esempio ExtJS), jQuery UI si applica su codice HTML pre-esistente e
quindi, per il corretto funzionamento del controllo è necessario dare una specifica struttura al blocco di codice su
cui vogliamo applicarlo.
Nel caso di Accordion l'HTML di base è il seguente:
<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 (esempio (http://www.html.it/guide/esempi/jqueryui/esempi/09-accordion-01.html)):
$("#accordion").accordion();
Opzioni
Accordion offre un buon numero di opzioni (http://docs.jquery.com/UI/Accordion#options) per personalizzare il
comportamento del widget. Le più interessanti sono:
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.
event : (stringa - 'click')
di default il widget apre e chiude le aree di testo quando l'utente clicca su un header. In alternativa si può
indicare un diverso evento per l'attivazione dell'animazione, come 'mouseover'.
È molto importante capire quale evento associare all'interazione con l'utente, visto che 'mouseover'
potrebbe sembrare più diretto, ma comporta anche il rischio di un'attivazione accidentale del
widget (esempio (http://www.html.it/guide/esempi/jqueryui/esempi/09-accordion-02.html)).
navigation : (booleano - false)
se impostato su true cerca un'ancora che corrisponda all'URL della pagina (location.href) e la attiva.
Quest'opzione è molto utile per riferirsi ad una specifica porzione di testo da link esterni alla pagina, nello
14/06/2012 00:20
Accordion (versione per la stampa) | Guide JavaScript | Javascript.HT...
2 di 2
http://javascript.html.it/guide/stampa_lezione/4576/accordion/
stesso modo in cui si farebbe con un ancora: http://www.miosito.it/faq.html#lista1.
Metodi
Oltre ai metodi comuni ai widget jQuery UI, .accordion() offre un metodo specifico per attivare una delle
sue porzioni di testo, in modo da poter interagire con il controllo anche senza l'azione diretta dell'utente:
$("#accordion").accordion("activate",2);
Eventi
Come per le interazioni, è possibile associare delle funzioni di callback a determinati eventi:
change: lanciato quando l'accordion cambia. Se il widget è animato, l'evento sarà lanciato al
completamento dell'animazione.
changstart : lanciato appena ha inizio un cambiamento nel widget.
Gli eventi possono essere passati al metodo .accordion() direttamente all'interno dell'oggetto contenente le
opzioni, oppure con il metodo .bind():
$(".ui-accordion").accordion({changestart : function() { ... } });
$(".ui-accordion").bind("accordionchangestart", function() { ... });
Ambedue gli eventi accettano due argomenti: l'evento JavaScript nativo e un oggetto ui con le seguenti
proprietà:
.newHeader: un oggetto jQuery dell'header attivo;
.oldHeader un oggetto jQuery dell'header attivo in precedenza;
.newContent: un oggetto jQuery del contenuto attivo;
.oldContent: un oggetto jQuery del contenuto attivo in precedenza.
Versione originale: http://javascript.html.it/guide/lezione/4576/accordion/
© 1997-2006 HTML.it
14/06/2012 00:20
Datepicker (versione per la stampa) | Guide JavaScript | Javascript.H...
1 di 3
http://javascript.html.it/guide/stampa_lezione/4588/datepicker/
Datepicker
Molto probabilmente ognuno di noi si sarà imbattuto, durante la compilazione di un form, in spiegazioni ed
etichette di campo del tipo gg/mm/aaaa oppure gg/mm/aa. Altrettanto spesso si sarà trovato di fronte a tre
menu a tendina dai quali dover scegliere giorno, mese ed anno, magari chiedendosi che giorno della settimana
sarà il 14 Aprile 2010.
Tutti questi passaggi, controlli, etichette e spiegazioni mettono in evidenza come sia difficile lavorare in
maniera intuitiva e diretta con le date.
La risposta di jQuery UI al problema è il widget datepicker che in italiano definiremmo calendario.
L'utilizzo principale di questo tipo di controllo è da una parte quello di facilitare l'utente nell'inserimento di
date in vario formato, dall'altro quello di ridurre al minimo errori nella formattazione delle date stesse.
Nella sua forma più semplice, il widget è attivabile su ogni elemento di input testuale selezionabile con jQuery
(esempio (http://www.html.it/guide/esempi/jqueryui/esempi/10-datepicker-01.html)):
$(".data:input").datepicker();
Opzioni
Data la diversità di utilizzo e la necessità di adattamento a vari formati di data (sia per sintassi che per lingua),
datepicker offre un nutrito numero di opzioni che spaziano dall'impostazione del formato restituito, al
restringmento delle date selezionabili a determinati range. Il tutto concorre ad ottimizzare l'esperienza utente e
la gestione dell'input nella fase di rielaborazione dei dati.
L'esempio più classico nel quale si ha necessità di personalizzare il widget datepicker è quello di un modulo di
prenotazione nel quale è necessario prevedere più lingue ed evitare che accidentalmente un utente possa
richedere una prenotazione per date nel passato.
Per sintetizzare, le caratteristiche personalizzabili del widget riguardano l'interazione (in che modo il controllo
viene attivato), il formato della data e gli elementi visibili del calendario.
Opzioni per l'interazione
buttonImage: (stringa : '')
indica quale immagine utilizzare come bottone per richiamare il widget. È possibile associarla all'opzione
buttonImageOnly impostata su true per rendere l'immagine (solitamente un'icona) l'unico mezzo per
visualizzare il calendario.
minDate / maxDate
imposta un limite entro il quale è possibile selezionare una data. I valori accettati sono un oggetto Date,
un numero (per esempio +7) o una stringa con valori e periodi ('y' per gli anni, 'm' per i mesi, 'w' per
le settimane, 'd' per i giorni, ad esempio '+1m +1w').
Opzioni di formato
Di default, il linguaggio di datepicker è l'inglese, compresa la formattazione della data secondo lo schema
mese/giorno/anno. Il modo più semplice per impostare il formato corretto in base al proprio linguaggio è quello
di richiamare uno dei file di lingua presenti nella cartella i18n. In questo modo la localizzazione prescelta
sarà applicata automaticamente ad ogni istanza del widget.
Nei casi in cui si dovessero gestire più lingue basterà includere il file di lingua completo jquery-ui-i18n.js ed
14/06/2012 00:21
2 di 3
impostare un linguaggio specifico richiamandolo nell'inizializzazione del widget:
$("#calendario").datepicker($.datepicker.regional['it']);
oppure impostandolo globalmente:
$.datepicker.setDefaults($.datepicker.regional['it']);
Le opzioni impostate in questo modo sono le seguenti:
closeText: il testo per il link che chiude il calendario;
prevText / nextText: il testo per i link al mese precente e successivo;
currentText : il testo per "oggi";
monthNames / monthNamesShort: i nomi dei mesi in formato esteso (Gennaio) e abbreviato (Gen);
dayNames / dayNamesShort / dayNamesMin: i nomi dei giorni della settimana in formato esteso
(Lunedì), abbreviato (Lun) e minimo (Lu);
dateFormat: il formato della data, in italiano dd/mm/yy (giorno, mese e anno in due cifre);
firstDay: il primo giorno della settimana, 0 per domenica (nel calendario inglese), 1 per Lunedì;
isRTL: se impostato su true i giorni saranno elencati da destra verso sinistra.
Ecco un esempio (http://www.html.it/guide/esempi/jqueryui/esempi/10-datepicker-02.html) di localizzazione in
italiano.
Opzioni di visualizzazione
Le opzioni di questo gruppo servono per aggiungere o personalizzare il modo in cui viene visualizzato il
calendario:
changeMonth / changeYear: (booleano : false)
se impostate su true, queste opzioni aggiungono in alto un menu a tendina che permette di scegliere
velocemente il mese o l'anno. In questo modo l'utente può selezionare più rapidamente date moto
distanti nel futuro senza dover cliccare ripetutamente sui link di navigazione (esempio
(http://www.html.it/guide/esempi/jqueryui/esempi/10-datepicker-03.html));
duration: indica la durata dell'animazione con cui il calendario appare. Basandosi sulle animazioni di
jQuery i valori accettati sono numeri (millisecondi) oppure stringhe ('slow', 'normal', 'fast');
numberOfMonths: (intero, array : 1)
indica il numero di mesi da mostrare contemporaneamente nel widget. Può essere un numero intero (2
mostrerà il mese corrente ed il prossimo) oppure un array numerico che definisca il numero di righe e
colonne da riempire con i mesi ([2,3] mostrerà sei calendari disposti su due righe e tre colonne). Ecco un
esempio (http://www.html.it/guide/esempi/jqueryui/esempi/10-datepicker-04.html);
showAnim: (stringa : 'show')
indica il tipo di animazione da usare per mostrare il calendario. Può essere usata una qualsiasi delle
animazioni disponibili con jQuery o jQuery UI.
Eventi
Datepicker accetta fra le sue opzioni anche una serie di eventi, utili per impostare l'interazione fra il widget ed
altri elementi della pagina:
beforeShow: lanciato appena prima che il calendario venga mostrato. La funzione collegata accetta due
argomenti, un'istanza dell'input a cui è associato il widget e un'istanza del datapicker stesso;
beforeShowDay: lanciato prima della visualizzazione del calendario. La funzione accetta come
argomento una data e deve restituire un array con tre elementi: true o false per rendere il giorno
selezionabile, una stringa che rappresenti una classe CSS per la presentazione di default, un tooltip da
associare al giorno. Fate attenzione che questa funzione verrà applicata a tutti i giorni presenti nel widget
comportando una diminuzione nelle performance del controllo soprattutto durante la visualizzazione
iniziale e se sono visualizzati più mesi tramite l'opzione numberOfMonths;
beforeShow: permette di definire una funzione personalizzata quando il datepicker passa da un
mese/anno all'altro. Accetta come argomenti l'anno selezionato, il mese (1-12), e l'istanza del datepicker.
14/06/2012 00:21
3 di 3
In questo caso this si riferisce all'input associato al widget;
onClose: lanciato quando il datepicker viene chiuso. Accetta come argomenti la data selezionata in
formato stringa e un'istanza del datepicker stesso. L'evento viene lanciato anche se non è stata
selezionata una data;
onSelect: lanciato quando il datepicker viene selezionato. Accetta come argomenti la data selezionata in
formato stringa e un'istanza del datepicker stesso.
Metodi specifici
Il widget, oltre ai metodi generali di jQuery UI visti in precedenza, offre metodi specifici per interagire con i dati
provenenti dal controllo, nonché per interagire con lo stesso.
hide / show: nasconde e mostra il datepicker. Utile quando si vuole mostrare il calendario senza
attendere che l'utente attivi il comportamento predefinito;
getData / setData: ricava ed imposta la data del datepicker. Per setData è necessario fornire un
ulteriore argomento seguendo la stessa sintassi richiesta delle opzioni minDate e maxDate;
dialog: apre il datepicker in un overlay (o finestra di dialogo). È necessario indicare come ulteriore
argomento la data iniziale per il datepicker, mentre si possono aggiungere opzionalmente altri tre
argomenti: una funzione di callback a seguito della selezione di una data, un oggetto JavaScript con
nuove opzioni per la visualizzazione, la posizione dell'overlay alto/sinistra in formato [x, y] oppure un
evento del mouse contenente tali coordinate. Se questo argomento non viene specificato, la finestra sarà
centrata nello schermo.
Versione originale: http://javascript.html.it/guide/lezione/4588/datepicker/
© 1997-2006 HTML.it
14/06/2012 00:21
Dialog (versione per la stampa) | Guide JavaScript | Javascript.HTML.it
1 di 2
http://javascript.html.it/guide/stampa_lezione/4599/dialog/
Dialog
Nell'utilizzo di un sistema operativo, ognuno di noi ha a che fare con il paradigma delle finestre. Sviluppate a
partire dai primi anni 80, rappresentano il mezzo principale di presentazione del contenuto, sia esso un
messaggio singolo o un insieme di testi, immagini e controlli utente.
Nel web l'utilizzo di questa interfaccia è stato per molto tempo veicolato da controlli nativi del browser e del
sistema operativo, con finestre di dialogo e popup. Il vantaggio di queste soluzioni era quello di essere
estremamente facili da realizzare, tuttavia la loro derivazione prettamente desktop le rendeva poco integrate
con il resto dell'interfaccia web.
Con l'avvento di librerie grafiche come jQuery UI è stato possibile realizzare le finestre a partire da blocchi di
HTML e CSS resi interattivi tramite JavaScript.
Il metodo offerto da UI si appoggia sulle interazioni draggable e resizable per garantire le funzionalità tipiche
di una finestra in ambiente desktop, e permette la personalizzazione grafica grazie alla completa compatibilità
con i temi di Themeroller. Per richiamarlo basta lanciarlo sull'elemento che vogliamo usare come finestra:
$('#finestra').dialog();
Di default il widget verrà aperto automaticamente e realizzerà una finestra con una barra del titolo, un'icona per
la chiusura e cinque maniglie di ridimensionamento (i quattro lati più l'angolo in basso a destra). Quando la
finestra viene ridimensionata, il contenuto in eccesso è nascosto e appaiono automaticamente delle barre di
scorrimento. Ecco un esempio (http://www.html.it/guide/esempi/jqueryui/esempi/11-dialog-01.html).
Opzioni
Essendo basato su due interazioni di UI, resizable e draggable, .dialog() condivide con loro molte opzioni,
tuttavia ne presenta alcune specifiche per la sua personalizzazione:
autoOpen: (booleano - true)
definisce se la finestra debba essere aperta automaticamente quando il metodo è richiamato. Nel caso si
voglia solo inizializzare il widget, si può impostare questo parametro su false e successivamente
mostrarlo con il metodo .dialog('open');
show / hide: (stringa - null)
indica una specifica animazione per mostrare e nascondere la finestra. Tenete sempre presente che l'uso
di animazioni in questi casi serve per dare maggior risalto al contenuto che stiamo per mostrare
e perciò dovrebbero essere utilizzati con parsimonia al fine di non rendere l'interazione troppo pesante;
buttons: (oggetto - {})
aggiunge nella parte bassa della finestra dei bottoni. L'opzione accetta un oggetto Javascript in cui la
chiave rappresenta il testo del bottone, mentre il valore è una funzione di callback lanciata quando il
bottone viene premuto. Il contesto della funzione è la finestra ad esempio:
$('#finestra').dialog({
buttons : {
"Annulla": function() { $(this).dialog("close"); }
[...]
}
});
dialogClass: (stringa - '')
una classe CSS aggiuntiva per personalizzare graficamente la finestra. Può anche essere una classe
14/06/2012 00:21
Dialog (versione per la stampa) | Guide JavaScript | Javascript.HTML.it
2 di 2
http://javascript.html.it/guide/stampa_lezione/4599/dialog/
offerta dal tema di jQuery UI come alert;
draggable / resizable: (booleano - true)
impostando su false queste opzioni, la finestra diventerà rispettivamente fissa oppure non
ridimensionabile. Questa opzione potrebbe essere utile per rendere meno pesante in termini di
risorse la visualizzazione di piccoli messaggi come gli avvisi, che non necessitano di essere
ridimensionati o spostati;
modal: (booleano - false)
rende la finestra un controllo modale. In questo modo tutti gli elementi esterni saranno bloccati
obbligando l'utente ad interagire con essa. Questo comportamento ricalca quello di funzioni
JavaScript come alert() e confirm() ed è molto utile per forzare l'utente secondo un determinato
percorso di interazione. L'uso dell'opzione crea un elemento semitrasparente di overlay grande com il
documento HTML fra l'interfaccia e la finestra;
title: (stringa - '')
Indica il testo da usare come titolo della finestra. In alternativa si può impostare l'attributo HTML title
dell'elemento a cui applicheremo il widget.
Per una lista completa delle opzioni fate riferimento alla documentazione ufficiale (http://docs.jquery.com
/UI/Dialog#options) mentre in questa pagina (http://www.html.it/guide/esempi/jqueryui/esempi/11-dialog02.html) sono disponibili degli esempi pratici.
Eventi
Come per gli altri widget è possibile interagire con dialog anche attraverso funzioni di callback associabili a
specifici eventi che si verificano durante l'interazione fra controllo ed utente:
beforeclose: lanciato quando l'utente cerca di chiudere la finestra. Se la funzione associata restituisce
false, la finestra resterà aperta. Potrebbe essere utile nel caso si voglia verificare che l'utente abbia
compilato dei campi di input obbligatori presenti nella finestra;
open / close: lanciati quando la finestra si apre o chiude;
focus: lanciato quando la finestra riceve il focus da parte dell'utente (solitamente quando l'utente clicca
su di essa);
dragStart / drag / dragStop: ereditati da draggable vengono lanciati quando la finestra è spostata
(inizio, durante, fine);
resizeStart / resize / resizeStop: ereditati da resizable vengono lanciati quando la finestra è
ridimensionata (inizio, durante, fine).
Metodi
Oltre ai metodi comuni a tutti i widget, dialog mette a disposizione alcuni interessanti metodi per interagire con
le finestre direttamente via script:
open / close: con questi metodi è possibile mostrare e nascondere le finestre senza la necessità che
l'utente le richiami direttamente;
moveToTop: quando sono aperte più finestre nella pagina, potrebbero risultare sovrapposte le une alle
altre. Con questo metodo è possibile portare in primo piano una delle finestre;
isOpen: questo metodo restituisce true se la finestra è visibile, altrimenti restituisce false.
Versione originale: http://javascript.html.it/guide/lezione/4599/dialog/
© 1997-2006 HTML.it
14/06/2012 00:21
Progressbar (versione per la stampa) | Guide JavaScript | Javascript....
1 di 2
http://javascript.html.it/guide/stampa_lezione/4630/progressbar/
Progressbar
Nelle applicazioni desktop ci imbattiamo spesso in barre di progresso che hanno il duplice compito di mantenere
viva l'attenzione dell'utente (dare feedback) e indicare con una certa approssimazione quanta parte di
un'operazione è stata compiuta.
Per consuetudine ormai acquisita, una barra di progresso viene interpretata dall'utente come la
rappresentazione grafica di un valore percentuale.
Il problema maggiore con questo tipo di controllo utente è che per rappresentare realmente una percentuale è
necessario conoscere in precedenza il valore finale che dovrà essere raggiunto. Sul web tale valore può
rappresentare una dimensione fisica oppure un lasso di tempo: in entrambi i casi non sempre è possibile
reperire questi dati.
Proprio per questo, nella maggior parte dei casi viene preferito come feedback per l'utente uno spinner, ovvero
un'animazione in gif che richiami l'idea di attesa e caricamento.
Proprio per questi motivi, l'uso del widget progressbar in jQuery UI è indicato soprattutto come feedback
visivo del completamento di passaggi successivi in un'operazione complessa. L'esempio tipico è la
compilazione di un modulo di registrazione ad un sito: se il modulo richiede la compilazione di molti campi è
preferibile spezzare l'operazione in sottogruppi più piccoli ed utilizzare una barra di progresso per indicare
all'utente quanto manca alla fine.
Nella sua forma più semplice una progressbar viene attivata con il seguente codice:
$('#barra').progressbar();
In questo modo all'elemento #barra verrà applicato il tema specifico di jQuery UI che renderà la barra di
progresso scalabile (cioè si adatterà al cambiamento di dimensione del contenitore) e soprattutto aggiornabile
con facilità. Ecco un esempio pratico (http://www.html.it/guide/esempi/jqueryui/esempi/12-progressbar01.html) di utilizzo del widget.
Opzioni
L'unica opzione offerta da progressbar è value che permette di impostare e aggiornare il valore percentuale di
completamento nella barra:
// inizializzo la barra al 25%
$('#barra').progressbar({value : 25});
// aggiorno la barra al 50%
$('#barra').progressbar('value', 50);
Eventi
Progressbar offre un unico evento change che viene lanciato quando il valore della barra cambia.
Metodi
Oltre ai metodi comuni a tutti i widget di UI, progressbar offre un metodo specifico value che può essere usato
per impostare o ricavare il valore della barra:
$('#barra').progressbar('value', 70);
14/06/2012 00:22
Progressbar (versione per la stampa) | Guide JavaScript | Javascript....
2 di 2
http://javascript.html.it/guide/stampa_lezione/4630/progressbar/
Versione originale: http://javascript.html.it/guide/lezione/4630/progressbar/
© 1997-2006 HTML.it
14/06/2012 00:22
Slider (versione per la stampa) | Guide JavaScript | Javascript.HTML.it
1 di 2
http://javascript.html.it/guide/stampa_lezione/4657/slider/
Slider
Gli slider (o controlli a scorrimento) sono abbastanza comuni nell'esperienza quotidiana di ognuno di noi, anche
al di fuori del mondo digitale e delle interfacce dei PC.
Possono controllare il volume di una radio oppure la luminosità di una lampada e sono utilizzati solitamente
per permettere la variazione lineare di un valore (almeno in apparenza). Questa familiarità del controllo lo
rende molto più efficace di select e campi numerici.
In jQuery UI uno slider è attivabile su un elemento HTML con il codice seguente:
$('#slider').slider();
In questo modo verrà visualizzato uno slider con un cursore scorrevole e un valore impostabile fra 0 e 100
(esempio (http://www.html.it/guide/esempi/jqueryui/esempi/13-slider-01.html)).
Opzioni
Le opzioni offerte per personalizzare lo slider vanno ad influire sul suo comportamento e sui valori accettati
(documentazione ufficiale) (http://docs.jquery.com/UI/Slider#options):
min / max: (intero - 0/100)
indicano rispettivamente i valori minimo e massimo impostabili con lo slider. I valori possono essere
anche negativi.
orientation: (stringa - 'horizontal')
imposta l'orientamento dello slider, se impostato su 'vertical' la barra principale verrà mostrata
verticalmente e i valori andranno dal minimo in basso al massimo in alto.
range: (booleano - false)
se impostato su true, permette di impostare due cursori in modo da poter definire un intervallo di valori.
value: (intero - 0)
imposta il valore iniziale del cursore dello slider. Se usato insieme all'opzione range impostata su true, il
valore passato sarà impostato sul primo cursore.
values: (array - null)
accetta un array di due numeri con i quali impostare i valori iniziali dei cursori. È utilizzabile solo se
l'opzione range è impostata su true
step: (intero - 1)
imposta un intervallo di valori selezionabili.
Ecco alcuni esempi (http://www.html.it/guide/esempi/jqueryui/esempi/13-slider-02.html) esplicativi.
Eventi
È possibile interagire con i vari stati di slider grazie a quattro eventi:
start / stop: come per altri widget questi due eventi vengono lanciati all'inizio ed alla fine del
trascinamento del cursore dello slider.
change: come per stop, questo evento viene lanciato alla fine del movimento del cursore, tuttavia
intercetta anche eventuali modifiche al valore dello slider applicate via scripting (ad esempio con il
metodo value).
slide: viene lanciato durante il trascinamento del cursore. Può essere utilizzato, ad esempio, per
aggiornare un campo testuale con il valore numerico impostato in tempo reale.
14/06/2012 00:22
Slider (versione per la stampa) | Guide JavaScript | Javascript.HTML.it
2 di 2
http://javascript.html.it/guide/stampa_lezione/4657/slider/
Tutte le funzioni associate agli eventi di slider accettano due argomenti: l'evento JavaScript nativo ed un oggetti
ui con le seguenti proprietà:
handle: l'oggetto DOM del cursore che l'utente sta trascinando.
value: un intero indicante il valore attuale dello slider.
Metodi
Oltre ai metodi comuni a tutti i widget, slider offre due metodi aggiuntivi per impostare o ricavare i valori
impostati dall'utente:
value: attraverso questo metodo è possibile impostare o ricavare il valore di slider sotto forma di numero
intero:
//Ricava il valore
$('.#slider').slider('value');
//Imposta il valore
$('.#slider').slider('value',25);
values: si comporta come value ma viene utilizzato per slider con cursori multipli. Accetta come
argomento il numero intero indicante l'indice (partendo da 0) del cursore su cui si vuole lavorare:
//Imposta il valore del primo slider
$('.#slider').slider('value',0,25);
Versione originale: http://javascript.html.it/guide/lezione/4657/slider/
© 1997-2006 HTML.it
14/06/2012 00:22
Tabs: opzioni (versione per la stampa) | Guide JavaScript | Javascript...
1 di 2
http://javascript.html.it/guide/stampa_lezione/4664/tabs-opzioni/
Tabs: opzioni
L'utilizzo delle schede (tab) per gestire blocchi di contenuto molto corposi o di diversa natura è ormai divenuta
una soluzione comune nel campo dell'interface design, tanto da essere spesso preso come metro di valutazione
dell'aggiornamento di un software.
Se prendiamo ad esempio il campo dei web browser, una delle pecche maggiormente messe in evidenza del
vecchio IE6 era la mancanza della navigazione a tab ormai comune in Firefox ed Opera. Peraltro questa
soluzione progettuale è diventata così pervasiva da aver invaso anche l'interfaccia di prodotti desktop come
Office.
Per quanto riguarda il web, l'uso di tab è indicato nei casi in cui ci sia necessità di suddividere un contenuto
in blocchi ben distinti, dando così più rilievo alle singole parti via via visualizzate dall'utente.
È invece buona norma evitare le tab (e altre strutture come gli accordion) nel caso in cui il contenuto sia
sostanzialmente omogeneo o comunque presenti rimandi interni, in modo da evitare che l'utente debba saltare
continuamente da una scheda all'altra.
Nella sua configurazione di default, il widget tab è richiamato con il seguente codice:
$('#tabs').tabs();
e crea una struttura di navigazione a schede a partire da una struttura HTML come la seguente (esempio live
(http://www.html.it/guide/esempi/jqueryui/esempi/14-tabs-01.html)):
<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>
<pre><code>$('#tabs').tabs();</code></pre>
</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
</div>
</div>
Sebbene questa struttura possa essere realizzata con una semantica più corretta, essa rimane comunque
leggibile e navigabile anche quando CSS e JavaScript sono disabilitati, garantendo anche un elevato grado di
accessibilità.
Come vedremo più avanti il widget non si limita ad applicare una serie di interazioni ed effetti grafici al
contenuto preesistente, ma permette anche di caricare dinamicamente il contenuto delle schede, di aggiungere
e cancellare schede on demand.
Opzioni
14/06/2012 00:23
Tabs: opzioni (versione per la stampa) | Guide JavaScript | Javascript...
2 di 2
http://javascript.html.it/guide/stampa_lezione/4664/tabs-opzioni/
Come per altri widget complessi, è possibile adeguare in profondità l'aspetto e le funzionalità delle tab secondo
le proprie necessità progettuali. Ecco le principali:
ajaxOptions: (oggetto)
un oggetto JavaScript contenente le opzioni per la gestione del caricamento di contenuti nelle tab via
AJAX (vedere $.ajax (http://docs.jquery.com/Ajax/jQuery.ajax#options) per le proprietà disponibili).
cache: (booleano - false)
se impostato su true il contenuto delle schede caricato con AJAX sarà salvato nella cache. Per evitare che
anche le richieste AJAX siano salvate nella cache del brower dovrete aggiungere l'opzione cache : false
in ajaxOptions.
collapsible: (booleano - false)
permette di rendere collassabili tutte le schede, lasciando visibili solo le etichette.
cookie: (oggetto - null)
salva l'ultima scheda selezionata in un cookie, per essere riutilizzata come scheda di default quando
l'utente ritorna sulla pagina. Richiede l'utilizzo del plugin cookie (http://plugins.jquery.com/project
/cookie). L'oggetto passato come valore dell'opzione dev'essere formattato secondo quanto previsto dal
plugin cookie, ad esempio: { expires: 7, path: '/', domain: 'jquery.com', secure: true }.
event: (stringa - 'click')
l'evento che permette di visualizzare il contenuto di una scheda. In alcuni casi potrebbe essere preferibile
associare l'apertura di una scheda all'evento mouseover, tuttavia bisogna tener conto dei problemi
legati al movimento involontario del mouse da parte dell'utente.
panelTemplate / tabTemplate: (stringa)
indicano un modello al quale applicare il contenuto di tab caricate in remoto (AJAX) rispettivamente per la
scheda (default '<div></div>') e l'etichetta (default '<li><a href="#{href}"><span>#{label}
</span></a></li>').
selected: (intero : 0)
indica l'indice (a partire da 0) della scheda di default al momento dell'inizializzazione del widget. Per non
impostare alcuna tab passate il valore -1. Se richiamata dal metodo 'option', questa opzione
restituirà l'indice della scheda attiva corrente sotto forma di intero.
L'elenco completo delle opzioni disponibili è in questo documento (http://docs.jquery.com/UI/Tabs#options).
Versione originale: http://javascript.html.it/guide/lezione/4664/tabs-opzioni/
© 1997-2006 HTML.it
14/06/2012 00:23
Tabs: eventi e metodi (versione per la stampa) | Guide JavaScript | Java...
1 di 2
http://javascript.html.it/guide/stampa_lezione/4666/tabs-eventi-e-metodi/
Tabs: eventi e metodi
Eventi
Proprio per la complessità del widget, gli sviluppatori ci hanno messo a disposizione una nutrita serie di eventi
con i quali interagire per controllare al meglio l'integrazione di tab con gli altri elementi dell'interfaccia e
l'insieme dell'esperienza di navigazione:
select: è lanciato quando viene selezionata una scheda, più precisamente quando è invocato l'evento
dell'opzione event (di default click).
load: lanciato quando il contenuto di una scheda caricato da remoto viene caricato completamente.
show: lanciato quando una scheda viene mostrata e diventa attiva.
add / remove: lanciato quando viene aggiunta una nuova scheda
enable / disable: lanciato quando una tab viene ablitata o disabilitata.
Tutte le funzioni di callback associate agli eventi accettano come argomenti l'evento JavaScript nativo ed un
oggetto ui con le seguenti proprietà:
tab: etichetta della scheda selezionata
panel: elemento che contiene la scheda corrente
index: un intero indicante l'indice della scheda selezionata (partendo da 0)
Metodi
Attraverso i metodi specifici per tab è possibile interagire via script con le schede gestite dal widget nonché
gestirne il comportamento relativamente alle opzioni di caricamento e aggiunta dinamica di contenuti via AJAX:
add: attraverso questo metodo è possibile aggiungere una scheda al widget sia associandovi un
contenuto già presente nel documento, sia caricandolo da remoto. Al momento non è ancora supportata
la possibilità di caricare contenuti da siti esterni (AJAX cross domain).
Il metodo necessità di due argomenti: il primo di tipo stringa dev'essere un'ancora legata ad un
contenuto presente nel documento oppure un URL da cui caricare in modo asincrono un frammento di
HTML. Il secondo argomento obbligatorio è una stringa da utilizzare come testo della nuova etichetta.
Opzionalmente è possibile passare un indice di tipo numerico per posizionare la nuova scheda in una
posizione precisa del widget, che altrimenti sarà inserito in fondo (esempio (.http://www.html.it/guide
/esempi/jqueryui/esempi/14-tabs-02.html)).
//Carica una nuova scheda da un elemento con attributo
//name="nuovascheda"
$('#tabs').tabs('add','#nuovascheda','Nuova Scheda');
//Carica una nuova scheda da un URL del sito
$('#tabs').tabs('add','carica.php','Nuova Scheda');
remove: rimuove dal widget una tab specifica in base al numero di indice passato come argomento
(partendo da 0).
//Cancella la prima scheda
$('#tabs').tabs('remove',0);
select: rende attiva la scheda indicata come ulteriore argomento:
//Rendi attiva la terza scheda
14/06/2012 00:23
Tabs: eventi e metodi (versione per la stampa) | Guide JavaScript | Java...
2 di 2
http://javascript.html.it/guide/stampa_lezione/4666/tabs-eventi-e-metodi/
$('#tabs').tabs('remove',2);
load: ricarica il contenuto di una specifica scheda caricato dinamicamente. Può essere utile nel caso il
contenuto sia soggetto ad aggiornamenti costanti (per esempio un lettore di feed RSS)
url: cambia l'URL associato ad una scheda dinamica. Necessita di altri due argomenti indicanti
rispettivamente la posizione della scheda nel widget (a partire da 0) ed il nuovo indirizzo da cui caricare i
contenuti.
length: restituisce il numero di tab caricate nel widget.
abort: cancella tutte le richieste AJAX ancora in sospeso per tab caricate dinamicamente.
rotate: attiva una rotazione automatica fra le schede del widget. Accetta come ulteriori argomenti un
intero indicante i millisecondi fra la visualizzazione di una scheda e la successiva, nonché un valore
booleano opzionale per stabilire se la rotazione debba essere continua o fermarsi quando l'ultima scheda
è divenuta attiva.
Questo metodo è molto utile quando il widget viene usato come teaser dei contenuti di un sito.
Usi particolari e note di utilizzo
Proprio per la complessità del widget e la possibilità offerta di aggiungere, rimuovere e caricare schede
dinamicamente, vi sono alcuni accorgimenti utili da seguire per garantire la migliore fruibilità dei contenuti ed
una migliore consistenza nelle funzionalità del widget.
Anzitutto potrebbe essere necessario mantenere la navigazione dei link presenti in una scheda
all'interno di quest'ultima, piuttosto che aprirli in una nuova finestra o nella finestra corrente. In tal caso si
può ricorrere allo script seguente in fase di inizializzazione del widget:
$('#tabs').tabs({
load: function(event, ui) {
$('a', ui.panel).click(function() {
$(ui.panel).load(this.href);
return false;
});
}
});
In secondo luogo è importante sottolineare che ogni componente che richieda un calcolo sulle sue dimensioni
durante l'inizializzazione non funzionerà se caricato in una scheda nascosta, poiché la scheda stessa è nascosta
via CSS con display: none. Un accorgimento utile può essere quello di sovrascrivere il CSS nativo di jQuery UI
con il seguente:
.ui-tabs .ui-tabs-hide {
position: absolute;
left: -10000px;
}
In modo da nascondere le tab inattive semplicemente spostandole al di fuori del viewport. In realtà questa
soluzione non è sempre efficace in quanto molto legata allo specifico contesto del layout dell'applicazione.
Versione originale: http://javascript.html.it/guide/lezione/4666/tabs-eventi-e-metodi/
© 1997-2006 HTML.it
14/06/2012 00:23
Themeroller e i temi di jQuery UI (versione per la stampa) | Guide Jav...
1 di 1
http://javascript.html.it/guide/stampa_lezione/4667/themeroller-e-i-tem...
Themeroller e i temi di jQuery UI
Nelle lezioni introduttive abbiamo visto come 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.
Dietro a questo file CSS si nasconde un'idea particolarmente innovativa per quanto riguarda i framework UI in
JavaScript: quella di tema grafico.
Nel nostro caso il tema grafico che abbiamo sempre utilizzato nei nostri esempi è chiamato smoothness e viene
rilasciato insieme alla libreria di base.
La struttura di questo tema rispecchia il markup generato dai vari metodi e widget di UI, spesso molto
complessi e verbosi e proprio per questo apparentemente ingestibili nel caso si volessero applicare
personalizzazioni per uniformare i controlli alla nostra interfaccia.
In realtà il team di jQuery UI, in collaborazione con Filament Group, ha sviluppato un applicativo online
chiamato Themeroller per gestire con semplicità quest'operazione.
Themeroller
Themeroller è un applicativo online raggiungibile all'indirizzo http://jqueryui.com/themeroller/
(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 (http://jqueryui.com/themeroller
/#themeGallery) 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 dala directory css.
Approfondimenti sui temi
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.
Inoltre, ogni tema mette a disposizione classi specifiche per la visualizzazione e la strutturazione di icone,
messaggi contestuali ed altre parti dell'interfaccia. A tal riguardo potete fare riferimento a questo articolo
(http://javascript.html.it/articoli/leggi/3008/gestire-i-css-in-jquery-ui/), oppure riferirvi direttamente alla
documentazione ufficiale (http://docs.jquery.com/UI/Theming/API)
Versione originale: http://javascript.html.it/guide/lezione/4667/themeroller-e-i-temi-di-jquery-ui/
© 1997-2006 HTML.it
14/06/2012 00:24

Guida jQuery UI

Transcript

Documenti analoghi

UI Designer - Giacomo Paita

Pagina 1 di 1 JavaScript Utility Software Suite informatore: Ultima

Mattia Graziotti - Greatz Web Creations

Esercitazione Calcolo numerico - n. 1 Javascript - Octave

Dettagli - stampe

nuovo CV - paolo genta

Informa di Sabato Bufano Corso Webmaster avanzato

JQuery e Ajax

RICHIESTA RICERCA NUOVO PERSONALE Ricerca

Terza Stefano - itis magistri cumacini