Continuiamo la nostra serie di lezioni su jQuery.
Oggi facciamo qualcosa di più interessante, ovvero una tabella dei contenuti generata automaticamente grazie a jQuery. Sto parlando del TOC, che molto spesso troviamo in testa degli articoli di Wikipedia.
Potete scaricare tutto quanto il sorgente di questo esempio da fine pagina.
Iniziamo.
In che modo occorre muoverci per il nostro scopo? Per ognuno dei tag di testa “header”, dobbiamo fare due cose:
- Per prima cosa dobbiamo andare creare delle ancore ed inserirle all’interno della testata del documento, si tratta insomma del TOC vero e proprio.
- Dobbiamo quindi inserire dei link all’interno del documento, in quanto anche questi ultimi saranno creati in maniera del tutto dinamica da jQuery.
Quello che andremo a fare è prendere tutti i blocchi div, in quanto il documento ha ogni sezione all’interno di un diverso div.
Visto che la sezione di testa del nostro documento è anch’essa contenuta all’interno di un div, a meno che di voler creare un indice verso se stessa, dovremo escluderla.
Tale sezione è distinta dalla suo id, cioè header.
All’interno di questa sezione andrebbe invece di inserire la nostra tabella dei contenuti.
Vediamo il codice di partenza.
<script type="text/javascript">
$("document").ready(function() {
costruisciIndice('h3', 'header');
});
function costruisciIndice(strWhichTag, sBookMarkNode) {
//Qui scriveremo il codice jQuery
}
</script>
troviamo una prima funzione costruisciIndice, la quale ha due parametri, cioè h3 ed header. Tale funzione la gestiamo noi per mezzo di jQuery.nel momento in cui il DOM è stato caricato, jQuery richiama la funzione costruisciIndice, alla quale sono assegnati due parametri, h3 ed header.
Abbiamo detto che dobbiamo recuperare tutti quanti i div che si trovano all’interno del documento, fatta eccezione per uno particolare il cui id è header. Il codice jQuery è:
$("div:not([id=header]);
A questo punto potremo “guardare” all’interno dei div alla fine di recuperare tutti quanti i tag di tipo h3.
A questo punto aggiungiamo alla stringa strWhichTag, che è il tag h3 che passiamo alla funzione. Se guardate il documento HTML che potete scaricare da questa pagina, vedete che nei tag h3 del documento non sono presenti link di alcun tipo.
Attraverso jQuery andremo adesso ad aggiungerli. A questo punto ci torna utile la funzione each, che abbiamo visto qualche lezione fa, e attraverso la quale possiamo interare su ognuna delle sezioni h3 presenti all’interno del documento. Il codice a questo punto è:
$("div:not([id=header]) "+ strWhichTag).each(function(){</p>
<p>});
Andremo ora a creare dei link per spostarci all’interno della pagina, è necessario che ciascuno di essi sia diverso dagli altri.
Creiamo allora una variabile che per ognuno dei link che ci servono creerà un collegamento univoco.
Definiamo allora una nuova variabile, var aUnica = 0, la quale cambierà valore ad ogni iterazione.
var aUnica = 0;
var oList = $("
<ul id='bookmarkList'>");
$("div:not([id=header]) "+ strWhichTag).each(function(){
$(this).html("<a name='bookmark" + aUnica + "'></a>"+$(this).html());
oList.append($("
<li><a href='#bookmark" + cAnchorCount++ + "'>" + $(this).text() + "</a></li>
<p>"));
});
$("#" + sBookMarkNode).append(oList);
Analizziamo brevemente che cosa succede.
Per ognuno dei tag div che non hanno come id heder, aggiungiamo h3 e quindi iteriamo.
Andiamo ad aggiungere all’html esistente un’ancora formata dalla stringa fissa bookmark,resta unica grazie alla nuova variabile aUnica, la quale incrementa ad ogni ciclo.
Al nuovo codice HTML generato, dobbiamo reinserire quello che era già presente, ecco spiegato perché in fondo alla prima riga è presente il codice +$(this).html().
Vediamo ora il secondo blocco di codice:
oList.append($("
<li><a href='#bookmark" + cAnchorCount++ + "'>" + $(this).text() + "</a></li>
<p>"));
Nel codice abbiamo inizializzato una lista, attraverso la variabile oList.
Per ognuno degli elementi che scorriamo all’interno della funzione each(), andiamo a mettere in append un nuovo elemento della lista generato dinamicamente, il cui collegamento ipertestuale è dato da “#bookmark” concatenato con la variabile cAnchorCount la quale viene incrementata ad ogni ciclo.
a questo punto non rimane altro che l’ultima sezione, cioè:
$("#" + sBookMarkNode).append(oList);
ovvero che cosa succede: andiamo ad inserire la lista appena generata nella sezione header, che è contenuta in sBookMarkNode.
Ecco il codice sorgente: Tabella TOC generata con jQuery.