menu ad albero ... help!

[Starky]

Ciao!

Sto cercando di capire come posso rendere dinamico un menu ad albero trovato sul web!
Per intenderci, è un menu che ricalca l'esplora risorse di windows (con le cartelline) che quando clicco su una voce principale mi fa vedere le sottovoci!

Sembra che funzioni tutto ... solo che mi fa aprire solo la prima voce mentre le altre no!

Questo è il codice:

Prima parte contenuta nell'head 

<style type="text/css">
<!-- 
body { 
	font: .80em verdana, helvetica, sans-serif;	
}
ul { 
	list-style: disc url(doc.gif);
	margin:0;padding:0 2em;
}
li.menu { list-style: square url(cartellachiusa.gif); }
-->
</style>

<script type="text/javascript">
<!--
function mmenu(mID) {
	var menu = document.getElementById(mID);
	var display = menu.style.display;
	menu.style.display = (display == "block") ? "none" : "block";
	menu.parentNode.style.listStyleImage = (display == "block") ? "url(cartellachiusa.gif)" : "url(cartellaaperta.gif)";
}

window.onload = function() {
	var uls = document.getElementsByTagName("ul");
	for (i=0;i<uls.length;i++) {
		if(uls[i].className=="submenu")uls[i].style.display = "none";
	}
}
//-->
</script>

Seconda parte relativa all'interrogazione del database 

rs_tp_sql = "SELECT * From TIPOLOGIA_PRODOTTI ORDER BY TP_ID ASC"
Set Rs = Server.CreateObject("ADODB.Recordset")
Rs.Open rs_tp_sql, oConn, 1, 3

<table width="80%" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#DBDEA8">
<tr> 
<td class="path">

<%
do while not Rs.EOF

tp_id = Rs("TP_ID")
				
%>	
			
<ul>
<li class="menu"><%=Rs("TP_NOME")%>
<%
rs_prodotti_sql = "SELECT * From PRODOTTI WHERE PRODOTTO_TP_FK=" & tp_id
Dim rs_prodotti
set rs_prodotti = oConn.Execute(rs_prodotti_sql)
if rs_prodotti.EOF Then
Response.Write("")
else
do while not rs_prodotti.EOF
%>
						
						
<ul class="submenu" id="submenu-3">[*]<%=rs_prodotti("PRODOTTO_NOME")%>[/list]

<%
rs_prodotti.MoveNext
Loop
end if
%>[/list]

<%
Rs.MoveNext
Loop
%>
</td>
</tr>
</table>

Se qualcuno mi illuminasse sarei proprio contenta

Per i moderatori: Sinceramente credo sia un problema da postare in questa sezione ma, nel caso mi sia sbagliata, non esitate a silurare il post!

Grassie!

[morphy79]

guarda ti do un consiglio :

http://www.destroydrop.com/javascripts/tree/

è molto comodo perchè di facile personalizzazione ed in più lo puoi rendere facilmente dinamico ( prendendo le voci da database )

Dagli un occhio, perchè quello che usi tu mi sembra un po' complesso...

[Starky]

Oddio ... più facile non direi ... nn ho capito un acca!


Hai voglia di darmi una mano?

[morphy79]

dimmi tutto e non ti preoccupare...
adesso se trovo un file ti passo il mio che è semplificato..

[Starky]

grazie 1000

[morphy79]

1) Crei una cartella dove mettere tutti i file. Attenzione questi file li ho modificati io e non sono gli stessi di
quelli presenti sul sito che ti ho dato. Sono stati perfezionati. Segui i passi che ti dico e vedrai che ne veniamo a capo!






2) Crei questo file e lo chiami dtree.css

/*--------------------------------------------------|
| dTree 2.05 | www.destroydrop.com/javascript/tree/ |
|---------------------------------------------------|
| Copyright (c) 2002-2003 Geir Landrö |
|--------------------------------------------------*/

.dtree {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #313294;
white-space: nowrap;
font-weight: normal;
}
.dtree img {
border: 0px;
vertical-align: middle;
}
.dtree a {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #313294;
white-space: nowrap;
font-weight: normal;
}

/*STILE apri menu/chiudi menu*/
a.classe {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #8c2939;
white-space: nowrap;
font-weight: normal;
}
a.classe:hover {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #d97219;
white-space: nowrap;
font-weight: normal;
}

