一个不错的XML+Javascript树状菜单

 

效果图：

var ImgArr = new Array();

var level = 0;

var vid = 0;

var HTML = "";

var img = "";

function getSubject() {

 var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");

 xmlDoc.async = false;

 xmlDoc.load("Work.xml");

 if (xmlDoc.parseError.errorCode != 0) {

  alert(xmlDoc.parseError.reason);

  return;

 } else {

  var nodes = xmlDoc.documentElement.childNodes;

  for (var i = 0; i < nodes.length; i++) {

   img = "";

   if (nodes(i).nodeName == "tree") {

    vid++;

    if (i == nodes.length - 1) {

     ImgArr[level] = "<img src='images/L+.gif' + vid + "' " + vid + "')>";

     img = ImgArr[level];

     readTree(nodes(i), true);

    } else {

     ImgArr[level] = "<img src='images/T+.gif' + vid + "' " + vid + "')>";

     img = ImgArr[level];

     readTree(nodes(i), false);

    }

   } else {

    if (nodes(i).nodeName == "node") {

     img = "<img src='images/T.gif'>";

     if (i == nodes.length - 1) {

      img = "<img src='images/L.gif'>";

     }

     readNode(nodes(i));

    }

   }

  }

 }

 delete (xmlDoc);

 window.left.innerHTML = HTML;

 return;

}

function readTree(cI, sp) {

 var nodes = cI.childNodes;

 var menuHTML = img;

 menuHTML += "<img src='images/";

 menuHTML += cI.selectNodes("image")(0).text;

 menuHTML += "'>";

 menuHTML += "<a href='";

 if (cI.selectNodes("link")(0).text != "") {

  menuHTML += cI.selectNodes("link")(0).text;

 } else {

  menuHTML += "#";

 }

 if (cI.selectNodes("target")(0).text != "") {

  menuHTML += "' target='" + cI.selectNodes("target")(0).text;

 }

 menuHTML += "' " + vid + "')";

 menuHTML += " title='";

 menuHTML += cI.selectNodes("title")(0).text;

 menuHTML += "'>";

 menuHTML += cI.selectNodes("text")(0).text;

 menuHTML += "</a><br>\n";

 HTML += menuHTML;

 HTML += "<div + vid + "' style='display:none'>\n";

 ImgArr[level] = "<img src='images/i.gif'>";

 if (sp) {

  ImgArr[level] = "<img src='images/white.gif'>";

 }

 for (var i = 0; i < nodes.length; i++) {

  level++;

  ImgArr[level] = "<img src='images/i.gif'>\n";

  if (sp) {

   ImgArr[level] = "<img src='images/white.gif'>\n";

  }

  img = "";

  var tempImg = "";

  for (var j = 0; j < level; j++) {

   tempImg += ImgArr[j];

  }

  img = tempImg;

  if (nodes(i).nodeName == "tree") {

   vid++;

   if (i == nodes.length - 1) {

    img += "<img src='images/L+.gif' + vid + "' " + vid + "')>";

    readTree(nodes(i), true);

   } else {

    img += "<img src='images/T+.gif' + vid + "' " + vid + "')>";

    readTree(nodes(i), false);

   }

   img = "";

  } else {

   if (nodes(i).nodeName == "node") {

    if (i == nodes.length - 1) {

     img += "<img src='images/L.gif'>";

    } else {

     img += "<img src='images/T.gif'>";

    }

    readNode(nodes(i));

   }

  }

  level--;

 }

 HTML += "</div>\n";

 return;

}

function readNode(cI) {

 //alert("ok");

 var nodeHTML = img;

 nodeHTML += "<img src='images/";

 nodeHTML += cI.selectNodes("image")(0).text;

 nodeHTML += "'>";

 nodeHTML += "<a href='";

 nodeHTML += cI.selectNodes("link")(0).text;

 if (cI.selectNodes("target")(0).text != "") {

  nodeHTML += "' target='" + cI.selectNodes("target")(0).text;

 }

 nodeHTML += "' title='";

 nodeHTML += cI.selectNodes("title")(0).text;

 nodeHTML += "'>";

 nodeHTML += cI.selectNodes("text")(0).text;

 nodeHTML += "</a><br>\n";

 HTML += nodeHTML;

 return;

}

