一个不错的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>