dwnTree：可记忆的无限级树型菜单 1.1
简介
dwnTree是一个可记忆的无限级树型菜单，它的特点如下：
- 菜单数据采用XML格式，依据XML文档树结构生成树型菜单，可在XML文档中设置子菜单在加载时是否展开和菜单链接的target方式
- 可启用记录菜单的打开状态（需要Cookie的支持）,记住用户最后的菜单操作状态
- 支持WEB标准，考虑语义化，支持IE5.5+，Firefox，Opera
- 使用简单，同一页面无限次使用
可以任意使用（因为涉及到cookie和ajax获取数据，本地请在虚拟环境下打开），请保留说明和链接，谢谢！
使用
- 下载源码，把图片、JS和CSS文件放入到相应的文件夹中
- 修改XML文件，建立需要的XML文档，比如dwnTree.xml
- 在HTML文档中加入如下代码，用以加载Javascript和CSS文件
<style type="text/css"> <!-- @import "dwnTree.css"; --> </style> <script type="text/javascript" src="dwnTree.js"></script> - 在页面需要加入dwnTree的地方，建立容器标签，并随之调用dwnTree代码
<div id="dwnTree" class="dwnTree"></div> <script type="text/javascript">//<![CDATA[ new dwnTree('dwnTree.xml','dwnTree');//调用dwnTree //如果希望dwnTree记录菜单的状态，需要cookie的支持 //如果把这个cookie叫dwnTreeCookie,那么上面的代码变成： new dwnTree('dwnTree.xml','dwnTree',{name:'dwnTreeCookie'}); //]]></script>
参数
- dwnTree XML：
<item caption="关注" unfolded=""> <item caption="互联网 & IT" url="" target="_blank" /> <item caption="电影 & 电视" url="" target="_blank" /> </item>参数 值 说明 caption 菜单名 unfold 空值或unfold 控制其子菜单加载时是否展开，为空时是不展开 url 菜单的链接 合法的URL target 菜单链接的打开方式 - dwnTree Javascript：
new dwnTree('dwnTree.xml','dwnTree', {name:'dwnTreeCookie',hours:24,path:null,domain:null,secure:false});
| 参数 | 值 | 说明 |
|---|---|---|
| dwnTree.xml | xml的路径 | 必须 |
| dwnTree | 菜单容器标签的ID | 必须 |
| name | cookie名 | 当有该值时，dwnTree开始记录菜单的状态 |
| hours | cookie保留时间 | 默认是一年，即365*24 |
| path | cookie路径 | |
| domain | cookie域 | |
| secure | cookie传输状态 |
问题
- 以dwnTree来庆祝2007年的劳动节，祝大家劳动节快乐
- 因为劳动节需要回家的原因，匆忙推出，未经非常仔细的测试，只在IE5.5、IE6、IE7、Firefox2、Oprea9下粗略测试
- 肯定会存在一些BUG和不足，请留言指出，我非常乐意看到建议，谢谢
更新记录
- 2007.04.30 发布1.0版本
- 2007.07.01 发布1.1版本，解决当未在虚拟环境下运行或者Ajax获取链接出错时，浏览器报“未定义”错误问题
标签：dwnTree, JavaScript, 可记忆, 无限级, 树型菜单
作者：秦歌，时间:2007-04-30 19:00，归纳于：Javascript & DOM & AJAX，订阅：RSS 2.0，引用：Trackback
打开时显示“navRoot未定义”
呵呵，菜单的XML数据是用AJAX获取的，所以本地运行需要在虚拟环境下才能运行，而不能直接打开，这两天我考虑一下增加用Javascript直接获取XML就可以直接在本地运行了，不过这样也会有问题，就是cookie无法使用，无法看到记忆效果。
感谢提供这么好的菜单 我最近正在找这个东西
秦歌你提供一个demo就可以解决了
什么意思？已经提供demo了啊
对一些人来说一个demo就足够了，不过对另外一些人说明还是很有一些必要的，呵呵。
感谢秦歌:)很好用。
另外是不是可以增加当前所在位置，比如点击一个链接以后给这个链接一个样式，变颜色或加粗。
对JS了解不多，求教。
现在不是点击一个链接（节点）后有反白效果么？如果你想修改这个效果，只需修改CSS文件dwnTree.css中这句.dwnTree a:hover,.dwnTree .active,.dwnTree .hover{color:#fff;background:#0a246a;}即可
收到～～原来是我自己把这条的背景色和颜色删了，原来是这个作用。
谢谢:)
嘿嘿，大概是你网站配色、字体等不够好，让人找不到链接或者区分不出来重点，你的网站太低调了，低调的太一致了，一眼看过去，似乎竟然没有重点。。。
能否点击某子菜单后，其余有打开的子菜单会自动合上？
现在没有这个功能，回头我考虑考虑怎么来实现。
都是经典的东东啊，感谢各位大大，向各位大大学习！
图片怎么不提供啊
什么意思？表情图片？
无标题文档
adsf aksdjf as dfjkasd fjkasd fjkasd fjasd fjaskdf jsadkf asdj fas df dsf aksdjf as dfjkasd fjkasd fjkasd fjasd fjaskdf jsadkf asdj fas df dsf aksdjf as dfjkasd fjkasd fjkasd fjasd fjaskdf jsadkf asdj fas df dsf aksdjf as dfjkasd fjkasd fjkasd fjasd fjaskdf jsadkf asdj fas dfdsf aksdjf as dfjkasd fjkasd fjkasd fjasd fjaskdf jsadkf asdj fas dfdsf aksdjf as dfjkasd fjkasd fjkasd fjasd fjaskdf jsadkf asdj fas dfdsf aksdjf as dfjkasd fjkasd fjkasd fjasd fjaskdf jsadkf asdj fas dfdsf aksdjf as dfjkasd fjkasd fjkasd fjasd fjaskdf jsadkf asdj fas dfdsf aksdjf as dfjkasd fjkasd fjkasd fjasd fjaskdf jsadkf asdj fas dfdsf aksdjf as dfjkasd fjkasd fjkasd fjasd fjaskdf jsadkf asdj fas dfdsf aksdjf as dfjkasd fjkasd fjkasd fjasd fjaskdf jsadkf asdj fas df
鼠标移动的时候为什么背景会闪动（在ie里面），怎么才能解决呢？line-height必须是1.5，这是用户的要求，希望大哥帮帮我
这里发不了代码，郁闷呀大哥
父菜单如果也要有联接该怎么改呢？？，大哥谢谢告诉我一下
让所有目录都带有url改怎么实现呢？
当菜单都打开的时候，JOIN的图片部分断开了..
To #17：开始设计的时候没有考虑到父菜单也有URL，主要原因是感觉展开和折叠子菜单的动作和打开链接同步进行会有使用上的冲突，特别是折叠子菜单的时候，完全可以用子菜单的第一个作为父菜单的链接来实现。如果你真的很需要，可能你要自己来修改JS代码了。
To xdesign：你说的情况在IE下有时候的确存在，这个可能是IE下CSS的一个Bug，我会考虑如何解决这个问题的，谢谢。
谢谢，提供好东西
谢谢你提供这个好树,运行是OK的,但是出现一个问题,url的参数只能带一个,带两个就不行,提示js出错.
就会出错!
这个代码能否在不连接internet的环境中使用？
完全没有问题的，因为用了ajax，所以需要在本机用IIS或者apache配置一个本地环境就可以了。还有一个办法就是不用Ajax获取数据，直接用JS解析XML，这样就可以直接用浏览器打开看到效果，但是cookie应该无法生效的。
我用asp写了个动态的XML文件，但格式依然是.asp的这样直接调用的时候没有反应，有没办法可以解决？
利用responseXML时，IE只能接受到.xml文件，如果xml不能以xml文件为结尾的，需要在服务器端声明是xml文件类型（Response.ContentType = “text/xml”），或者利用responseText获取，然后封装成XML
谢了，我用Response.ContentType搞定的，实在是太感谢你了！
为什么我下载后就用不起来，老报“0!Data downloaded unsuccessfully.”
那是因为你没有在虚拟环境下运行，因为要支持AJAX和Cookie，这是必须的，请仔细看说明啊。
测试中。。。
非常好的东西，支持！
我用php的,怎么都运行不起来,
xml.php
<?php
header(‘Content-Type:text/xml;charset=UTF-8′);
echo ”;
echo ”;
echo ”;
echo ”;
echo ”;
echo ”;
echo ”;
echo ”;
echo ”;
echo ”;
?>
下面是调用的,老是出错,出不来,
//
首先，你直接用浏览器打开xml.php,看看是不是正确的打印出了xml。
秦歌，非常感谢你的东西，在使用时碰到一个问题，就是我想把树限制在200宽，限制成功了，但是如果标题比较长换行会把虚线截断，能否告知怎么解决，谢谢了！
有个问题，我的xml很大，估计有5万个节点，每次全部载入都需要1分钟，受不了，能不能改成只显示父节点，双击父节点再显示子节点这种方式啊？
unfold这个参数就是用来控制显示时子节点是否展开的问题。我猜你想说的是，每次点击一个节点才去利用ajax获取这个节点的数据，以便在大量数据时能能快速呈现吧。如果这样做，需要前后端配合或者把xml拆分若干片段才行（这种方法在大量数据面前也不可行），不管哪种方法，需要做的修改还是很多的。
图片链接不能显示图片,是css的问题还是js的问题
如果要cookie记录最后一次打开的目录,而不是所有已打开的目录,应该怎么修改啊?
subContainer.id = this.id +’_'+ i;这句代码,当运行到第二层目录的时候,this.id是什么啊? 第一层目录的id是dwn_1,dwn_2,dwn_i…;第二层目录的id是不是dwn_i_j啊?
@chris：不明白你的意思。
@楼上：如果你想要cookie记录最后的一次的话，你需要修改在subContainer.onclick事件时，每次给cookie存储时先清空该cookie，这样只保证存储最后一次即可，但是这样当级别超过2级后意义不大，因为点击二级以后的，刷新页面看不到结果。回头给cookie操作提供一个清除的方法，就非常容易实现这个问题。另外你对id的理解很正确可以在Firebug中看到。
如果我有localhost访问dwnTree.xml文件时，是可以访问；可是当输入192.168.1.44这个本地路径时，就无法访问了（报‘没有权限’这个错误）
补充上面：
（1）http://192.168.1.44:8080/images/dwnTree1.xml无法访问；
（2）http://localhost:8080/images/dwnTree1.xml可以访问；
while(true){alert(“oh,my god”);}
@#42楼，http://192.168.1.44:8080/images/dwnTree1.xml无法访问，是不是你服务器的配置问题啊，在http://192.168.1.44:8080/下有能访问的东西么？localhost相当于127.0.0.1，你的http://127.0.0.1:8080/images/dwnTree1.xml应该可以访问了
楼主大哥俺是菜鸟，能否说一下怎么给父菜单也加上超链接。
能否展开子菜单不重要。谢谢啦
为什么我的打开以后网页有错误啊 缺少对象 不知道改怎么改 秦歌 指教下啊
你是否在虚拟环境下浏览页面的？
是啊 就是在weblogic下面浏览的啊，但是页面报错 缺少对象
我在 http://www.drame.cn/list.asp?ProdId=0550 也下了一个树型的菜单 但是不能记忆 您给帮忙看看 要怎么改才能记忆 先谢谢了！～
我在ie和firefox下测了一下，没有发现你说的问题，会不会是你本身的代码有冲突之类的，或者找你周围了解JavaScript的朋友看看。
我就是把下的代码直接放到服务下面的啊 别的js代码不会影响到这个的啊
你是把代码放在什么下测试的啊
@菜鸟：你的给链接我看不到，其实就是利用cookie来记录用户当前的状态，如果本身设计的时候没有考虑，修改别人的东西还是比较麻烦的，你有兴趣可以自己试试。我用的测试代码和你用的一样，在apache下测试，我建议你还是找个了解JavaScript的人帮你看看吧，没准就是一个很小很小的细节问题。
大侠，感谢提供这么好的菜单啦，现在有个问题，在子只有1个子菜单并且又有子菜单时，树的图片会不显示，不知是什么原因
我使用这个，如果url中含有”&”这个符号时，在firefox3下会出错。如果把”&”encode为“%26”,就可以了，而且显示的链接也是正确的。这是不是一个bug?如果是的话，还请秦歌在程序时加入url encode，呵呵
好东西 收藏。。。。
万分无比的感谢秦歌。。。。。。。偶一直在努力找这么一款好用的菜单程序。。。
(404!Data downloaded unsuccessfully)这个是什么问题呢，帮我解决下
404表示文件不存在，这个应该是你的XML路径写的不对导致的吧，你仔细核对一下。
编码改为gb2312 出错 无法显示ing
有个问题，我的菜单结构储存在数据库里，我用程序把菜单写到xml文件中，都没有问题，每个父节点和子节点都带有自己的url并且传递一个对应的参数。但问题是显示到页面以后，点击某一个节点的时候，参数就变成了同级别节点的最后一个节点的参数，这样同级别的节点参数都一样了，（貌似url也是一样,但还好我url不需要变化，但需要参数变化）。drwtree.js调试了很长时间，也没搞明白，秦歌可以给我提供个解决方案吗 ？我很着急
我想点点击某个节点（比如说：我点击分类就得到分类这个名称）我随意的点击某个节点就获取那个名称，我点击展开就不获取这个名称 我只要点击有字的地方我就获取那个名称。我应该怎么改呢？谢谢！