Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Breadcrumbs in JavaScript, il percorso nelle pagine

Link copiato negli appunti

È 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.


Ti consigliamo anche