Informatiche {bubbakk}

Nel precedente tutorial abbiamo realizzato una semplice pagina di test, muovendo i primissimi passi nel mondo di jQuery. Proviamo ora ad aggiungere un po’ di interattività alla nostra pagina. Alla fine del tutorial, otterremo questo.

Tutorial 2: effetti ed animazioni

Riprendiamo la nostra pagina di prova esattamente dove l’avevamo lasciata, e apriamola.

Guardando l’elenco, mi viene pensato che se la lista di film fosse più corposa, diciamo almeno 50 titoli, potrei dover scorrere parecchio la pagina per vedere i dettagli del film che mi interessano. Forse sarebbe meglio vedere solamente l’elenco dei titoli e, una volta trovato il film, posso fare click su un pulsante per aprirne i dettagli.

Aggiungere immagini senza modificare la pagina HTML

Abbiamo già visto nel precedente (e primo) tutorial come, con una sola istruzione, si riescano a manipolare molti oggetti contenuti nella pagina; anche in questo caso faremo una cosa simile.

Aggiungiamo, alle righe di codice precedentemente scritte, la seguente:

$("ul>li").prepend("<img src='./img/application_view_list.png'> ");

così che ora il codice completo, debitamente commentato, diventi:

<script type="text/javascript">
$(document).ready(function(){

  // imposta la classe titolo ad ogni primo DIV di ogni ListItem
  $("ul>li>div:first-child").addClass("titolo");
  // imposta la classe anno ad ogni ultimo DIV di ogni ListItem
  $("ul>li>div:last-child").addClass("anno");

  // aggiunge un'icona prima di ogni alto elemento all'interno di ogni List Item
  $("ul>li").prepend("<img src='./img/application_view_list.png'> ");
});
</script>

Salviamo e apriamo il file con il browser per vederne gli effetti: se avete scritto correttamente, vedrete apparire un’iconcina prima del titolo del film.

Come ci siamo riusciti? Se avete seguito il primo tutorial dovreste essere in grado di capire la prima parte del comando: $(“ul>li”) non fa altro che selezionare tutti i tag LI all’intero, o meglio, figli diretti del tag UL. Il metodo che segue il selettore, prepend(), serve ad inserire il contenuto passato come parametro all’inizio di ogni elemento nell’insieme di quelli che fanno match con il selettore precedente. Quindi, come primo tag figlio di LI, sarà inserito il nostro tag per l’iconcina.

Notiamo che, a fronte del reale codice HTML da noi realmente scritto:

<li>
  <div>Quarto potere</div> <div>Orson Wellles</div> <div>1941</div>
</li>

applicando i 3 comandi jQuery, l’elemento di lista in questione diventerà come se fosse stato scritto:

<li>
  <img src="./img/application_view_list.png"> 
  <div class="titolo">Quarto Potere</div> <div>Orson Welles</div> <div class="anno">1941</div>
</li>

Questo lo otteniamo per tutti gli elementi della lista, aumentando così il livello di “risparmio” di codice… non per niente il motto di jQuery è “Write Less, Do More” !

Aggiungere un effetto abbinandolo ad un evento

Ora che abbiamo l’icona, desideriamo renderla interattiva: fare in modo cioè che, cliccandola, apra e chiuda in modo alternato i dettagli sottostanti al titolo. Per fare questo abbiamo bisogno di:

1. fare in modo che l’immagine appena inserita risponda all’evento click del mouse
2. in risposta all’evento di cui sopra, venga avviato l’effetto di apertura o di chiusura degli elementi sottostanti

Bene.

Definiamo l’evento

Per risolvere la questione click, aggiungiamo (sempre in fondo al nostro codice attuale) le seguenti:

$("img").click(function(){
  alert("click!");
});

Questo codice assegna una funzione, in questo caso un banalissimo alert(“testo“), all’evento click di ogni tag IMG presente nella nostra pagina.

Ovviamente, visto che non abbiamo altre immagini, ci può andar bene così ma, in generale, il nostro selettore dovrà essere più preciso: potremmo già sin d’ora modificarlo almeno in $(“ul>li>img”) così da limitare questa funzionalità ai soli tag IMG figli diretti di elementi di lista LI, a loro volta discendenti diretti di liste UL. Anche così, comunque, dovete fare attenzione perché se in futuro doveste inserire, ad esempio, l’immagine della locandina nella scheda del film, anche a questa sarà associata la funzione specificata perché rispondente alla definizione del selettore. Chiaro?

Marzullianamente potrei allora farmi una domanda: “come faccio a creare un selettore più preciso?” così che possa darmi una risposta: “ci sono diverse soluzioni di cui forse la più corretta e semplice è quella di assegnare una classe alla nostra immagine/iconcia dei dettagli” così da evitare ambiguità. Facciamolo e modifichiamo il codice scritto in questo modo:

