Precedentemente abbiamo spiegato come impostare un menu di link a discesa in Javascript. Senza tornare nuovamente sull'argomento, ci preme in questa sede sottolineare che per "menu da form" intendiamo quelli creati sfruttando le potenzialità di Javascript di concerto con le proprietà dei form.
Un problema che l'uso di questi strumenti di indicizzazione puo' incontrare è nella presenza di frame. Ci riferiamo al caso concreto di un menu da form presente in un documento diviso in due frame, uno superiore e uno centrale, come la figura che segue:
Dove il menu è posto nel frame "A", ma deve caricare i link nel frame "B".
Senza l'uso di una corretta sintassi cio' che si ottiene è un errore nello script o nel migliore dei casi un caricamento del documento nel frame superiore.
Questo esempio è volto a dimostrare come risolvere il problema, facendo in modo che i link lanciati dal menu del frame superiore "A", vengano caricati in quello centrale "B".
Come detto, HTML consente di caricare un solo frame per volta. Questa peculiarità rende necessario fare riferimento a Javascript per ottenere un tale risultato. Vediamo, nel particolare, il funzionamento di questo script.
L'esempio si compone di 5 file:
- esempio.htm
- alto.htm
- centrale.htm
- pagina01.htm
- pagina02.htm
Per una più semplice comprensione del presente script fai continuamente riferimento ai file sopracitati, verificando le procedure e i dati espressi. Solo in questo modo, con un continuo confronto, comprenderai le peculiarità di questo Javascript.
Il file da visualizzare con il tuo browser è "esempio.htm"
Questo è il file principale dell'esempio, quello che regge la struttura a frame del documento. Questo il codice:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head><title>dimostrazione pratica</title>
</head>
<body>
<frameset rows="30,*" frameborder="0" framespacing="0" border="0">
<frame me name="alto" src="alto.htm" scrolling=no marginheight=2 marginwidth=2>
<frame me name="centrale" src="centrale.htm">
</frameset>
</html>
Si tratta di normale codice HTML per la creazione di un documento diviso in frame. Particolare attenzione va posta ai nomi assegnati ai frame, cioè:
name="alto"
Per il frame superiore e
name="centrale"
per quello inferiore.
Per il resto nulla va modificato, se non le dimensioni e le proprietà dei frame.
alto.htm
Il file "alto.htm" è il file che ospita il menu di link e sul quale si agisce perchè lo script produca i suoi effetti. Nel nostro esempio pratico si tratta del frame con sfondo nero posto nella parte superiore dello schermo.
Per creare il menu, e fare in modo che questo carichi i link nel frame inferiore, è necessario agire congiuntamente su due parti distinte del codice. Innanzitutto va inserito il seguente codice tra i tag <head>:
<script language="javascript">
<!--
function buildArray() {
var a = buildArray.arguments;
for (i=0; i<a.length; i++) {
this[i] = a[i];
}
this.length = a.length;
}
var urls1 = new buildArray("",
"",
"pagina01.htm",
"pagina02.htm",
"",
"https://www.html.it/java/index.html",
"https://www.html.it/dynamic/index.html",
"https://www.html.it/xml/index.html",
"https://www.html.it/asp/index.html",
"https://www.html.it/jscript/index.html")
function go(which, num, win) {
n = which.selectedIndex;
if (n != 0) {
var url = eval("urls" + num + "[n]")
if (win) {
//openWindow(url);
}
else if (url){
parent.centrale.location.href = url;
}
}
}
// -->
</script>
I link vanno sostituiti a quelli inseriti nell'esempio a titolo puramente esemplificativo. I due unici link raggiungibili off-line sono "pagina01.htm" e "pagina02.htm", mentre tutti gli altri rimandano a sezioni specifiche di HTML.it.
Cio' che a noi interessa è soprattutto la riga di codice:
parent.centrale.location.href = url;
Laddove per "centrale" si intende il nome che abbiamo precedentemente assegnato al frame. Quindi, se chiami diversamente il frame dovrai modificare anche questa riga di codice.
Fatto questo non ci rimane che inserire all'interno dei campi <body> il codice che richiama le funzioni impostate in precedenza:
<form name="form1">
<select name="menu1" size="1" onchange="go(this, 1, false)">
<option>Scegli:
<option>
<option>Pagina 01
<option>Pagina 02
<option>
<option>Applet Java
<option>Dynamic HTML
<option>XML
<option>ASP
<option>Javascript
</select>
</form>
Gli altri file non hanno bisogno di alcuna modifica in quanto inseriti a titolo dimostrativo.
