Lo script che presentiamo combina due classiche realizzazioni Javascript. Da una parte un menu di navigazione basato su un elemento select (menu a tendina). Dall'altra la creazione di una struttura dinamica basata sul modello categoria/sottocategoria. Quest'ultima è in genere implementata utilizzando due elementi select: selezionando un'opzione del primo, si aggiornano di conseguenza quelle del secondo. La particolarità di questo script è quella di presentare il tutto con un unica select. L'esecuzione del semplice esempio allegato chiarirà ogni dubbio sul funzionamento.
Lo script si compone di una sezione JavaScript incorporata nella pagina Web.
- esempio.htm
## 1: LA SEZIONE JAVASCRIPT
L'esempio inizia con la creazione di un form denominato 'dynamiccombo', all'interno del quale inseriamo una select ('stage2'). Ad essa è associato l'evento onChange: al cambiamento dell'opzione viene eseguita la principale funzione dello script ('displaysub'), quella che consente la visualizzazione del sottomenu per ciascuna delle categorie principali. Il pulsante di invio, carica nel browser l'URL corrispondente ad ogni voce.
La sezione Javascript (commentata nell'esempio nei punti essenziali) contiene il codice necessario all'esecuzione dell'esempio. La parte fondamentale, quella da personalizzare per adeguare lo script alle proprie necessità, è all'inizio. Tutto consiste nella creazione di una serie di array. Per prima cosa si crea l'array 'category'. Gli elementi di cui è costituito sono le categorie principali del menu: ciascuna di essa rappresenta una voce (option) dell'elemento select. Vediamolo più da vicino:
var category=new Array()
category[0]=new Option("Seleziona una categoria ", "")
category[1]=new Option("Linguaggi", "combo1")
category[2]=new Option("Servizi", "combo2")
category[3]=new Option("Guide", "combo3")
Lo script, come detto all'inizio, è molto semplice ma efficace. L'unica funzione presente, attivata dal link presente nella pagina web, controllerà lo stato di visualizzazione dell'elemento associato (style.display) e lo cambierà: se lo stato è visibile lo renderà invisibile, se lo stato è invisibile lo renderà visibile.
Il nome dell'elemento da rendere visibile o invisibile è passato allo script dall'unica variabile che accetta (id) e lo si dovrà specificare al'interno della pagina web, come vedremo più avanti.
È possibile aggiungere tutte le risorse che si desidera anche se va precisato che il browser caricherà in memoria tutti gli elementi anche prima di visualizzarli. Lo script si limita solo a renderli visibili o invisibili. Ciò significa che se volessimo utilizzare lo script per una presentazione di fotografie in un'uica pagina web, va precisato che l'utente dovrà attendere, prima di rendere operativa la pagina e i link, il caricamento di tutte le immagini, visibili e non visibili, incluse nella galleria.
Come si vede, si procede nel modo consueto di creazione di un array, con il primo elemento che ha come numero indice 0. Di ogni elemento si definiscono nell'ordine il testo da visualizzare nel menu e il nome di una variabile a cui associeremo il sottomenu. Nell'esempio abbiamo creato 3 categorie. La prima voce è il testo predefinito del menu, ed è corretto utilizzare come testo un testo che indichi all'utente l'azione che sta per compiere.
Di seguito, vengono creati tanti array quante sono le categorie. Ciascuno sarà denominato in base al nome della variabile definita in precedenza (attenzione a mantenere la corrispondenza, dunque). Ecco, a titolo di esmepio, il primo array:
var combo1=new Array()
combo1[0]=new Option("FreePHP","http://freephp.html.it")
combo1[1]=new Option("FreeASP","http://freeasp.html.it")
combo1[2]=new Option("TORNA ALLE CATEGORIE PRINCIPALI","")
Anche qui ciascun elemento dell'array corrisponde ad una voce di menu. Per ciascuna definirem, in questo caso, il testo da visualizzare e l'URL del sito (trattandosi di un menu di navigazione). L'ultima voce contiene l'istruzione per far tornare l'utente al menu delle catagorie.
Il resto del codice, che definisce le funzioni principali, può essere lasciato intatto, con una sola avvertenza. La variabile 'cacheobj' contiene un riferimento al form e alla select create in precedenza:
var cacheobj=document.dynamiccombo.stage2
Se si usano altri nomi per il form e per la select, andranno cambiati di conseguenza i riferimenti nello script. Se per esempio inserisco un form denominato 'modulo' e una select denominata 'menuDinamico', la variabile avrà questa configurazione:
var cacheobj=document.modulo.menuDinamico
