In questo esempio potremo esaminare alcune caratteristiche del posizionamento dinamico per MSIE 5+ e Netscape Navigator 4, o una versione dello stesso che supporti la collection document.layers.
Uno dei tipici effetti usato in molti siti è quello del tipico menu a tendina, caratterizzato dal fatto che cliccando su ogni menu appaiono una serie di collegamenti. In questo caso, esamineremo dei menu che si dispongono orizzontalmente sullo schermo.
Per comprendere il codice in modo semplice, è possibile dividerlo in 3 parti:
La struttura del documento:
Notiamo nel corpo del documento 5 strutture uguali, ognuna delle quali
rappresenta un menu.
In ognuna di esse è presente un riferimento allo stile. Partendo da
quella più esterna, segnata in verde, il tag DIV rappresenta una
divisione all'interno del documento.
La prima si chiamerà LMENU1, la seconda LMENU2, la terza LMENU3, la quarta
LMENU4 e così via.
Poiché lo stile è uguale per le 5 strutture, viene ad esse assegnata la stessa
classe, CMENU.
Attenzione: se per MSIE questo rimane un elemento DIV identificato dall'ID LMENUn,
per Netscape Navigator questo diventa un oggetto layer (infatti esso ha una
posizione assoluta, specificata all'interno della classe CLMENU, che specifica
anche la larghezza con la proprietà width e l'altezza, con la proprietà height).
In ogni struttura LMENUn sono contenuti 2 elementi.
Il primo è un link, con un'ulteriore classe di stile segnata in blu, AMENU.
Cliccando su esso appariranno i collegamenti, che non puntano ad un documento
vero e proprio nell'esempio, e si
chiuderanno quelli già aperti.
Il secondo è un altro tag DIV, MENU1 per LMENU1, MENU2 per LMENU2, MENU3 per
LMENU3, il cui stile è dato dalla classe CMENU, segnata in rosa.
Anche in questo caso esso rappresenta per Netscape un layer, annidato al layer
superiore.
Questo vuol dire che ogni layer LMENUn conterrà a sua volta un layer
MENUn.
In questo elemento sono contenuti i collegamenti che saranno mostrati o
nascosti, secondo il loro stato.
<BODY bgcolor="darkblue" text="white" alink="white" link="white" vlink="white" onLoad="checkBrowser();gestisciLayout(5)"> <div ID=LMENU1 CLASS=CLMENU> <A HREF="Javascript:gestisciMenu(1,5);" CLASS="AMENU">PROVA_MENU1</A> <div ID=MENU1 CLASS="CMENU"> <A HREF="">- link 11</A> <BR> <A HREF="">- link 12</A><br> </div> </div> <div ID="LMENU2" CLASS="CLMENU"> <A HREF="Javascript:gestisciMenu(2,5);" CLASS="AMENU">PROVA_MENU2</A> <div ID="MENU2" CLASS="CMENU" > <A HREF="">- link 21</A><br> <A HREF="">- link 22</A> </div> </div> <div ID="LMENU3" CLASS="CLMENU"> <A HREF="Javascript:gestisciMenu(3,5);" CLASS="AMENU">PROVA_MENU3</A> <div ID="MENU3" CLASS="CMENU" > <A HREF="">- link 31</A><br> <A HREF="">- link 32</A> </div> </div> [....] </BODY> |
Lo stile del documento:
La classe CLMENU rappresenta un tag <DIV> con larghezza 120 px, altezza 200 px, posizione assoluta, distanza 10 e 5 rispettivamente per la posizione verticale e orizzontale dall'angolo in alto a sinistra dello schermo.
La classe AMENU rappresenta un tag <A> con lo stesso colore del testo di questa pagina, con font Verdana e sempre maiuscolo. MSIE consente anche di specificare da stile cosa accade quando il mouse si trova sopra al link: in questo caso cambia il colore, che diventa rosso.
La classe CMENU rappresenta un tag <DIV> con posizione relativa agli altri elementi nella pagina, distante dall'angolo in alto a sinistra dell'elemento che lo contiene 15 px.
<style> DIV.CLMENU{width:120; height:200;POSITION: ABSOLUTE; TOP:10; LEFT:5;} A.AMENU{COLOR: #FFFFCC; TEXT-DECORATION:NONE; FONT-FAMILY:VERDANA;FONT-SIZE:20 TEXT-TRANSFORM:UPPERCASE} A.AMENU:HOVER{COLOR: RED;} DIV.CMENU{LEFT:15;POSITION: RELATIVE;} BODY{BACKGROUND-COLOR:#000066} A:HOVER{COLOR: #FFFFCC} </style> |
Lo script:
Lo script è contenuto nel tag <HEAD> del body. I commenti descrivono le funzioni dello script.
<SCRIPT Language="Javascript"> <!--// /* Dichiaro 2 variabili globali, n e ie, per controllare se il browser utilizzato dall'utente è MSIE 4 o versione superiore oppure Netscape Navigator 4 o versione superiore. Se così non fosse, il browser potrebbe non visualizzare correttamente lo script: questa eventualità sarà quindi segnalata tramite un alert all'utente utilizzando la funzione checkBrowser() */ var n; var ie; n=(document.layers && parseInt(navigator.appVersion)>=4)?1:0; ie=(document.all && parseInt(navigator.appVersion)>=4)?1:0; function checkBrowser() { if (!(n) && !(ie)) // avvertimento per gli utenti con browser non compatibili con lo script alert("Nella pagina vi sono script non compatibili con i vecchi browser, testati per MSIE e Netscape Navigator"); } function gestisciMenu(subMenu,ultimoLivello) // subMenu deve rappresentare il numero del menu a partire da 1 a partire da sinistra sullo schermo // ultimoLivello deve rappresentare il numero di menu presenti sullo schermo. { if(navigator.appVersion.indexOf("MSIE")>0) // per MSIE { // se i link del menu sono visibili, saranno resi invisibili (visibility='hidden') if (eval("document.all['MENU" + subMenu + "'].style.visibility=='visible'")) { eval("document.all['MENU" + subMenu + "'].style.visibility='hidden'"); } else // altrimenti, il menu sarà reso visibile (visibility='visible') e gli altri saranno resi invisibili { eval("document.all['MENU" + subMenu + "'].style.visibility='visible'"); for(i=1;i<=ultimoLivello;i++) { if(i!=subMenu) eval("document.all['MENU" + i + "'].style.visibility='hidden'"); } } } else // per Netscape Navigator { // se i link del menu sono visibili, saranno resi invisibili (visibility='hide') if (eval("document.LMENU" +subMenu + ".document.MENU" + subMenu + ".visibility=='show'")) { eval(eval("document.LMENU" +subMenu + ".document.MENU" + subMenu + ".visibility='hide'")); } else // altrimenti, il menu sarà reso visibile (visibility='show') e gli altri saranno resi invisibili { eval("document.LMENU" +subMenu + ".document.MENU" + subMenu + ".visibility='show'"); for(i=1;i<=ultimoLivello;i++) { if(i!=subMenu) eval("document.LMENU" +i + ".document.MENU" + i+ ".visibility='hide'"); } } } } /* Al caricamento della pagina sposto il livello principale di ogni menu in modo che si disponga orizzontalmente, ognuno ad uguale distanza dall'altro. Per richiamare in modo attraverso un ciclo i menu considerati, essi sono stati chiamati allo stesso modo e con una cifra alla fine del nome, in modo da avere MENU1, MENU2, MENU3 e così via, ogni volta che si vuole aggiungere un nuovo menu alla pagina. */ function gestisciLayout(ultimoLivello) { if (ie) // per MSIE { /* Il primo menu rimane nella posizione di partenza. Il secondo si sposterà della larghezza (clientWidth) del primo + 5 px (lefPos), il terzo della larghezza del primo + 5px, + quella del secondo + 5 px. Va notato che i 3 menu hanno dimensioni uguali. */ lefPos=5; incremento=document.all['LMENU1'].clientWidth + lefPos; posizione=incremento; for(i=1; i<=ultimoLivello; i++) { if(i>1) { eval("document.all['LMENU" + i + "'].style.left=" +posizione); posizione+=incremento; } // i link contenuti in ogni menu saranno resi invisibili al caricamento. eval("document.all['MENU" + i + "'].style.visibility='hidden'"); } } else // per Netscape Navigator { /* Il primo layer rimane nella posizione di partenza. Il secondo si sposterà della larghezza (document.LMENU1.document.width) del primo + 25 px (lefPos), il terzo della larghezza del primo + 25px, + quella del secondo + 25 px. Va notato che i 3 menu hanno dimensioni uguale. */ lefPos=20; incremento=document.LMENU1.document.width + lefPos; posizione=incremento; for(i=1; i<=ultimoLivello;i++) { if(i>1) { eval("document.LMENU" + i + ".moveTo(" +posizione + ",10)"); posizione+=incremento; } // i link contenuti in ogni menu saranno resi invisibili al caricamento. eval("document.LMENU" + i + ".document.MENU"+i+".visibility='hidden'"); } } } // --> </SCRIPT> |
Bisogna riconoscere che, sebbene il posizionamento dinamico permetta effetti di rendering che non sono possibili con il solo HTML, esso non è esente da problemi.
Prendendo in considerazione l'esempio, esso è facilmente applicabile e si
possono gestire quanti menu si vogliono, avendo l'accortezza di copiare le
strutture presentate e nominandole con una numerazione progressiva.
Ad esempio, se occorresse gestire soltanto 4 menu si dovrebbe scrivere:
<div ID="LMENU4"
CLASS="CLMENU">
<A HREF="Javascript:gestisciMenu(4,4);" CLASS="AMENU">PROVA_MENU3</A>
<div ID="MENU4" CLASS="CMENU" >
<A HREF="">- link 41</A><br>
<A HREF="">- link 42</A>
</div>
</div>
facendo attenzione a riportare in tutti i parametri della
funzione gestisciMenu(numeroDelMenu,numeroTotaleDeiMenu) il numero effettivo del menu considerato ed il numero totale dei menu
presenti nel documento.
Così, anche la funzione gestisciLayout(ultimoLivello)
dovrebbe essere richiamata all'onLoad del body sostituendo 4
ad ultimoLivello.