Risorse per webmaster

L A   C O M U N I T À   V I R T U A L E   I T A L I A N A   P E R   W E B   M A S T E R S

 
 
      Tecnologie
      HTML
      CSS
      DHTML
      FLASH
      ASP
      PHP
      JSP
      PERL
      XML
      SMIL
      WIRELESS
      PALMARI
      APACHE
      MYSQL
      PICOSQL
 
      Grafica
 
      Servizi
 
      Raccolte
 
      Recensioni
 
      Analisi
 
      Disclaimer

   Per tutti
 
  .: Magazine
  .: Editor
  .: Appunti
  .: Gratis
  .: Scripts
  .: Components
 
   Home page

Partner
Comunicati stampa
Proposte di viaggio
Prenotazione hotel
Prenota vacanze
Accessori palmari
Cerca alberghi
Guide turistiche

versione stampabile Mostra una versione adatta per la stampa  

Livello di difficoltà:Livello di difficoltà: medio  
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>
 

 
 
Home > dhtml > teoria > 2000 > maggio > ...   © 1999-2017 Risorse.net, tutti i diritti riservati