• post precedente : jPaging - Differenze via jQuery - 2/2
• indice tutorial
• sorgente js di questo post
• demo di questo post

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]