È piuttosto comune trovare, sulle pagine dei siti, una stringa che ci mostra la directory o la sezione che si sta navigando. Solitamente il percorso (in inglese path "percorso", ma più comunemente breadcrumb "briciole di pane") è costruito in modo dinamico con linguaggi di programmazione come PHP o ASP ma è possibile aggiungerlo anche con JavaScript.
Lo script richiede un minimo di personalizzazione grafica e nient'altro. Ovviamente dovrà essere inserito in tutte le pagine in cui vogliamo visualizzare le breadcrumb. L'esempio si compone di 4 file:
- esempio.html
- pagina1.html
- pagina2.html
- path.js
- stile.css
Per una più semplice comprensione del presente script facciamo riferimento a questi file (che alleghiamo all'articolo), verificando le procedure e i dati espressi. Solo in questo modo, con un continuo confronto, si possono capire le peculiarità di questo JavaScript.
Il nostro script dovrà essere richiamato da ogni pagina, per questo è stato inserito in un file .js esterno. Per richiamarlo nelle pagine utilizziamo questa sintassi (da usare nel tag <head>):
<script language="javascript" src="path.js" type="text/javascript"></script>in cui path.js è il nome del file esterno.
Allo stesso modo le regole CSS dovranno essere comuni a tutte le pagine per questo abbiamo creato il file stile.css che richiamiamo sempre nella sezione <head>:
<link rel="stylesheet" type="text/css" href="stile.css">Per inserire le nostre briciole di pane, sfruttiamo una funzione JavaScript (breadcrumbs()):
function breadcrumbs (home_url, first_separator, separator, steps) {
bc = '<a href="'+home_url+'" class="breadcrumbs" title="home">HOME</a>';
if(steps.length){
bc += ' '+first_separator+' ';
for(i=0;i<steps.length-1;i++){
bc += '<a class="breadcrumbs" href = "'+steps[i].url+'">';
bc += steps[i].text;
bc += '</a>';
bc += ' '+separator+' ';
}
bc += '<span class="breadcrumbs">'+steps[i].text+'</span>'
}
document.write(bc);
}Vediamo i parametri da personalizzare:
| Campo | Descrizione |
|---|---|
home_url |
L'URL della home del nostro sito |
first_separator |
i separatori tra la parola "Home" e le altre directory. Utilizzando ">>" avremo "Home >> directory" |
separator |
il carattere separatore tra le singole directory. Utilizzando ">" avremo "directory > directory2 > directory3" |
steps |
è un array di oggetti che definiscono tutti i passi seguiti nella navigazione. In ogni oggetto definiamo due proprietà:
url, l'indirizzo della pagina;text, il nome della pagina.
|
Per comodità inseriamo direttamente la chiamata alla funzione nel body delle pagine. Sarà particolarmente interessante esaminare le breadcrums inserite nel file pagina2.html
<script type="text/javascript" language="javascript">
<!-- //
breadcrumbs('esempio.html','>>','>',[
{ url:'pagina1.html', text:'Pagina 1' },
{ url:'pagina2.html', text:'Pagina 2' }
]);
// -->
</script>Per completezza esaminiamo rapidamente anche il contenuto del file css:
.breadcrumbs {
font: 11px/1em sans-serif;
color:#000;
text-decoration:none;
}
a.breadcrumbs:hover {
color:#006699;
text-decoration: underline;
}
a.breadcrumbs:active {
color:#000;
text-decoration: underline;
}La classe breadcrumbs determina l'aspetto grafico dei link. Possiamo naturalmente personalizzare le regole a piacere.
