XML+ JS创建树形菜单_自动测试脚本语言

XML+ JS创建树形菜单

发表于：2007-06-21来源：作者：点击数：标签：

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

简单说明:

思路:
从数据岛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 #<STRONG><A href="http://www.ltesting.net/ceshi/ceshijishu/rjcsgj/rational/<STRONG><A href="http://www.ltesting.net/ceshi/ceshijishu/rjcsgj/rational/clearcase/" target="_blank" >clearcase</A></STRONG>/" target="_blank" >cc</A></STRONG>cccc";
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="技术<STRONG><A href="http://bbs.ltesting.net/" target="_blank" >论坛</A></STRONG>" 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 全部选择提示：你可先修改部分代码，再按运行]

原文转自：http://www.ltesting.net

软件测试 > 测试开发技术 > 软件测试开发语言 > 自动测试脚本语言 >

XML+ JS创建树形菜单

相关文章

脚本语言：21世纪的高级编程语言

我们需要真正的脚本语言

软件测试自动化之测试脚本语言杂谈

浅析-PowerShell语言

VBScript 词汇表

Python5-XML文件解析

全网最详细的接口测试实战

先测试再开发？TDD测试驱动

自动化测试架构

软件测试架构师的知识能力

大数据平台测试方法

用不同的测试模型来构建测

当软件测试遇上ChatGPT：软件

全网最详细的接口测试实战

先测试再开发？TDD测试驱动

自动化测试架构

软件测试架构师的知识能力

大数据平台测试方法

用不同的测试模型来构建测

当软件测试遇上ChatGPT：软件

MBT基于模型的测试介绍资料

iso29119相关介绍性资料

HP QTP 10 中文版官方中文补丁

HP QTP 10 英文版下载地址

HP ALM 11 官方中文版下载地址

Quality Center 9.0中文版下载地

HttpWatch Basic Edition Version 7.

WIN2003+ORACLE11G+QC11(ALM11) 安装

WIN2003+SQL2005(SP3)+QC11(ALM11) 安

软件测试沙龙 More>>

新浪微博 More>>

热门标签

《测试团队的招聘与管理

《我们应该如何构建我们

软件测试 > 测试开发技术 > 软件测试开发语言 > 自动测试脚本语言 >

XML+ JS创建树形菜单