/*STILE per messaggio di eventi non trovati*/
.msgErrore{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #313294;
font-weight: normal;
}

/*STILE LINK NODI*/
.dtree a.node, .dtree a.nodeSel {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #313294;
white-space: nowrap;
font-weight: normal;
}
.dtree a.node:hover, .dtree a.nodeSel:hover {
color: #d97219;
text-decoration: underline;
}
.dtree a.nodeSel {
background-color: #c0d2ec;
}
/*STILE LINK NODI FINE*/


.dtree .clip {
overflow: hidden;
}

[morphy79]

3) Crei questo file e lo chiami dtree.js

/*--------------------------------------------------|

| dTree 2.05 | www.destroydrop.com/javascript/tree/ |

|---------------------------------------------------|

| Copyright (c) 2002-2003 Geir Landrö |

| |

| This script can be used freely as long as all |

| copyright messages are intact. |

| |

| Updated: 17.04.2003 |

|--------------------------------------------------*/


// FUNZIONE CONTROLLO AL MOMENTO DEL FOCUS PAGINA
function finestra(link) {
myname= "finestra"
NewWindow(link,myname,'480','600');
}


// FUNZIONE PER APRIRE UNA NUOVA FINESTRA CENTRATA NELLO SCHERMO

function NewWindow(mypage, myname, h, w) {
var winl = (screen.width - w) / 2;
var wint = (screen.height - h) / 2;
winprops = 'height='+h+',width='+w+',top='+wint+',left='+winl +',location=no,status=no,hotkeys=no ,scrollbars=yes,toolbar=no ,alwaysRaised=yes ,personalbar=yes';
win = window.open(mypage, myname, winprops)
if (parseInt(navigator.appVersion) >= 4) {
win.window.focus();
}
}




// Node object

function Node(id, pid, name, url, title, target, icon, iconOpen, open) {

this.id = id;

this.pid = pid;

this.name = name;

this.url = url;

this.title = title;

this.target = target;

this.icon = icon;

this.iconOpen = iconOpen;

this._io = open || false;

this._is = false;

this._ls = false;

this._hc = false;

this._ai = 0;

this._p;

};



// Tree object

function dTree(objName) {

this.config = {

target : null,

folderLinks : true,

useSelection : true,

useCookies : true,

useLines : true,

useIcons : true,

useStatusText : false,

closeSameLevel : false,

inOrder : false

}

this.icon = {

root : 'img/base.gif',

folder : 'img/folder.gif',

folderOpen : 'img/folderopen.gif',

node : 'img/page.gif',

empty : 'img/empty.gif',

line : 'img/line.gif',

join : 'img/join.gif',

joinBottom : 'img/joinbottom.gif',

plus : 'img/plus.gif',

plusBottom : 'img/plusbottom.gif',

minus : 'img/minus.gif',

minusBottom : 'img/minusbottom.gif',

nlPlus : 'img/nolines_plus.gif',

nlMinus : 'img/nolines_minus.gif'

};

this.obj = objName;

this.aNodes = [];

this.aIndent = [];

this.root = new Node(-1);

this.selectedNode = null;

this.selectedFound = false;

this.completed = false;

};



// Adds a new node to the node array

dTree.prototype.add = function(id, pid, name, url, title, target, icon, iconOpen, open) {

this.aNodes[this.aNodes.length] = new Node(id, pid, name, url, title, target, icon, iconOpen, open);

};



// Open/close all nodes

dTree.prototype.openAll = function() {

this.oAll(true);

};

dTree.prototype.closeAll = function() {

this.oAll(false);

};



// Outputs the tree to the page

dTree.prototype.toString = function() {

var str = '<div class="dtree">\n';

if (document.getElementById) {

if (this.config.useCookies) this.selectedNode = this.getSelected();

str += this.addNode(this.root);

} else str += 'Browser not supported.';

str += '</div>';

if (!this.selectedFound) this.selectedNode = null;

this.completed = true;

return str;

};



// Creates the tree structure

dTree.prototype.addNode = function(pNode) {

var str = '';

var n=0;

if (this.config.inOrder) n = pNode._ai;

for (n; n<this.aNodes.length; n++) {

if (this.aNodes[n].pid == pNode.id) {

var cn = this.aNodes[n];

cn._p = pNode;

cn._ai = n;

this.setCS(cn);

if (!cn.target && this.config.target) cn.target = this.config.target;

if (cn._hc && !cn._io && this.config.useCookies) cn._io = this.isOpen(cn.id);

if (!this.config.folderLinks && cn._hc) cn.url = null;

if (this.config.useSelection && cn.id == this.selectedNode && !this.selectedFound) {

cn._is = true;

this.selectedNode = n;

this.selectedFound = true;

}

str += this.node(cn, n);

if (cn._ls) break;

}

}

return str;

};



