当前位置:首页 >> 计算机软件及应用 >>

XML+ JS创建树形菜单


思路:
从数据岛menuXML中读取数据,从树的根节点开始分析树,
利用 hasChildNodes() [方法:是否含有子节点 ] 判断当前
节点是否有子节点,如果有子节点继续向下分析 childNodes
[对象:子节点对象集合] ,否则返回当前分析结果(树结点对象)。

主要的函数:
createTree(thisn /*树结点*/ , sd/*树深度*/)
运行代码框

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> DSTree </TITLE>
<META NAME="Author" CONTENT="sTarsjz@hotmail.com" >
<style>
body,td{font:12px verdana}
#treeBox{background-color:#fffffa;}
#treeBox .ec{margin:0 5 0 5;}
#treeBox .hasItems{font-weight:bold;height:20px;padding:3 6 0 6;margin:2px;cursor:hand;color:#555555;border:1px solid #fffffa;}
#treeBox .Items{height:20px;padding:3 6 0 6;margin:1px;cursor:hand;color:#555555;border:1px solid #fffffa;}
</style>
<base href="http://vip.5d.cn/star/dstree/" />
<script>
//code by star 20003-4-7
var HC = "color:#990000;border:1px solid #cccccc";
var SC = "background-color:#efefef;border:1px solid #cccccc;color:#000000;";
var IO = null;
function initTree(){
var rootn = document.all.menuXML.documentElement;
var sd = 0;
document.onselectstart = function(){return false;}
document.all.treeBox.appendChild(createTree(rootn,sd));
}
function createTree(thisn,sd){
var nodeObj = document.createElement("span");
var upobj = document.createElement("span");
with(upobj){
style.marginLeft = sd*10;
className = thisn.hasChildNodes()?"hasItems":"Items";
innerHTML = "<img src=expand.gif class=ec>" + thisn.getAttribute("text") +"";

onmousedown = function(){
if(event.button != 1) return;
if(this.getAttribute("cn")){
this.setAttribute("open",!this.getAttribute("open"));
this.cn.style.display = this.getAttribute("open")?"inline":"none";
this.all.tags("img")[0].src = this.getAttribute("open")?"expand.gif":"contract.gif";
}
if(IO){
IO.runtimeStyle.cssText = "";
IO.setAttribute("selected",false);
}
IO = this;
this.setAttribute("selected",true);
this.runtimeStyle.cssText = SC;
}
onmouseover = function(){
if(this.getAttribute("selected"))return;
this.runtimeStyle.cssText = HC;
}
onmouseout = function(){
if(this.getAttribute("selected"))return;
this.runtimeStyle.cssText = "";
}
oncontextmenu = contextMenuHandle;
onclick = clickHandle;
}

if(thisn.getAttribute("treeId") != null){
upobj.setAttribute("treeId",thisn.getAttribute("treeId"));
}
if(thisn.getAttribute("href") != null){
upobj.setAttribute("href",thisn.getAttribute("href"));
}
if(thisn.getAttribute("target") != null){
upobj.setAttribute("target",thisn.getAttribute("target"));
}

nodeObj.appendChild(upobj);
nodeObj.insertAdjacentHTML("beforeEnd","<br>")

if(thisn.hasChildNodes()){
var i;
var nodes = thisn.childNodes;
var cn = document.createElement("span");
upobj.setAttribute("cn",cn);
if(thisn.getAttribute("open") != null){
upobj.setAttribute("open",(thisn.getAttribute("open")=="true"));
upobj.getAttribute("cn").style.display = upobj.getAttribute("open")?"inline":"none";
if( !upobj.getAttribute("open"))upobj.all.tags("img")[0].src ="contract.gif";
}

for(i=0;i<nodes.length;cn.appendChild(createTree(nodes[i++],sd+1)));
nodeObj.appendChild(cn);
}
else{
upobj.all.tags("img")[0].src ="endnode.gif";
}
return nodeObj;
}
window.onload = initTree;
</script>

<script>
function clickHandle(){
// your code here
}
function contextMenuHandle(){
event.returnValue = false;
var treeId = this.getAttribute("treeId");
// your code here
}
</script>
</HEAD>
<BODY>
<xml id=menuXML>
<?xml version="1.0" encoding="GB2312"?>
<DSTreeRoot text="根节点" open="true" href="http://" treeId="123">

