XML+ JS创建树形菜单_Web开发_学习笔记★闵涛★计算机学习电脑编程软硬件技巧


	转至繁体中文版	\| 网站首页 \| 图文教程 \| 资源下载 \| 站长博客 \| 图片素材 \| 武汉seo \| 武汉网站优化 \|

XML+ JS创建树形菜单

作者：闵涛文章来源：闵涛的学习笔记点击数：1420 更新时间：2009/4/23 11:27:16

简单说明:

思路:
从数据岛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.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=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",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"));
     }

     nodeObj.appendChild(upobj);
     nodeObj.insertAdjacentHTML("be foreEnd","<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",(thi sn.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" hr

[1] [2] 下一页

[Web开发]XML与HTML在语法上的主要区别详解  [系统软件]如何让Expat支持中文XML
[VB.NET程序]vb.net 与 XML 的操作  [VB.NET程序]vb.net读写xml(2)--实现datagrid与xml的沟通（原创…
[VB.NET程序]vb.net 读写xml方法(1)  [VB.NET程序][VB.NET+XML]完成简单程序配置
[VB.NET程序]使用Visual Basic操纵XML文档  [VB.NET程序]XML 简单接口（SAX2）用Visual Basic 实现的示例
[Delphi程序]Delphi 6 XML映象工具  [Delphi程序]Delphi 6 XML数据绑定

教程录入：mintao 责任编辑：mintao

上一篇教程：利用JS获取IE客户端IP及MAC的实现

下一篇教程：用javascript作消息提示框（类似于QQ用户上线的消息提示）

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

注：本站部分文章源于互联网，版权归原作者所有！如有侵权，请原作者与本站联系，本站将立即删除！本站文章除特别注明外均可转载，但需注明出处！ [MinTao学以致用网]

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

同类栏目

· Web开发  · 网页制作
· 平面设计  · 网站运营
· 网站推广  · 搜索优化
· 建站心得  · 站长故事
· 互联动态

热门推荐

没有教程

赞助链接

闵涛博文

500 - 内部服务器错误。

您查找的资源存在问题，因而无法显示。

鄂公网安备 42011102001154号

站长：MinTao ICP备案号：鄂ICP备11006601号-18

闵涛站盟:医药大全-武穴网。A打造B、C、D……