$("ul>li").prepend("<img class='ico_dettagli' src='./img/application_view_list.png'> ");

$("ul>li>img.ico_dettagli").click(function(){
  alert("click!");
});

ottenendo così, in definitiva, questo codice. In tal modo abbiamo scongiurato possibili errori e incongruenze.

Definiamo l’effetto

Finalmente, eccoci giunti al tanto atteso effetto speciale. Prima presento il codice, poi passo a spiegarlo.

Trasformiamo la nostra definizione dell’evento click sull’immagine cambiando solo il contenuto della funzione da eseguire:

// definiamo un effetto per l'evento click
$("ul>li>img.ico_dettagli").click(function(){
  if ( $(this).next().next().css("display")=="none" )   // se l'oggetto è invisibile...
    $(this).next().nextAll().slideDown();               //   applica l'effetto slideDown()
  else                                                  // altrimenti...
    $(this).next().nextAll().slideUp();                 //   applica l'effetto slideUp()
});

otterremo, così, la magia che volevamo: cliccando sull’iconcina vedremo chiudersi gli elementi che seguono il titolo del film e, cliccando nuovamente, li vedremo ricomparire, il tutto con un gradevole effetto slide.

Leggendo i commenti, il codice sembra chiaro, comunque un paio di dettagli vanno chiariti. Vi sarete accorti che è comparso un nuovo elemento, vale a dire this. Il this è il puntatore all’oggetto sul quale è stato rilevato l’evento (nel nostro caso il click). E’ di fondamentale importanza utilizzarlo: infatti, applicando lo stesso effetto su ogni icona, come si fa poi a dire al programma “chiudi proprio gli elementi al di sotto di quello che è stato cliccato? “. Il quello che è proprio il this.

Ora la prima istruzione, la condizione if, può essere letta così:

che, tradotto, vuol dire:

La seconda istruzione, più simile alle altre che conosciamo, dice di applicare la funzione slideDown() a tutti gli elementi successivi – .nextAll() – all’elemento successivo di quello cliccato – $(this).next() -. Ricordiamo ci infatti che, ogni elemento/scheda di film è composto da icona, titolo del film (che deve rimanere sempre visibile, ecco spiegato i .next() dopo il $(this) ), regista e anno di pubblicazione.

Manca solo un piccolo particolare

Al caricamento della pagina, desideriamo che tutta la lista dei film sia compressa, cioè che si veda solamente il titolo… sarà poi l’utente a cliccare sull’icona dei dettagli del film che desidera per vederne gli altri dati. Perciò aggiungiamo questa istruzione:

$("ul>li>img.ico_dettagli").next().nextAll().hide();

Abbiamo ottenuto così il risultato che ci attendevamo. Prima di chiudere l’articolo, però, vorrei dare qualche suggerimento.

Altri effetti inclusi nell’API

Di base, jQuery offre 2 tipi di effetti già pronti, che sono:

• lo srotolamento,  cioè l’effetto da noi utilizzato, richiamabile con la coppia di metodi slideUp() / slideDown(). In alternativa si può valutare l’uso di slideToggle()
• la dissovenza con fadeIn() / fadeOut(), ai quali aggiungiamo anche fadeTo() che accetta, come parametro, il livello di opacità per impostare, in modo animato, l’opacità di un elemento

Un non-effetto è costituito dalla coppia di metodi hide() e show() utili per nascondere e mostrare elementi di pagina, senza però alcun effetto di transizione.

Ogni altro tipo di effetto, però, può essere implementato con un po’ di codice. Infatti è possibile animare gli elementi tramite il metodo animate(): questo permette di implementare transazioni tra una classe CSS ed un’altra con, in più, la possibilità di aggiungere parametri come la velocità, l’easing, e così via. Sembra ben poca cosa, ma in realtà è un sistema molto potente e versatile per creare effetti di ogni tipo. Per saperne di più, potete consultare la documentazione del metodo, corredata di esempi chiari.

Conclusioni

Nel salutarvi, vi suggerisco di fare esperimenti. Partendo da questi 2 semplici tutorial di base si può già implementare qualcosa di carino. Nel prossimo articolo credo che approfondiremo i selettori, applicando quanto vedremo ad una form di inserimento e validazione dati vedremo come realizzare una lista dinamica per l’inserimento di dati.

I miei tutorial su jQuery

1. primi passi con jQuery
2. animazioni e dinamicità con jQuery (questo tutorial)
3. creare una lista dati dinamica con jQuery (in preparazione)