XML+ JS创建树形菜单

2022-07-15 80酷酷网 80kuku.com

　　js|xml|菜单|创建

简单说明:

思路:
从数据岛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="sTarsjzhotmail.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
//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.appendChi ld(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=http://www.163design.net/x/b/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")?"http://www.163design.net/x/b/expand.gif":"contract.gif";
                }
                if(IO){
                      IO.runtimeStyle.cssText = "";
                      IO.setAttribute("selected",false);
                }
                IO = this;
                this.setAttribute("selected",t rue);
                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"));
     }

[1] [2] 下一页