In questa guida esploreremo il progetto jQuery UI, una libreria open-source di plug-in basata su  e che ne ampia le funzionalità.  jQuery UI fornisce infatti una serie di  caratteristiche (interazioni ed animazioni, effetti avanzati e widgets) che porta in dote alla libreria principale. Infatti lo scopo di questo framework è  di “estendere” jQuery, dotandola di ulteriori strumenti, utili soprattutto per la costruzione e la gestione delle interfacce utente.

Le aggiunte che jQuery UI apporta al framework di base possono essere così suddivise:

• Interazioni, cioè funzionalità che rendono interattivi gli elementi a cui vengono applicate (il trascinamento degli elementi, il loro ridimensionamento, la loro selezione ed altro ancora);
• Widget, cioè componenti complessi pronti all’uso, come finestre di dialogo, bottoni, barre di progresso, calendari e via discorrendo;
• Effetti grafici e transizioni animate, per la comparsa, la scomparsa e la trasformazione degli elementi;
• Utilities, cioè le utilità di basso livello da usare per le interazioni, i widgets e gli effetti;

In questa parte dell’articolo ci occuperemo prevalentemente dell’argomento “effetti grafici”, mentre il resto verrà affrontato successivamente.
A seguire vi riporto in dettaglio gli argomenti che affronteremo in questa prima parte:

• Importare jQuery UI;
• Effetti grafici ed animazioni;
• Color Animation;
• Class animation;
• Metodo effect;
• Scorciatoie di effect.

Importare jQuery UI

Per prima cosa occorre scaricare jQuery UI ed integrarlo all’interno di un’applicazione Web che già fa uso di jQuery. Poiché la struttura della libreria è estremamente modulare, sul sito del progetto è disponibile sia un download completo di tutto il codice (anche compresso), sia un builder, con il quale ognuno può realizzare una versione personalizzata della libreria e del tema (per adesso supponiamo di lasciare impostato il predefinito “UI lightness”), in modo da scaricare solo ciò che serve all’applicazione.
Inizialmente è consigliabile scaricare il pacchetto completo (per prove e test), ma in fase di produzione è preferibile effettuare una selezione dei soli plug-in necessari, al fine di alleggerire il peso della libreria.

Supponiamo di scaricare l’archivio completo, una volta estratto, avremo una struttura come in figura accanto. Dalla cartella js, occorre prelevate il file jquery-ui-x.y.z.custom.js e copiarlo all’interno della applicazione web in cui si vuole fare uso di jQuery UI (se necessario la cartella dispone anche una copia della libreria jQuery).
Dalla cartella css, occorre invece prelevare la sub-directory ui-lightness e copiarla alla posizione dove sono locati i fogli di stile dell’applicazione.

Ecco come inserire jQuery UI all’interno della nostra pagina web:

In alternativa è possibile, , includere direttamente un riferimento alla libreria sul sito ufficiale del progetto (naturalmente si può sostituire il tema, di seguito il "base", con un altro desiderato):

Infine ricordiamo che è anche possibile linkare i riferimenti resi disponibile da Google ().

Naturalmente per i file .js e .css, è possibile specificare se importare le versioni compresse per ambiente di produzione (es jquery-ui-x.y.z.custom.min...), o se importare le versioni di sviluppo, così come abbiamo visto nei sorgenti precedenti.

Sul sito di jQuery UI sono disponibili diversi temi grafici scaricabili, tra i quali è possibile scegliere quello che meglio si adatta al look and feel delle nostre pagine web.
Inoltre, possiamo ricorrere allo strumento ThemeRoller. Si tratta di un ottimo servizio, offerto dal sito ufficiale, grazie al quale è possibile modificare ogni singolo elemento jQuery UI, customizzandone l’aspetto, agendo ad esempio, sui colori e sul font.

Il nuovo tema ottenuto si chiamerà manco a dirlo: custom-theme. 🙂

Effetti grafici e animazioni

Questa categoria si compone di:

• Color Animation: Animazione attraverso il passaggio da un colore ad un altro;
• Class  Animation: Animazione basata sul passaggio da uno style ad un altro (facendo uso di metodi quali addClass, removeClass etc…);
• Metodo effect: Varietà di effetti (shake, slide-down, explode, fade-in, etc.);
• Scorciatoie del metodo effect: Le funzioni stilistiche predefinite hide, show e toggle, per mostrare/nascondere elementi.

Le animazioni, , sono uno strumento fondamentale per catturare l’attenzione dell’utente, creare relazioni fra gli elementi dell’interfaccia e creare interazione più accattivanti 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.
Ad esempio un campo nel quale UI estende jQuery, è il numero di (easing), disponibili. Potete trovare la lista completa su questa pagina.

Color Animation

La libreria amplia anzitutto le capacità dei metodi base, come ad esempio il metodo .animate() nativo, introducendo, oltre che nuovi easing, anche le transizioni di colore, le quali permettono di sostituire un colore con un altro con un effetto graduale. Le proprietà CSS (scritte in notazione “CamelCase”), che supportano questo effetto sono:

