Livello di difficoltà: |
|
Dynamic Html è una tecnologia approvata dal W3C per la creazione di siti Web dinamici ed interazioni client side con l'utente. In questa sezione sono disponibili centinaia di esempi ed arretrati della mailing list "Una demo Dhtml a settimana".
|
| |
Barra di navigazione in una finestra
Arretrati lista "Una demo Dhtml a settimana"
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>
|
