XML+ JS创建树形菜单

您现在的位置： IT技术文档中心 >> 文档资源 >> Web开发 >> XML >> 文档正文

XML+ JS创建树形菜单

作者：未知文章来源：互联网点击数：更新时间：2007-7-13 23:18:53

简单说明:

思路:
从数据岛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>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

上一篇文档：使XML本地化和关系化

下一篇文档：全局XML Web服务体系结构概述

【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】

网友评论：（只显示最新10条。评论内容只代表网友观点，与本站立场无关！）