您的位置：首页 > Web前端 > JavaScript

javascript操作xml生成树形菜单

2010-03-19 10:54 567 查看

实现效果是这样的：
读取XML文档；
采用递归生成无限级的树形菜单；
能够响应鼠标事件，展开与拆叠子级菜单；

首先是生成一个XML文档，我用的是XML Spy的编辑器；
<?xml version="1.0" encoding="utf-8"?>
<menu>
<menu name="明星名人">
<menu name="华人明星" url="">
<menu name="大陆新秀" url="">
<menu name="周笔畅" url="http://post.baidu.com/f?kw=%D6%DC%B1%CA%B3%A9" target="_blank"/>
<menu name="周笔畅" url="http://post.baidu.com/f?kw=%D6%DC%B1%CA%B3%A9" target="_blank"/>
<menu name="周笔畅" url="http://post.baidu.com/f?kw=%D6%DC%B1%CA%B3%A9" target="_blank"/>
</menu>
<menu name="香港" url="">
<menu name="成龙" url="http://post.baidu.com/f?kw=%B3%C9%C1%FA" target="_blank"/>
</menu>
</menu>
<menu name="日韩明星" url="Admin_Dep.aspx">
<menu name="金喜善" url="http://post.baidu.com/f?kw=%BD%F0%CF%B2%C9%C6" target="_blank"/>
<menu name="金喜善" url="http://post.baidu.com/f?kw=%BD%F0%CF%B2%C9%C6" target="_blank"/>
</menu>
<menu name="欧美明星" url="#"/>
</menu>
<menu name="娱乐">
<menu name="快乐男声" url="#" target="_blank">
<menu name="陈楚生" url="http://post.baidu.com/f?kw=%B3%C2%B3%FE%C9%FA" target="_blank"/>
<menu name="苏醒" url="http://post.baidu.com/f?kw=%CB%D5%D0%D1"/>
</menu>
</menu>
<menu name="体育">
<menu name="体育俱乐部" url="#"/>
</menu>
<menu name="军事">
<menu name="战斗机" url="#"/>
</menu>
</menu>
保存文件名为menu.xml

在HTML中，Javascript代码如下：
//建立XMLdom对象，并载入xml，xmlFilePath为xml的文本路径
function CreateXMLDoc(xmlFilePath)
{
if(window.ActiveXObject)
{
//获得操作的xml文件的对象
var msXMLdom = new ActiveXObject('Microsoft.XMLDOM');
msXMLdom.async = false;
msXMLdom.load(xmlFilePath);
return msXMLdom;
}
else
{
var oXmlHttp = new XMLHttpRequest() ;
oXmlHttp.open( "GET", xmlFilePath, false ) ;
oXmlHttp.send(null) ;
return oXmlHttp.responseXML;

}
}
//创建对象
var xmlDoc;
xmlDoc=CreateXMLDoc("menu.xml");
var rootNode=xmlDoc.lastChild;

然后写一个生成树的函数：

//返回树形结构的HTML代码，参数node为节点名,level为当前节点相对于根节点的深度值
function BuilderTree(nodeName,level)
{
//子菜单项，缩进的像素数
var indent=10;
var temp="";
level=level==null ? 0 : level;
var nodes=nodeName.childNodes;
for(var i=0;i<nodes.length;i++)
{
//当该节点没下级节点时
if(nodes[i].childNodes.length<1)
{
//当前菜单的名称
temp+="<div style='margin-left:"+level*indent+"px;cursor:hand;''>";
temp+="<b>-</b> ";
//是否打开新窗口
var target=nodes[i].getAttribute("target")==null ? "" : "target='"+nodes[i].getAttribute("target")+"'";
temp+="<a href='"+nodes[i].getAttribute("url")+"' "+target+">"+nodes[i].getAttribute("name")+"</a>";
temp+="</div>";
continue;
}
//当前菜单的名称
temp+="<div style='margin-left:"+level*indent+"px;cursor:hand;' onclick='show(this)'>";
temp+="<b>+</b> <b>"+nodes[i].getAttribute("name")+"</b>";
temp+="</div>";
//当前菜单的下级内容
temp+="<div style='margin-left:"+indent+"px;cursor:hand;display:none'>";
temp+=BuilderTree(nodes[i],level+1);
temp+="</div>";
}
return temp;
}

在上面的代码中，用到了递归来实现遍历XML中的所有数据；

然后，为了实现鼠标事件，再写一个方法；

show函数如下：
//操作某个节点的下一节点nextSibling是否显示；
function show(obj)
{
//当前节点的下一节点
var nextNode=obj.nextSibling;
//当前节点的头部符号节点，就是菜单项前面+、-号
var subNode=obj.firstChild.firstChild;
if(nextNode.nodeType==1)
{
with(eval(nextNode))
{
if(style.display=="")
{
style.display="none";
subNode.nodeValue="+";
}else
{
style.display="";
subNode.nodeValue="-";
}
}
}
}
因为每个菜单所属的子级内容与它自身并不在一个div中，这里仅传了this就是自身，为了操作它仅随后面的一个div，用到了nextSibling方法；并用 var subNode=obj.firstChild.firstChild;找到每个菜单头部的加减号用于展开或拆叠时显示；

看完上面这些，最终是要输出的，在HTML页面的body中，写入：
<div id="TreeMenu"></div>

然后head中，写入
<script type="text/javascript" language="javascript" defer="defer">
//将处理过的XML数据，插入到页面的相应位置
var d=document.getElementById("TreeMenu");
d.innerHTML=BuilderTree(rootNode);
</script>

这样就OK了。

源文件：
http://www.cnblogs.com/Files/2hill/TreeMenu.rar

附一个《javascript操作xml生成下拉菜单》
http://hi.baidu.com/2hill/blog/item/1c234a952fb53f0c7bf4809c.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航