樹形菜單jscript代碼!

Question

續.....
//This function builds tree.
//Parameter sourceNode is a XML source node, resultNode is a produced HTML node, 
//expanded specifies whether display resultNode  expanded or not. 
function buildTree(sourceNode, resultNode, expanded){
var oLI, oUL, oIMG, oA, oNOBR, i, oNodeAttributes;
var sIcon, sName, sHref, sTarget, sSrc;
//Create container for child nodes
oUL = document.createElement("<ul>");
oUL = resultNode.appendChild(oUL);
//if node expanded then display container
if (expanded=="true"){
oUL.style.display="block";
}else{
oUL.style.display="none";
}
//Run over nodes in XML source
for (i=0;i<sourceNode.childNodes.length;i++){
//Set obligatory values
oNodeAttributes = sourceNode.childNodes(i).attributes;
sIcon = oNodeAttributes.getNamedItem("icon").value;
sName = oNodeAttributes.getNamedItem("name").value;
//Set optional values
if (oNodeAttributes.getNamedItem("href")!= null){
sHref = oNodeAttributes.getNamedItem("href").value;
}else{
sHref = "";
}
if(oNodeAttributes.getNamedItem("target")!=null){
sTarget = oNodeAttributes.getNamedItem("target").value;
}else{
sTarget = ""
}
//Create node
oLI = document.createElement("<li>");
oLI = oUL.appendChild(oLI);
oNOBR = document.createElement("<nobr>");
oNOBR = oLI.appendChild(oNOBR);
//Create action image
oIMG = document.createElement("<img>");
oIMG.border = 0;
//If src attribute is not empty, add custom attribute to the result node
if (oNodeAttributes.getNamedItem("src")!=null){
sSrc = oNodeAttributes.getNamedItem("src").value;
}else{
sSrc = "";
}
oLI.setAttribute("src", sSrc);
//If src attribute is not empty or amount of the child nodes is not equals zero
if (sSrc!="" || sourceNode.childNodes(i).childNodes.length>0){
//If sub nodes was not loaded
if (sSrc!=""){
oLI.setAttribute("LoadedChildren", "false");
}
//If sub nodes are already loaded
else{
oLI.setAttribute("LoadedChildren", "true");
}
oIMG.src = sImagePlus;
oLI.setAttribute("Expanded", "false");
//Set action image event handler
oIMG.onclick = actionOnClick;
}else{
oIMG.src = sImageNone;
}
//Create icon image
oIMG = oNOBR.appendChild(oIMG);
oIMG = document.createElement("<img>");
oIMG.border = 0;
oIMG.src = sImagesPath + sIcon + ".gif";
oIMG = oNOBR.appendChild(oIMG);
oA = document.createElement("<a onclick=\"actionOnClick()\" hidefocus=true>");
if (sHref!=""){
oA.href = sBaseHref + sHref;
//Set event handler for node  actionOnClick();
oA.onclick = nodeOnClick;
oA.onmouseover = nodeOnMouseOver;
oA.onmouseout = nodeOnMouseOut;
}
if (sTarget!=""){
oA.target = sTarget;
}
oA.innerText = sName;
oA.title = sName;
oA.className = "treenode";
oA = oNOBR.appendChild(oA);
if (sourceNode.childNodes(i).childNodes.length>0)
{ 
//Assembly subtree
buildTree(sourceNode.childNodes(i), oLI, "false")
}
}
//Add custom attributes to resultNode which specifies whether node loaded children or not and 
//whether is was expanded or not
resultNode.setAttribute("LoadedChildren", "true")
resultNode.setAttribute ("Expanded", expanded);
}
//
//This function handle OnClick event on action image 
//
function actionOnClick(){
var oNode
oNode = event.srcElement;
event.cancelBubble = true;
//If node is already expanded we collapse it
if (oNode.parentNode.parentNode.getAttribute ("Expanded")=="true"){
oNode.parentNode.parentNode.childNodes(1).style.display = "none";
oNode.parentNode.parentNode.childNodes(0).childNodes(0).src = sImagePlus;
oNode.parentNode.parentNode.setAttribute ("Expanded", "false")
}
//If node is collapsed expand it
else{
//If children nodes are already loaded, just expand it
if (oNode.parentNode.parentNode.getAttribute("LoadedChildren")=="true"){
oNode.parentNode.parentNode.childNodes(1).style.display = "block";
oNode.parentNode.parentNode.childNodes(0).childNodes(0).src = sImageMinus;
oNode.parentNode.parentNode.setAttribute ("Expanded", "true")
}
 //Children nodes are not loaded yet, we need to load it
else{
//If the other nodes are loaded at the current time, we should stop it
if (loadingNode!=null){
hideLoadingNode(loadingNode);
}
//Set new node
loadingNode = oNode.parentNode.parentNode;
//Show loading node
showLoadingNode(loadingNode);
//Assembly subtree
oXml.load(loadingNode.getAttribute("src"));
}
}
}
//This function handles OnClick event on link 
function nodeOnClick(){
var oNode
oNode = event.srcElement;
event.cancelBubble = true;
if (oSelNode!=null){
oSelNode.childNodes(0).childNodes(2).className = sNodeClass;
}
oSelNode = oNode.parentNode.parentNode;
oSelNode.childNodes(0).childNodes(2).className = sNodeSelOverClass;
//Add your code to handle this event
actionOnClick(); //崝樓萸誹萸湖羲醴翹髡夔
}
//This function handles OnMouseOver event on link 
function nodeOnMouseOver(){
var oNode
oNode = event.srcElement;
event.cancelBubble = true;
window.status = oNode.innerText;
if (oNode.className==sNodeSelClass){
oNode.className = sNodeSelOverClass;
}else{
oNode.className = sNodeOverClass;
}
//Add your code to handle this event
}
//This function handles OnMouseOut event on link 
function nodeOnMouseOut(){
var oNode
oNode = event.srcElement;
event.cancelBubble = true;
window.status = "";
if (oNode.className==sNodeSelOverClass){
oNode.className = sNodeSelClass;
}
else{
oNode.className = sNodeClass;
}
//Add your code to handle this event
}
//This function handles OnClick event on loading node 
function cancelLoad(){
var oNode
oNode = event.srcElement;
hideLoadingNode(oNode.parentElement);
loadingNode = null;
}function initPage(){
oSelNode = null;
//set loadingNode to the tree container
loadingNode = document.all("Tree");
oXml = new ActiveXObject("Microsoft.XMLDOM");
//Change this property to false if you are working in synchronous(肮祭) mode
oXml.async=true;
//set handler for xml data loading event
oXml.onreadystatechange=onLoadXml;
//load root xml data source
oXml.load(sRootTree);
}
//This function parses(賤昴) and builds tree when XML data source has been loaded
function onLoadXml(){
/*test if xml was fully loadedㄛreadyState property is:
0:Dom has been created,but not loaded;
1:XML恅紫眒掩蚾婥ㄛ筍遜羶衄輛俴逄楊煦昴;
2:XML恅紫眒冪掩蚾ㄛ甜輛俴賸逄楊煦昴ㄛ筍蜆XML恅紫遜祥褫眕蚚;
3:XML恅紫眒冪掩硒俴賸逄楊煦昴ㄛ筍XML恅紫岆硐黍腔˙
4:桶尨蜆XML恅紫蚾婥賦旰*/
if (oXml.readyState==4){
hideLoadingNode(loadingNode);
//test if xml is well formed and contains other than documentElement nodes
if ((oXml.parseError.reason=="") && (oXml.documentElement.childNodes.length>0)){
if (loadingNode!=document.all("Tree")){
loadingNode.childNodes(0).childNodes(0).src = sImageMinus;
}
//Set sBaseHref which specifies the baseline URL
sBaseHref = oXml.documentElement.attributes.getNamedItem("base").value;
//Building treeview starts with documentElement of XML and loading node
//We expand only one level of deep treeview, so we just pass "true" value in this call
buildTree(oXml.documentElement, loadingNode, "true");
}else{
//If subtree loading have been failed, change action image to none and remove event handler
loadingNode.childNodes(0).childNodes(0).src = sImageNone;
loadingNode.childNodes(0).childNodes(0).onclick = null; 
}
//Actions with loading node are finished, so set it to null
loadingNode = null;
}
}