• backgroundColor
• borderBottomColor
• borderLeftColor
• borderRightColor
• borderTopColor
• color
• outlineColor

In pratica l’animazione eseguirà una transizione dal colore attuale ad uno che è impostato, o in formato esadecimale, o rgb, o stringa ().

$("#block").text("Errore!").animate({"backgroundColor":"red"});

Class Animation

jQuery UI aggiunge nuove caratteristiche ai metodi per la manipolazione delle classi CSS. Così adesso è possibile passare un numero in millisecondi (o una stringa simbolica scelta fra “slow” e “fast”) come secondo parametro di .addClass(), le proprietà CSS definite nella classe saranno applicate con una transizione della durata indicata:

$("#block").text("Errore!").addClass("error",1000,"linear",function () {
        alert("Errore Notificato!");
});

Se vi ricordate abbiamo   del metodo .addClass(), questo infatti, oltre al parametro della durata, accetta altri due argomenti opzionali indicanti l’andamento dell’animazione ed una funzione di callback da lanciare alla conclusione della transizione (). Di seguito la sintassi:

$("#element").addClass(className[,duration][,easing ][,callback])

Altri metodi coinvolti nell’estensione sono .removeClass() e .toggleClass();  ambedue accettano i medesimi argomenti di .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. Di seguito vediamo la sintassi:

$("#element").switchClass(toRemove,toAdd[,duration][,easing][,callback]);

dove:

• toRemove: classe che deve essere rimossa;
• toAdd: classe che deve essere aggiunta;
• duration (opzionale): la durata dell’effetto. Può essere un valore in millisecondi o una stringa simbolica scelta fra "slow" e "fast";
• easing (opzionale): L’andamento con cui avviene la transizione;
• callback (opzionale): funzione di callback.

$("#block").switchClass('currentClass','errorClass',500,'easeOutBounce',
     function(){
        alert("Errore Notificato!");
     }
);

Metodo Effect

Abbiamo già visto come sia possibile realizzare delle animazioni sfruttando il metodo animate(). Il progetto jQuery UI amplia le capacità originarie della libreria jQuery aggiungendo nuove animazioni attraverso il metodo effect(), la cui sintassi è:

$("#mioElemento").effect(name[,options][,duration][,callback]);

Gli argomenti utilizzati sono i seguenti:

• name, il nome dell’effetto da applicare;
• options (opzionale), le eventuali opzioni in notazione JSON per l’effetto. Il parametro è generalmente opzionale, ma alcuni effetti richiedono necessariamente alcune opzioni;
• duration (opzionale), la durata dell’effetto. Può essere un valore in millisecondi o una stringa simbolica scelta fra "slow" e "fast";
• callback (opzionale), funzione di callback.

Vediamo un  con l’effetto shake:

$(function() {
   $("#block").effect("shake");
});

Adesso un  sempre con shake:

$("#block").effect("shake", { times: 5 }, 2000, function() {
    alert("completo");
});

Di seguito l’elenco esaustivo degli effetti supportati da questo metodo (potete fare riferimento a questa pagina della documentazione ufficiale, per conoscere le eventuali opzioni):

• blind ()
• bounce ()
• clip ()
• drop ()
• explode ()
• fade ()
• fold ()
• highlight ()
• puff ()
• pulsate ()
• scale ()
• shake ()
• size ()
• slide ()
• transfer ()

Scorciatoie del metodo effect

Alcuni degli effetti prodotti da effect() possono essere gestiti mediante le seguenti “scorciatoie”, che in realtà sono , estese in jQuery UI:

• hide: nasconde un elemento;
• show: mostra un elemento;
• toggle: per alternare hide e show in base alla visibilità di un elemento;

Questi metodi accettano come parametri: il tipo di effetto che verrà applicato per mostrare o nascondere l’elemento cui è associato, la durata, le opzioni e la funzione di callback ( esattamente come per il metodoeffect()).
Vediamo la sintassi di hide(), che è la medesima anche per gli show() e toggle():

$("#mioElemento").hide(effect[,options][,duration][,complete])

Esempio d’uso:

// mostro un box con effetto blind
$("#block").show("blind");

// nascondo un box con effetto slide
$("#block").hide("slide");

Questi metodi accettano alcuni, ma non tutti, degli gli stessi effetti di effect() (vedi documentazione ufficiale), inoltre mantengono l’azione svolta in jQuery, permettendo così di visualizzare ad esempio un elemento con un effetto a tendina e nasconderlo con una esplosione ():

//Mostra nascondi box
$("button").click(function(){
  if($("#block").is(':visible'))
        $("#block").hide("explode");
  else
        $("#block").show("blind");
});

Per adesso ci fermiamo qua… Nel prossimo articolo vedremo gli altri argomenti qui non trattati su jQuery UI. In particolare vedremo le interazioni e i widget. A presto!!