一棵很好的树:可记忆的无限级树形菜单 xml+js

时间：2022-08-26 20:49:46


简介

dwnTree是一个可记忆的无限级树型菜单，它的特点如下：

  1. 菜单数据采用XML格式，依据XML文档树结构生成树型菜单，可在XML文档中设置子菜单在加载时是否展开和菜单链接的target方式
  2. 可启用记录菜单的打开状态（需要Cookie的支持）,记住用户最后的菜单操作状态
  3. 支持WEB标准，考虑语义化，支持IE5.5+，Firefox，Opera
  4. 使用简单，同一页面无限次使用

可以任意使用（因为涉及到cookie和ajax获取数据，本地请在虚拟环境下打开），请保留说明和链接，谢谢！

  1. 在线演示 http://dancewithnet.com/lab/2007/04/dwntree/
  2. 下载源码 http://dancewithnet.com/lab/2007/04/dwntree/dwntree.rar

    http://dl2.csdn.net/down4/20070802/02152038715.rar

使用

  1. 下载源码，把图片、JS和CSS文件放入到相应的文件夹中
  2. 修改XML文件，建立需要的XML文档，比如dwnTree.xml
  3. 在HTML文档中加入如下代码，用以加载Javascript和CSS文件 
    <style type="text/css">
<!--
@import "dwnTree.css";
-->
</style>
<script type="text/javascript" src="dwnTree.js"></script>
  4. 在页面需要加入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>

参数

  1. dwnTree XML： 
    <item caption="关注" unfolded="">
    <item caption="互联网 &amp; IT" url="" target="_blank" />
    <item caption="电影 &amp; 电视" url="" target="_blank" />
</item>
    参数 值 说明
    caption 菜单名  
    unfold 空值或unfold 控制其子菜单加载时是否展开，为空时是不展开
    url 菜单的链接 合法的URL
    target 菜单链接的打开方式  
  2. 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传输状态  

问题

  1. 以dwnTree来庆祝2007年的劳动节，祝大家劳动节快乐
  2. 因为劳动节需要回家的原因，匆忙推出，未经非常仔细的测试，只在IE5.5、IE6、IE7、Firefox2、Oprea9下粗略测试
  3. 肯定会存在一些BUG和不足，请留言指出，我非常乐意看到建议，谢谢

更新记录

  1. 2007.04.30 发布1.0版本
  2. 2007.07.01 发布1.1版本，解决当未在虚拟环境下运行或者Ajax获取链接出错时，浏览器报“未定义”错误问题
 原文件: http://dancewithnet.com/2007/04/30/dwntree/
标签：

相关文章