// Creates the node icon, url and text

dTree.prototype.node = function(node, nodeId) {

var str = '<div class="dTreeNode">' + this.indent(node, nodeId);

if (this.config.useIcons) {

if (!node.icon) node.icon = (this.root.id == node.pid) ? this.icon.root : ((node._hc) ? this.icon.folder : this.icon.node);

if (!node.iconOpen) node.iconOpen = (node._hc) ? this.icon.folderOpen : this.icon.node;

if (this.root.id == node.pid) {

node.icon = this.icon.root;

node.iconOpen = this.icon.root;

}

str += '[img]' + ((node._io) ? node.iconOpen : node.icon) + '[/img]';

}

if (node.url) {



str += '<a id="s' + this.obj + nodeId + '" class="' + ((this.config.useSelection) ? ((node._is ? 'nodeSel' : 'node')) : 'node') + '" href="#"' + ' onClick="finestra(&#39' + node.url + '&#39)"';



//str += '<a id="s' + this.obj + nodeId + '" class="' + ((this.config.useSelection) ? ((node._is ? 'nodeSel' : 'node')) : 'node') + '" href="' + node.url + '"';








if (node.title) str += ' title="' + node.title + '"';

if (node.target) str += ' target="' + node.target + '"';

if (this.config.useStatusText) str += ' onmouseover="window.status=\'' + node.name + '\';return true;" onmouseout="window.status=\'\';return true;" ';

if (this.config.useSelection && ((node._hc && this.config.folderLinks) || !node._hc))

str += ' onclick="javascript: ' + this.obj + '.s(' + nodeId + ');"';

str += '>';

}

else if ((!this.config.folderLinks || !node.url) && node._hc && node.pid != this.root.id)

str += '<a href="javascript: ' + this.obj + '.o(' + nodeId + ');" class="node">';


str += node.name;

if (node.url || ((!this.config.folderLinks || !node.url) && node._hc)) str += '</a>';

str += '</div>';

if (node._hc) {

str += '<div id="d' + this.obj + nodeId + '" class="clip" style="display:' + ((this.root.id == node.pid || node._io) ? 'block' : 'none') + ';">';

str += this.addNode(node);

str += '</div>';

}

this.aIndent.pop();

return str;

};



// Adds the empty and line icons

dTree.prototype.indent = function(node, nodeId) {

var str = '';

if (this.root.id != node.pid) {

for (var n=0; n<this.aIndent.length; n++)

str += '[img]' + ( (this.aIndent[n] == 1 && this.config.useLines) ? this.icon.line : this.icon.empty ) + '[/img]';

(node._ls) ? this.aIndent.push(0) : this.aIndent.push(1);

if (node._hc) {

str += '';

} else str += '[img]' + ( (this.config.useLines) ? ((node._ls) ? this.icon.joinBottom : this.icon.join ) : this.icon.empty) + '[/img]';

}

return str;

};



// Checks if a node has any children and if it is the last sibling

dTree.prototype.setCS = function(node) {

var lastId;

for (var n=0; n<this.aNodes.length; n++) {

if (this.aNodes[n].pid == node.id) node._hc = true;

if (this.aNodes[n].pid == node.pid) lastId = this.aNodes[n].id;

}

if (lastId==node.id) node._ls = true;

};



// Returns the selected node

dTree.prototype.getSelected = function() {

var sn = this.getCookie('cs' + this.obj);

return (sn) ? sn : null;

};



// Highlights the selected node

dTree.prototype.s = function(id) {



if (!this.config.useSelection) return;

var cn = this.aNodes[id];

if (cn._hc && !this.config.folderLinks) return;

if (this.selectedNode != id) {
if (this.selectedNode || this.selectedNode==0) {
eOld = document.getElementById("s" + this.obj + this.selectedNode);
eOld.className = "node";
}
eNew = document.getElementById("s" + this.obj + id);
eNew.className = "nodeSel";
this.selectedNode = id;
if (this.config.useCookies) this.setCookie('cs' + this.obj, cn.id);
}
};
dTree.prototype.o = function(id) {
var cn = this.aNodes[id];
this.nodeStatus(!cn._io, id, cn._ls);
cn._io = !cn._io;
if (this.config.closeSameLevel) this.closeLevel(cn);
if (this.config.useCookies) this.updateCookie();
};
dTree.prototype.oAll = function(status) {
for (var n=0; n<this.aNodes.length; n++) {
if (this.aNodes[n]._hc && this.aNodes[n].pid != this.root.id) {
this.nodeStatus(status, n, this.aNodes[n]._ls)
this.aNodes[n]._io = status;
}
}
if (this.config.useCookies) this.updateCookie();
};
dTree.prototype.openTo = function(nId, bSelect, bFirst) {
if (!bFirst) {
for (var n=0; n<this.aNodes.length; n++) {
if (this.aNodes[n].id == nId) {
nId=n;
break;
}
}
}
var cn=this.aNodes[nId];
if (cn.pid==this.root.id || !cn._p) return;
cn._io = true;
cn._is = bSelect;
if (this.completed && cn._hc) this.nodeStatus(true, cn._ai, cn._ls);
if (this.completed && bSelect) this.s(cn._ai);
else if (bSelect) this._sn=cn._ai;
this.openTo(cn._p._ai, false, true);
};
dTree.prototype.closeLevel = function(node) {
for (var n=0; n<this.aNodes.length; n++) {
if (this.aNodes[n].pid == node.pid && this.aNodes[n].id != node.id && this.aNodes[n]._hc) {
this.nodeStatus(false, n, this.aNodes[n]._ls);
this.aNodes[n]._io = false;
this.closeAllChildren(this.aNodes[n]);
}
}
}
dTree.prototype.closeAllChildren = function(node) {
for (var n=0; n<this.aNodes.length; n++) {
if (this.aNodes[n].pid == node.id && this.aNodes[n]._hc) {
if (this.aNodes[n]._io) this.nodeStatus(false, n, this.aNodes[n]._ls);
this.aNodes[n]._io = false;
this.closeAllChildren(this.aNodes[n]);
}
}
}

dTree.prototype.nodeStatus = function(status, id, bottom) {
eDiv = document.getElementById('d' + this.obj + id);
eJoin = document.getElementById('j' + this.obj + id);
if (this.config.useIcons) {
eIcon = document.getElementById('i' + this.obj + id);
eIcon.src = (status) ? this.aNodes[id].iconOpen : this.aNodes[id].icon;
}
eJoin.src = (this.config.useLines)?
((status)?((bottom)?this.icon.minusBottom:this.ico n.minus)(bottom)?this.icon.plusBottom:this.icon.plus)):
((status)?this.icon.nlMinus:this.icon.nlPlus);
eDiv.style.display = (status) ? 'block': 'none';
};
dTree.prototype.clearCookie = function() {
var now = new Date();
var yesterday = new Date(now.getTime() - 1000 * 60 * 60 * 24);
this.setCookie('co'+this.obj, 'cookieValue', yesterday);
this.setCookie('cs'+this.obj, 'cookieValue', yesterday);
};
dTree.prototype.setCookie = function(cookieName, cookieValue, expires, path, domain, secure) {
document.cookie =
escape(cookieName) + '=' + escape(cookieValue)
+ (expires ? '; expires=' + expires.toGMTString() : '')
+ (path ? '; path=' + path : '')
+ (domain ? '; domain=' + domain : '')
+ (secure ? '; secure' : '');
};
dTree.prototype.getCookie = function(cookieName) {
var cookieValue = '';
var posName = document.cookie.indexOf(escape(cookieName) + '=');
if (posName != -1) {
var posValue = posName + (escape(cookieName) + '=').length;
var endPos = document.cookie.indexOf(';', posValue);
if (endPos != -1) cookieValue = unescape(document.cookie.substring(posValue, endPos));
else cookieValue = unescape(document.cookie.substring(posValue));
}
return (cookieValue);
};
dTree.prototype.updateCookie = function() {
var str = '';
for (var n=0; n<this.aNodes.length; n++) {
if (this.aNodes[n]._io && this.aNodes[n].pid != this.root.id) {
if (str) str += '.';
str += this.aNodes[n].id;
}
}
this.setCookie('co' + this.obj, str);
};
dTree.prototype.isOpen = function(id) {
var aOpen = this.getCookie('co' + this.obj).split('.');
for (var n=0; n<aOpen.length; n++)
if (aOpen[n] == id) return true;
return false;
};

// If Push and pop is not implemented by the browser
if (!Array.prototype.push) {
Array.prototype.push = function array_push() {
for(var i=0;i<arguments.length;i++)
this[this.length]=arguments[i];
return this.length;
}
};
if (!Array.prototype.pop) {
Array.prototype.pop = function array_pop() {
lastElement = this[this.length-1];
this.length = Math.max(this.length-1,0);
return lastElement;
}
};

[morphy79]

4) Adesso creiamo una pagina in cui vogliamo richiamare il menu ad albero ( che faremo come ultimo passo in un include )


<html>
<head>
<title>PROVA MENU AD ALBERO</title>

</head>


<body>




</BODY>
</HTML>



5) Ultimo passo creiamo il menu ad albero nel file menuTree.asp ( io ti faccio un esempio riviste - numeri rivista)

<link rel="StyleSheet" href="dtree.css" type="text/css"/>
<script type="text/javascript" src="dtree.js"></script>


Set cn = Server.CreateObject("ADODB.Connection")
cn.Open "NOME ODBC", "USER", "PASSWORD"



<div align="center">


apri menu <a class="classe">/</a> chiudi menu</p>
</div>




<div class="dtree">
<script type="text/javascript">
d = new dTree('d');
d.add(0,-1,' Elenco completo degli eventi');
<%
' QUERY PER ESTRARRE TUTTE LE RIVISTE DA UNA TABELLA
selectQuery = "SELECT * FROM RIVISTE "
RS.Open selectQuery, cn, 3

//INIZIO CICLO

RS.MoveFirst

indiceRivista = 0
indiceTotale = 1

Do while not RS.EOF
rivistaCorrente = rs("cod_rivista")
%>

<%
' SCRIVE NEL MENU AD ALBERO LA RIVISTA, ADESSO PER QUESTA RIVISTA SCRIVEREMO IN UN LIVELLO INFERIORE TUTTI I SUOI NUMERI
response.write "d.add(" & indiceTotale & ",0,'" & rs("rivista") & "','EVENTUALE LINK CHE VUOI CHE CHIAMA SE CI CLIKKI SOPRA');"%>
<%
indiceRivista = indiceTotale
indiceTotale = indiceTotale + 1
%>

<%
' SECONDA QUERY, PER LA RIVISTA CORRENTE SCRIVO I SUOI NUMERI IN UN SOTTOLIVELLO
Set RS2 = Server.CreateObject("ADODB.Recordset")
selectQuery="SELECT * FROM NUMERIRIVISTE where COD_RIVISTA='" & rivistaCorrente & "'' ORDER BY NUMERORIVISTA"
RS2.Open selectQuery, cn, 3

//INIZIO CICLO 2
Do while not RS2.EOF

response.write "d.add(" & indiceTotale & "," & indiceRivista & ",'" & rs2("NUMERORIVISTA") & "','LINK CHE VUOI CHIAMARE SE CI CLICCHI SOPRA');"

indiceTotale = indiceTotale + 1

RS2.MoveNext
indiceTotale = indiceTotale + 1
Loop
rs2.Close
Set rs2 = Nothing
%>

<%
RS.MoveNext
indiceTotale = indiceTotale + 1

' LOOP, PER OGNI RIVISTA RIPETO INTERO PROCEDIMENTO
Loop
rs.Close
Set rs = Nothing
%>

document.write(d);
</script>
</div>






6) Se guardi la guida on-line potrai trovare molte cose, come ad esmpio come fare a cambiare le immagini nel menu ad albero o come personalizzare altre cose !
Spero di esserti stato di aiuto e buon studio !!!

[Starky]

Intanto ti ringrazio tantissimo per la tua disponibilità!

Ora faccio le dovute variazioni e lo provo!

Grazie!

[marco_c]

ho provato il codice di morphy79, funziona ma non riesco ad aumentare i livelli dell'albero...
cioè al primo livello ho le cartelle e al secondo livello ho i documenti. però a me serve che ci sia la possibilità di mettere anche sottocartelle, che si aprano a loro volta, si può?

se io aggiungo al codice di morphy79 una terza query annidata, le sottocartelle che contengono altri documenti non mi vengono visualizzate come cartelle, ma come documenti e non sono annidate correttamente..