Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Menu ad albero

Link copiato negli appunti

Lo script che presentiamo crea un menù ad albero espandibile. La directory principale può essere associata ad un'immagine specifica; lo stesso per quanto riguarda le sottodirectory.
Il codice è semplicissimo da configurare e non richiede particolari modifiche. Tra le opzioni disponibili vi è la possibilità di "memorizzare" lo stato del menù (aperto o chiuso) anche dopo aver ricaricato la pagina.
Lo script è perfettamente compatibile con Explorer 5.x e Netscape 6.x; con Navigator 4.x invece il menù verrà mostrato nello stato espanso senza possibilità di poterlo chiudere.

  • esempio.htm
  • cartella IMG

Per una più semplice comprensione del presente script fai continuamente riferimento ai file sopracitati, verificando le procedure e i dati espressi. Solo in questo modo, con un continuo confronto, comprenderai le peculiarità di questo Javascript.

Inseriamo i fogli di stile tra i tag <head> della pagina

<style>
<!--
#foldheader{cursor:pointer;cursor:hand ; font-weight:bold ;
list-style-image:url(img/fold.gif)}
#foldinglist{list-style-image:url(img/list.gif)}
//-->
</style>

Nel caso venisse cambiata la posizione delle immagini sarà necessario, ovviamente, modificare il percorso nei CSS
Sempre tra i tag <head>, subito dopo i CSS, inseriamo questo codice:

<script language="JavaScript1.2">
<!--
var head="display:''"
img1=new Image()
img1.src="img/fold.gif"
img2=new Image()
img2.src="img/open.gif"
var ns6=document.getElementById&&!document.all
var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1
function checkcontained(e){
var iscontained=0
cur=ns6? e.target : event.srcElement
i=0
if (cur.id=="foldheader")
iscontained=1
else
while (ns6&&cur.parentNode||(ie4&&cur.parentElement)){
if (cur.id=="foldheader"||cur.id=="foldinglist"){
iscontained=(cur.id=="foldheader")? 1 : 0
break
}
cur=ns6? cur.parentNode : cur.parentElement
}
if (iscontained){
var foldercontent=ns6? cur.nextSibling.nextSibling : cur.all.tags("UL")[0]
if (foldercontent.style.display=="none"){
foldercontent.style.display=""
cur.style.listStyleImage="url(img/open.gif)"
}
else{
foldercontent.style.display="none"
cur.style.listStyleImage="url(img/fold.gif)"
}
}
}
if (ie4||ns6)
document.onclick=checkcontained
//-->
</script>

Se non avete modificato il percorso delle immagini non dovrete modificare nulla. In caso contrario dovrete personalizzare tutte le righe in cui sono contenuti i riferimenti alle gif:

img1.src="img/fold.gif"
img2.src="img/open.gif"
"url(img/open.gif)"
"url(img/fold.gif)"

A questo punto, nel punto della pagina in cui vorremo far comparire il menù, imposteremo il codice questo codice HTML:

<ul>
<li id="foldheader">DIRECTORY MADRE</li>
<ul id="foldinglist" style="display:none" style=&{head};>
<li><a href="#">Directory figlia</a></li>
</ul>
</ul>

La spiegazione del codice è molto semplice.
Per una migliore formattazione il menù deve essere racchiuso tra i tag <ul>...</ul>

<li id="foldheader">DIRECTORY MADRE</li>

con questa riga impostiamo la prima "directory madre". è importante non cambiare il nome ID del tag <li> ("foldheader")

<ul id="foldinglist" style="display:none" style=&{head};>

subito dopo la riga della directory madre inseriamo questo codice che non necessita di modifiche

<li><a href="#">Directory figlia</a></li>

adesso è possibile inserire infinite directory figlie. per fare ciò basterà scrivere un qualsiasi testo con link purchè compreso tra i tag <li>...</li>

</ul></ul>

ricordiamoci di chiudere i due tag <ul> aperti in precedenza,

È possibile anche inserire delle "directory madre" in altre "directory madre" con relativi link. ecco un esempio di menù leggermente più complesso:

<ul>
<li id="foldheader">DIRECTORY MADRE</li>
<ul id="foldinglist" style="display:none" style=&{head};>
<li><a href="#">Directory figlia</a></li>
<li><a href="#">Directory figlia</a></li>
<li><a href="#">Directory figlia</a></li>
<li id="foldheader">ALTRA DIRECTORY</li>
<ul id="foldinglist" style="display:none" style=&{head};>
<li><a href="#">Directory figlia 1</a></li>
<li><a href="#">Directory figlia 2</a></li>
</ul>
</ul>
</ul>

Se adesso ricaricassimo la pagina, dopo aver espanso il menù, questo verrebbe mostrato nuovamente chiuso.
Se desideriamo conservare lo "status" del menù una volta eseguito un refresh o un nuovo accesso, basterà inserire questo codice subito dopo il codice HTML appena analizzato:

<script language="JavaScript1.2">
<!--
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length> 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
var foldercontentarray=new Array()
var c=0
if (ns6){
for (i=0;i<document.getElementsByTagName("UL").length;i++){
if (document.getElementsByTagName("UL")[i].id=="foldinglist"){
foldercontentarray[c]=document.getElementsByTagName("UL")[i]
c++
}
}
}
if (get_cookie(window.location.pathname) != ''){
var openresults=get_cookie(window.location.pathname).split(" ")
for (i=0 ; i < openresults.length ; i++){
if (ns6){
foldercontentarray[openresults[i]].style.display=''

foldercontentarray[openresults[i]].previousSibling.previousSibling.style.listStyleImage="url(img/open.gif)"
}
else{
foldinglist[openresults[i]].style.display=''
document.all[foldinglist[openresults[i]].sourceIndex -
1].style.listStyleImage="url(img/open.gif)"
}
}
}
if (ns6||ie4){
var nodelength=ns6? c-1 : foldinglist.length-1
var nodes=new Array(nodelength)
var openones=''
}
function checkit(){
for (i=0 ; i <= nodelength ; i++){
if
((ns6&&foldercontentarray[i].style.display=='')||(ie4&&foldinglist[i].style.display==''))
openones=openones + " " + i
}
document.cookie=window.location.pathname+"="+openones
}
if (ns6||ie4)
window.onunload=checkit
//-->
</script>

Il codice serve a impostare un cookie sul pc dell'utente e ricordare, in questo modo, l'ultimo status del menù (espanso o chiuso) una volta ricaricata la pagina.
Quest'ultimo script non richiede modifiche tranne nel caso in cui abbiate cambiato percorso alle immagini.


Ti consigliamo anche