XML+ JS创建树形菜单

最新推荐文章于 2020-12-16 16:48:15 发布

Aimar168

最新推荐文章于 2020-12-16 16:48:15 发布

阅读量1.1k

点赞数

分类专栏： XML 文章标签： xml function border null encoding html

本文链接：https://blog.csdn.net/Aimar168/article/details/118300

版权

XML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

简单说明:

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

主要的函数:
createTree(thisn /*树结点*/ , sd/*树深度*/)

[html]<!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 & 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>
[/html]