Aggiungiamo gli eventi.
Nei precedenti post abbiamo aggiunto la toolbar. Ora non ci rimane che aggiungere i comportamenti ai tasti della toolbar.
Partiamo dai tasti di pagina. Poi vedremo il tasto avanti e indietro.
jQuery(".jp-handler")
.click(function(){
//qui il codice dell'evento
});
Per associare ad un link (usare sempre i link, saranno accessibili anche via tastiera) un evento usiamo la classe (jp-handler) che abbiamo inserito per interrogare facilmente il DOM, e il metodo jQuery click, wrapper dell’evento nativo onclick. Il metodo click della libreria jQuery accetta come argomento una funzione (closure).
All’interno dell’evento procediamo al nascondimento di tutte le pagine:
_jpages.hide();
NB: _jpages è visibile all’interno della closure dell’evento.Vedremo dopo uno dei primi pericoli dovuti alle closure. L’ambito e il nome delle variabile. In questo evento infatti c’è un possibile bug.
jQuery(".jp-toolbar").find(".jp-active").removeClass("jp-active");
Rimuoviamo la classe attivo. Usiamo il metodo find che è forse il metodo più semplice e potente per ottenere nodi da un certo punto di partenza (.jp-toolbar). Il risultato di find è l’elemento/i trovato. Quindi in catena rimuovo la classe all’elemento.
NB: imparate ad usare la chinability. A volte si parte da un “soggetto” e il soggetto rimane sempre quello nella catena. A volte il soggetto cambia come in questo caso: prima .jp-toolbar, dopo il metodo find, .jp-active.
var _id = parseInt(jQuery(this).text()) - 1;
L’id della “pagina” da mostrare è il testo del link -1.
NB: in questo caso per la prima volta uso la parola this. this è la parola chiave del linguaggio che indica l’istanza di un oggetto in un determinato momento. In javascript bisogna fare molta attenzione ai contesti perchè this cambia a seconda del contesto..
All’interno di un evento this vale sempre l’elemento a cui sto attaccando l’evento. Quindi sempre una reference di un nodo HTML.
jQuery(".jp-toolbar")
.eq(0)
.find(".jp-handler")
.eq(_id)
.addClass("jp-active");
Le toolbar sono due. Prendo la prima
eq(0)
Trovo i “tasti pagina”, Prendo l’elemento con indice _id e aggiungo la classe css “attivo” (jp-active).
jQuery(".jp-toolbar")
.eq(1)
.find(".jp-handler")
.eq(_id)
.addClass("jp-active");
Ora prendo la seconda toolbar e faccio la stessa cosa.
La capacità di navigare i nodi di un documento è sicuramente la principale ragione di successo di jQuery.
_jpages.eq(_id).show();
Mostro la pagina con indice _id.
var _page = _id + 1;
if(_page != 1)
jQuery(".prev").show();
else
jQuery(".prev").hide();
if(_page != _pages)
jQuery(".next").show();
else
jQuery(".next").hide();
Creo una variabile locale (_page) all’ambito con il valore dell’indice maggiorato di 1 (gli array partono da 0).
Faccio due banali e brutti if per vedere se devo nascondere o meno i tasti prev e next.
Creo gli eventi per i tasti next e prev
jQuery(".prev")
.click(function(){
//code
});
jQuery(".next")
.click(function(){
//code
});
All’interno degli eventi dei tasti next e prev il mio _id lo recupero dall’html:
var _id = (parseInt(jQuery(".jp-toolbar").find(".jp-active").eq(0).text()) - 1);
A seconda che sia prev o next subito dopo incremento o decremento questo valore
_id--;
Tutti gli eventi terminano con un return false per evitare che il link visiti effettivamente il target dell’attributo href.
DEMO
[... continua]
Tagged javascript, jpaging, jquery, plugins, tutorial