Answer 1

tree.css:
//////////////////////////////////////////
a
{
height:16px;
margin-bottom: 1px;
cursor: default;
color: #114499;
text-decoration: none; 
} 
a:hover
{ 
cursor: hand;
color: red; 
background-color:#f4f4f4;
padding: 2px 2px 0px 2px;
text-decoration: none;
} 
a:visited
{
color: #666666; 
}
.load 
{ 
font-size: 11px; 
background-color:infobackground; 
border-width:1px; 
border-color:black; 
padding: 0px 1px 0px 2px;
border-style:solid; 
width:10px; 
margin-bottom: 2px;
} 
LI 
{
margin-left:-25px; 
list-style-type:none; 
list-style-image:none; 
font-family:verdana; 
font-size:8pt;
} 
.treenode
{ 
margin-left:3px; 
font-size: 8pt; 
border-width:1px; 
border-color:White; 
border-style:solid;
} 
.treenodesel 
{ 
font-size: 8pt; 
margin-left: 3px; 
border-width:1px;
padding: 2px 2px 0px 2px;
border-color:Navy; 
border-style:solid; 
} 
.treenodeover { 
margin-left:3px; 
font-size: 8pt; 
border-width:1px; 
border-color:White; 
border-style:solid; 
} 
.treenodeselover 
{ 
font-size: 8pt; 
margin-left: 3px; 
border-width:1px; 
border-color:blue; 
border-style:solid; 
}

Answer 2

xml文件:
<?xml version="1.0" encoding="BIG5"?>
<Tree base="customs/">
<TreeNode icon="folder" name="出貨計劃維護" src="xml/gwdm1.jsp" href="../chjhLiulan.jsp" target="right"  />
<TreeNode icon="folder" name="出貨計劃報表查詢" src="xml/gwdm3.jsp"  />
<TreeNode icon="folder" name="關務模擬出貨報表查詢" src="xml/gwdm2.jsp"  />
</Tree>