Barra di navigazione in una finestra

Arretrati lista "Una demo Dhtml a settimana"
di Risorse.net

CONOSCENZE CONSIGLIATE PER QUESTO ARTICOLO: Html, Javascript

COMPATIBILITÀ: Ms Ie, Netscape
FILES ESTERNI: js032a.html, js032b.html, js032c.html, js032d.html, js032e.html
Visualizza l'esempio
Scarica la demo

Dynamic Html ha la grande capacità di lavorare tra le finestre che vengono aperte al caricamento della pagina. In questa demo vedremo come realizzare una barra di navigazione contenuta in una piccola finestra pop i cui comandi ci permettono di cambiare i documenti caricati nella finestra principale. Il file principale, demo.htm, carica due differenti frames, uno superiore (js032e.html) ed uno centrale che visualizzerà i documenti richiamati dal menù della finestra pop up. Nella pagina js032e.html (il frame superiore) è contenuto il codice per aprire la pop up window:

<script language="JavaScript">
// apre la finestra remota e la posiziona
nb=open("js032d.html","js023d","height=130,width=50")
nb.moveTo(20,270)
// carica le pagine con un timeout per permettere all'utente di accorgersene
setTimeout("parent.f1.location.href='js032b.html'",1500)
setTimeout("parent.f1.location.href='js032c.html'",3000)
</script>

Le righe:

setTimeout("parent.f1.location.href='js032b.html'",1500)
setTimeout("parent.f1.location.href='js032c.html'",3000)

caricano, nel caso in cui la pagina fosse stata appena aperta, i documenti centrali con un certo ritardo (esattamente 1,5 e 3 secondi) in modo tale da permettere all'utente di accorgersene dell'avvenuto reload.

Iniziamo adesso ad analizzare la sintassi per realizzare il telecomando di navigazione (js032d.html):

<script language="JavaScript">
// imposta le locazioni per ogni tasto
function home() {
opener.parent.f1.location.href="js032a.html"
}
function avan() {
opener.parent.f1.history.go(+1)
}
function indi() {
opener.parent.f1.history.go(-1)
}
</script>

Le funzioni home, avan e indi vengono richiamati successivamente nei links per portarsi alla pagina principale oppure navigare avanti ed indietro tra i documenti.
Nel body della finestra pop up, va inserito il codice per realizzare i comuni collegamenti ipertestuali:

<a href="#" onClick="home()">HOME</a><br>
<br>
<a href="#" onClick="avan()">AVANTI</a><br>
<br>
<a href="#" onClick="indi()">INDIETRO</a>


© Risorse.net (www.risorse.net)
pagina in versione stampabile:
http://www.risorse.net /dhtml/teoria/2000/maggio/40.asp?print=ok