Un ottimo strumento per la creazione di menu e di liste di link è la casella a discesa, detta anche menu a tendina oppure Jump menu, gli amanti del Visual Basic la conosceranno come Combo box, io amo chiamarla select box, nome simile al Tag Html che la genera, il <select>.
Un simile strumento di navigazione torna utile per organizzare professionalmente un elenco di pagine da visitare, o comunque il suo utilizzo, in qualità di menu, può variare a seconda delle esigenze dello sviluppatore, ma soprattutto comporta un notevole guadagno di spazio sulla pagina.
In genere si crea lo script per il funzionamento dell'elemento Html statico, e si utilizzano gli appositi Tag per creare fisicamente la casella, in questa sede lavoreremo sia in questo modo, sia creando un unico script che inglobi in se anche i Tag Html.
Creazione della casella di tipo select box
Scegliamo un angolino della pagina in cui includere la casella descritta in precedenza ed inseriamo il codice Html per la sua creazione:
<select onChange="Menu(this)">
<optionvalue="javascript:void(0)">Jump to...</option>
<option value="pagina1.htm">Pagina 1</option>
<option value="pagina2.htm">Pagina 2</option>
<option value="pagina3.htm">Pagina 3</option>
<option value="pagina4.htm">Pagina 4</option>
<option value="pagina5.htm">Pagina 5</option>
<select>
L
a prima cosa che possiamo notare è la funzione nell'evento onChange che abbiamo chiamato Menu() "passandole" il parametro this tra le parentesi tonde, all'interno del Tag <select>, questo per permettere all'utente di utilizzare il menu facendo partire il collegamento alla pagina di destinazione semplicemente selezionando una voce dalla lista.
Il valore dell'opzione (all'interno del Tag <option>) è l'URL di destinazione della pagina desiderata, all'occorrenza è possibile utilizzare l'indirizzo completo di un sito, ad esempio: <option value="http://www.lukeonweb.net">lukeonweb.net</option>
Seconda cosa a cui si può far caso è il valore assegnato all'opzione che funge da titolo del menu, la voce Jump to... a cui abbiamo assegnato il particolare riferimento javascript:void(0) per bloccare il link, che ha la stessa funzione del carattere speciale cancelletto (#) dell'Html, con la differenza che il cancelletto verrebbe accodato all'URL della pagina, mentre il riferimento in JavaScript blocca il link senza accorare nulla all'URL della pagina.
Creazione dello script
Lo script è molto semplice, all'interno della funzione Menu() passiamo un parametro (una variabile), ad esempio links, utilizziamo la funzione location.href per generare il collegamento ipertestuale ed andiamo a cui assegniamo il valore della casella selezionata, ovvero l'URL di destinazione, ecco il codice:
<script type="text/javascript">
<--
function Menu(links) {
location.href = links[links.selectedIndex].value;
}
//-->
</script>
È sufficiente utilizzare i due codici proposti all'interno di una stessa pagina Web, ed il gioco è fatto!
Per aprire il file di destinazione in una nuova finestra è sufficiente modificare lo script sostituendo alla funzione location.href la funzione window.open():
window.open(links[links.selectedIndex].value);
Globalizzazione dello script
Passiamo ad esaminare il caso in cui vogliamo implementare il codice Html all'interno dello script, la vita si complica un pochino in questo modo, ma è bene affrontare questo aspetto sia a scopo prettamente didattico, sia perchè questa soluzione comporta un minor dispendio di tempo e di risorse, per praticità ci serviremo di un file esterno JavaScript, ad esempio selectbox.js e lo richiameremo sul punto della pagina in cui il menu deve comparire, utilizzeremo questo codice per far riferimento al file esterno:
<script type="text/javascript" src="selectbox.js"></script>
Nell'esempio si suppone che sia il file JavaScript che il file Html che lo richiama si trovano nella stessa posizione, ovvero nella stessa cartella, lo script inizierà con la funzione Menu() che abbiamo visto in precedenza, ma che per chiarezza riporto anche qui:
function Menu(links) {
location.href = links[links.selectedIndex].value;
}
Trattandosi di codice incluso in un file JavaScript non v'è necessità di includere i Tag <script> e </script>, altrimenti ci verrà segnalato un errore da parte dell'interprete JavaScript del nostro browser.
Creiamo ora un Array() che chiamiamo voci: questa tabella di dati ci serve per le voci del select box che compaiono come testo del link all'interno della casella:
var voci = new Array();
voci[0] = "Pagina 1";
voci[1] = "Pagina 2";
voci[2] = "Pagina 3";
voci[3] = "Pagina 4";
voci[4] = "Pagina 5";
Lavoriamo allo stesso modo con un altro Array() che ci serve per gestire la proprietà value delle voci appena generate nel precedente Array(), ovvero i link alle pagine, e lo chiameremo proprio link:
var link = new Array();
link[0] = "pagina1.htm";
link[1] = "pagina2.htm";
link[2] = "pagina3.htm";
link[3] = "pagina4.htm";
link[4] = "pagina5.htm";
Come già annunciato, ci occuperemo ora di mettere a video la select box, con l'utilizzo del document.write(), inserendolo in un ciclo for() per "srotolare" i valori memorizzati all'interno degli Array():
document.write("<select onChange=Menu(this)>");
document.write("<option value=javascript:void(0)>Jump to...</option>");
for(i=0; i<5; i++) {
document.write("<option value=" + link[i] + ">" + voci[i] + "</option>");
}
document.write("</select>");
Da notare che abbiamo "ciclato" solo la parte contenente le option che richiama gli Array(), mentre abbiamo lasciato in forma "statica" l'apertura della selectbox, a cui associamo l'evento onChange che fa riferimento alla funzione Menu(), il titolo del menu Jump to..., ed in fine la chiusura della select box, al fine di ottenere una dinamizzazione solo sulle voci interessate, ciclando i riferimenti degli Array(), ovvero link[i] e voci[i].
Guardiamo ora il codice nel suo insieme incluso di opportuni commenti e pronto per un copia e incolla e per essere immediatamente utilizzato per i vostri menu!
function Menu(links) {
//Crea un link all'indice della select selezionato
location.href = links[links.selectedIndex].value;
}
//Crea la tabella di dati contenente le voci delle possibili opzioni
var voci = new Array();
voci[0] = "Pagina 1";
voci[1] = "Pagina 2";
voci[2] = "Pagina 3";
voci[3] = "Pagina 4";
voci[4] = "Pagina 5";
//Crea la tabella di dati contenente i link alle rispettive voci delle opzioni
var link = new Array();
link[0] = "pagina1.htm";
link[1] = "pagina2.htm";
link[2] = "pagina3.htm";
link[3] = "pagina4.htm";
link[4] = "pagina5.htm";
//Crea la struttura Html della select
document.write("<select onChange=Menu(this)>");
document.write("<option value=javascript:void(0)>Jump to...</option>");
//Esegue un ciclo ed estende tutte le voci del menu
for(i=0; i<5; i++) {
document.write("<option value=" + link[i] + ">" + voci[i] + "</option>");
}
document.write("</select>");
È a questo punto possibile includere questo script nel file selectbox.js ed includerlo nella pagina nel punto prescelto, et voilà!
Variazione sul tema
In programmazione non esiste mai una sola strada per arrivare alla stessa conclusione, possiamo fare "giri" più o meno lunghi per arrivare allo stesso risultato, nel caso specifico l'obbiettivo è sempre quello di realizzare un menu a tendina, in questo caso non più all'evento onChange sulla casella stessa, ma al click su un bottone dopo aver selezionato l'opzione desiderata.
Utiliziamo l'istruzione switch() per assegnare in casi diversi il link verso la pagina desiderata. Ecco il codice Html:
<form name="menu">
<select name="links">
<option>Pagina 1</option>
<option>Pagina 2</option>
<option>Pagina 3</option>
<option>Pagina 4</option>
<option>Pagina 5</option>
</select>
<input type="button" value="Cambia pagina" onClick="CambiaPagina()">
</form>
in funzione del quale utilizzeremo il seguente script per realizzare la funzione descritta in precedenza:
<script type="text/javascript">
<--
function CambiaPagina() {
var cambia = document.menu.links.selectedIndex;
switch(cambia) {
case 0: location.href = "pagina1.htm"; break;
case 1: location.href = "pagina2.htm"; break;
case 2: location.href = "pagina3.htm"; break;
case 3: location.href = "pagina4.htm"; break;
case 4: location.href = "pagina5.htm"; break;
}
}
//-->
</script>
Per ogni opzione utilizziamo il parametro case a cui associamo il link ed interrompiamo la funzione con break.
