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  />
<script>
//code by star 20003-4-7
var HC = "color:#990000;border:1px solid #<STRONG><A href="http://www.kjueaiud.com/ceshi/ceshijishu/rjcsgj/rational/<STRONG><A href="http://www.kjueaiud.com/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  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.kjueaiud.com

軟件測試 > 測試開發技術 > 軟件測試開發語言 > 自動測試腳本語言 >

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創建樹形菜單