Logo JsDir.com [niente]
Bring Your Site To Life!!!
9 Maggio 2008 - 11:47:39 PM - 21 scripters on-line! - La tua posizione nel sito: StaffScripts/Script031/
BedInLecce
StaffScripts
Menu ad albero

Autore: Fabiano Data: 21/01/2001 Downloads: 6788 Voto: 4.3/5 Download P r o v a


Menu ad albero


30/04/2002 - Modificato lo script: inserendo il carattere "#" al posto del nome file HTML è ora possibile avere delle voci non cliccabili (nell'esempio la prima voce del "Menu2")

12/02/2001 - Corretto l'ultimo (speriamo!) bug. Ora l'albero funziona regolarmente anche sotto IE4 senza provocare il crash del browser.

28/01/2001 - Aggiornato lo script. È stato risolto un bug per NN4 che non chiudeva le cartelle al click sulla successiva.

      Frequento ormai da più di un anno il newsgroup it.comp.lang.javascript (ed intervengo nella parte di "uno di quelli che risponde", ma non chiamatemi GURU, ho molto da imparare ancora) e sono ormai convinto che il tipo di script richiesti cambia secondo la stagione! Da qualche giorno si moltiplicano le richieste di "menu ad albero" preferibilmente simile a quello di Esplora Risorse di Windows, nonché le richieste di far funzionare/personalizzare il menu pubblicato nel sito www.xxxxxxxx.yy.
      Non è nello stile dello Staff di JsDir metter mano al codice altrui per un'ovvia ragione di correttezza (perché non chiedere all'autore?), a meno che non si tratti di correzioni/aggiustamenti di minima entità. Per rispondere a queste richieste Fabiano ha tirato fuori in due giorni (beato lui! :-) il menu che vi presento e che potete provare, se non l'avete già visto, nella nostra homepage.

      Questa volta non posso spiegarvene il funzionamento come mio solito, lo script è molto complesso e richiederebbe una trattazione che risulterebbe indigesta ai più. Tutto quello che posso fare è spiegarvi come adattarlo e personalizzarlo.

      Il menu va inserito nella vostra pagina semplicemente includendolo con questa sintassi: <SCRIPT SRC="albmenu.js"></SCRIPT>.
       Non dovete fare altro, penserà lui ad attivarsi e funzionare appena si sarà completamente caricato.
      La porzione che potete modificare è contornata e debitamente delimitata.
      In questa sezione troverete tre blocchi di variabili che definiscono lo stile delle voci e dei links, nonché la posizione del menu all'interno della pagina. Troverete inoltre la funzione che si occupa di aprire il link cliccato dal visitatore e gli arrays delle voci del menu.
      Cominciamo dalle variabili. Quelle per il menu principale sono:
  • TopMenuLeft - Indica la distanza dal bordo sinistro del browser delle voci principali di menu
  • TopMenuHeight - Indica l'altezza del layer che contiene la voce del menu ("StaffScript" nel nostro esempio)
  • TopMenuWidth - Indica la larghezza del layer. È possibile aumentarne il valore se il testo dovesse risultare troppo lungo
  • BeginTopFont= - È il tag di apertura per specificare il font da usare per la voce di menu. Nel nostro esempio è "<FONT FACE='verdana' SIZE='-2'><B><I>"
  • EndTopFont - Chiude il font aperto con BeginTopFont. Nel nostro esempio è "</I></B></FONT>"
      Le variabili per i sottomenu sono simili, cambiano solo i nomi che invece di contenere "Top" contengono "Child", quindi avremo:
  • ChildMenuLeft
  • ChildMenuHeight
  • ChildMenuWidth
  • BeginChildFont
  • EndChildFont

      La variabile successiva è "qtopuno" ed indica la distanza del menu dal bordo superiore della pagina. La distanza è assoluta ed espressa in pixel, quindi indica quanti pixel in basso viene posto il menu rispetto alla prima riga del documento.
      Notate che il menu è fisso rispetto al documento, non alla finestra del browser, quindi se la pagina scrolla il menu si sposterà di conseguenza.
      Subito dopo troviamo la funzione che si occupa di attivare i links definiti nell'array:
   function ffff(url){
   self.location.href=url;
   }
Il valore di "url" viene preso dagli array (vedi dopo), la funzione andrà opportunamente modificata per modificare il target del link.
      Così come riportata apre il link nel documento (frame) corrente, se avessimo una pagina spezzata in più frames, e quello di navigazione avesse NAME = "show" modificheremmo la funzione in top.frames["show"].location=url;, se invece volessimo che la URL venisse aperta in una finestra indipendente del browser faremmo: window.open(url);, istruzione quest'ultima che potremmo opportunamente modificare per avere effetti particolari sulla finestra (v. tutorial Finestre).

      Segue infine l'ultima parte modificabile quella dove definiamo le voci del menu ed i relativi links.

      Il primo array è qtuno e contiene le voci del menu principale.
      Nel nostro caso è var qtuno=new Array(' StaffScripts',' UserScripts',' Tutorials',...
      Notate che in questo, come negli array successivi, le singole voci sono stringe delimitate da apici singoli, come in qualsiasi array, ma la prima lettera della voce ha uno spazio davanti, cioè abbiamo scritto: ' Tutorials' invece di 'Tutorials'.
      È una cosa scomoda, ma necessaria, senza quest spazi i testi verrebbero addossati alle icone della cartella e del logo.

      L'ultimo gruppo di array contiene le voci ed i links che verranno cliccati per raggiungere la pagina desiderata.
      Sono tanti gruppi di array quanti sono gli elementi di qtuno.
      I primi array (qve[]) sono le voci di menu (con lo spazio davanti come già detto), i secondi vbn[]) sono i links, e naturalmente non devono avere spazi altrimenti diventerebbero parte della URL.

      Prestate la massima attenzione quando riempite questi array. Accertatevi di mettere tanti links quante sono le voci del relativo menu e viceversa, e tanti gruppi di sottomenu quante sono le voci del menu principale. Un'incongruenza provocherebbe degli errori di JavaScript (elemento dell'array non trovato).
      Attenzione anche alle virgole ed agli apici che delimitano le voci ed i links. Un apice in più o in meno potrebbe provocare un errore JavaScript di tipo "stringa senza delimitazione".

      Un'ultima raccomandazione. NON cambiate la cartella "images" che contiene le icone, a meno che non siate abbastanza esperti da saper mettere le mani (dovreste pasticiare nella "zona proibita") e non abbiate comunque a disposizione tutti i browser su cui vedete in basso abbiamo verificato il funzionamento dello script. È un consiglio da amico.... ci ho provato :-(

      Detto questo vi lascio, spero che lo script trovi la vostra approvazione e mi auguro che non "dimenticherete" di lasciare i riferimenti a Jsdir ed a Fabiano rispettivamente come sito di riferimento ed autore dello script.





Per navigare correttamente il sito è necessario abilitare i cookies.
Enjoy Open Source!
ffx80bl1

    javascript
 
 
 
         Stampa
          Segnala
          Preferiti





thb1202