function divshow(vid) {

 if (document.all["div" + vid].style.display == "none") {

  document.all["div" + vid].style.display = "";

  document.all["f" + vid].src = document.all["f" + vid].src.replace("+", "-");

 } else {

  document.all["div" + vid].style.display = "none";

  document.all["f" + vid].src = document.all["f" + vid].src.replace("-", "+");

 }

 return;

}

<?xml version="1.0" encoding="gb2312"?>

<treeview>

 <tree >

  <text>通道管理</text>

  <target>workMain</target>

  <title>通道管理</title>

  <link>smsc.list</link>

  <image>tongdao.gif</image>

  <node>

   <text>通道列表</text>

   <target>workMain</target>

   <title>所有通道</title>

   <link>smsc.list</link>

   <image>list.gif</image>

  </node>

  <node>

   <text>添加通道</text>

   <target>workMain</target>

   <title>添加通道</title>

   <link>smsc.addtd</link>

   <image>html.gif</image>

  </node>

 </tree>

 <tree >

  <text>参数管理</text>

  <target>workMain</target>

  <title>参数管理</title>

  <link>smsc.manager</link>

  <image>sys.gif</image>

  <node>

   <text>系统设置</text>

   <target>workMain</target>

   <title>系统设置</title>

   <link>smsc.sysset</link>

   <image>html.gif</image>

  </node>

  <node>

   <text>通道设置</text>

   <target>workMain</target>

   <title>通道设置</title>

   <link>smsc.tdset</link>

   <image>html.gif</image>

  </node>

 </tree>

 <node>

  <text>权限管理</text>

  <target>workMain</target>

  <title>设置用户访问权限</title>

  <link>smsc.userAccess</link>

  <image>set.gif</image>

 </node>

 <tree >

  <text>插件管理</text>

  <target>workMain</target>

  <title>插件管理</title>

  <link>smsc.plugManager</link>

  <image>pulg.gif</image>

  <node>

   <text>编辑</text>

   <target>workMain</target>

   <title>编辑</title>

   <link>smsc.plugE</link>

   <image>html.gif</image>

  </node>

  <node>

   <text>插件平台</text>

   <target>workMain</target>

   <title>插件平台</title>

   <link>smsc.plugL</link>

   <image>html.gif</image>

  </node>

 </tree>

 <tree >

  <text>ctc021</text>

  <target>workMain</target>

  <title>ctc021管理</title>

  <link>smsc.sysset</link>

  <image>folder.gif</image>

  <node>

   <text>ctc021</text>

   <target>workMain</target>

   <title>ctc021</title>

   <link>smsc.main?name=ctc025</link>

   <image>html.gif</image>

  </node>

  <node>

   <text>ctc021日志</text>

   <target>workMain</target>

   <title>ctc021日志</title>

   <link>smsc.log?name=ctc021</link>

   <image>html.gif</image>

  </node>

 </tree>

 <tree >

  <text>cnc025</text>

  <target>workMain</target>

  <title>cnc025管理</title>

  <link>smsc.sysset</link>

  <image>folder.gif</image>

  <node>

   <text>cnc025</text>

   <target>workMain</target>

   <title>cnc025</title>

   <link>smsc.main?name=ctc025</link>

   <image>html.gif</image>

  </node>

  <node>

   <text>cnc025日志</text>

   <target>workMain</target>

   <title>cnc025日志</title>

   <link>smsc.log?name=ctc025</link>

   <image>html.gif</image>

  </node>

 </tree>

 <node>

  <text>修改管理员密码</text>

  <target>workMain</target>

  <title>修改管理员登录系统密码</title>

  <link>smsc.resetPassword</link>

  <image>set.gif</image>

 </node>

</treeview>