<DSTree text="技术论坛" open="false" treeId="">
<DSTree text="5DMedia" open="false" href="http://" target="box" treeId="12">
<DSTree text="网页编码" href="http://" target="box" treeId="4353" />
<DSTree text="手绘" href="http://" target="box" treeId="543543" />
<DSTree text="灌水" href="http://" target="box" treeId="543543" />
</DSTree>
<DSTree text="BlueIdea" open="false" href="http://" target="box" treeId="213">
<DSTree text="DreamWeaver &amp; JS" href="http://" target="box" treeId="4353" />
<DSTree text="FlashActionScript" href="http://" target="box" treeId="543543" />
</DSTree>
<DSTree text="CSDN" open="false" href="http://" target="box" treeId="432">
<DSTree text="JS" href="http://" target="box" treeId="4353" />
<DSTree text="XML" href="http://" target="box" treeId="543543" />
</DSTree>
</DSTree>

<DSTree text="资源站点" open="false" treeId="">
<DSTree text="素材屋" href="http://" target="box" treeId="12" />
<DSTree text="桌面城市" open="false" href="http://" target="box" treeId="213">
<DSTree text="壁纸" href="http://" target="box" treeId="4353" />
<DSTree text="字体" href="http://" target="box" treeId="543543" />
</DSTree>
<DSTree text="MSDN" open="false" href="http://" target="box" treeId="432">
<DSTree text="DHTML" href="http://" target="box" treeId="4353" />
<DSTree text="HTC" href="http://" target="box" treeId="543543" />
<DSTree text="XML" href="" target="box" treeId="2312" />
</DSTree>
</DSTree>

</DSTreeRoot>
</xml>
<table style="position:absolute;left:100;top:100;">
<tr><td id=treeBox style="width:400px;height:200px;border:1px solid #cccccc;padding:5 3 3 5;" valign=top></td></tr>
<tr><td style="font:10px verdana;color:#999999" align=right>by <font color=#660000>sTar</font><br> 2003-4-8</td></tr>
</table>
</BODY>
</HTML>

赞助商链接
相关文章:
Jquery动态生成树形列表
Jquery 动态生成树形列表实现思路:使用 ajax 方式发送请求→服务端从数据库中取出结构列表,生成 xml 文档,回 发给客户端→客户端接收到 xml 数据,进行解析,生成...
JSP树形菜单的实现.doc
xml version="1.0" encoding="ISO-8859-1" ?> <!DOCTYPE taglib PUBLIC "...基于内存多叉树的Ext JS... 11页 免费 JSP树形菜单的实现 3页 2下载券 在...
java如何在在页面中实现树形菜单
(XML 文件方式的系统包、而且该 XML 文件可以是动态创建) http://webfx.eae...树形菜单的实现.doc 10页 免费 网页js树形菜单 7页 免费 如何调用网页导航下拉...
js访问xml之节点操作
js访问xml之节点操作_计算机软件及应用_IT/计算机_专业资料。js访问xml之节点...xmlDoc.getElementsByTagName("book")[0]; x.appendChild(newNode); 创建新...
树形菜单的实现
关键词:JS树形菜单 1/2 相关文档推荐 js脚本实现树形菜单 6页 2财富值 java...xml version="1.0" encoding="ISO-8859-1" ?> <!DOCTYPE taglib PUBLIC "...
SHibernate+Javascript实现无限级树形菜单
生成两张表的 、 视图, Pojo 类和 类和*.hbm.xml 映射文件 5、对自动生成...javascript 树形菜单 5页 免费 利用多叉树实现Ext JS中... 14页 免费 利用内...
xml提交的js代码及调试
xml 提交的 js 代码及调试一般来说,用文本编辑器编写的 asp 代码不方便调试客户端提交的 xml,下面的例子可 以在处理 xml 错误时,弹出错误页面。 客户端 JS ...
CSS-HTML-JS-XML什么概念及之间的关系
CSS-HTML-JS-XML什么概念及之间的关系_IT/计算机_...它是用于 创建可从一个平台移植到另一平台的超文本...上,图片改变颜色,移动到导航栏,弹出一个动态菜单...
Ajax 实现一个树状菜单 东海陈光剑 20120815
关键词:Ajax实现一个树状菜单东海陈光剑20120815 1/2 相关文档推荐 ...//设置发送参数 } Xmlhttp.js 这个 js 文件创建了一个可跨浏览器的 XMLHttp...
Jsp实现树形结构
xml version="1.0" encoding="ISO-8859-1" ?> <!DOCTYPE taglib PUBLIC "...利用多叉树实现Ext JS中... 14页 免费 JSP树形菜单根据数据库默... 4页 ...
更多相关标签: