dwnTree:可记忆的无限级树型菜单 1.1

简介

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

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

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

在线演示下载源码

使用

  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});
    
  3. 参数 说明
    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获取链接出错时,浏览器报“未定义”错误问题

标签:, , , ,

作者:秦歌,时间:2007-04-30 19:00,归纳于:Javascript & DOM & AJAX,订阅:RSS 2.0,引用:Trackback

有评论 36 条,发表一条评论 »

火星人路人甲说:2007-05-08 10:21 #1

打开时显示“navRoot未定义”

秦歌说:2007-05-08 12:49 #2

呵呵,菜单的XML数据是用AJAX获取的,所以本地运行需要在虚拟环境下才能运行,而不能直接打开,这两天我考虑一下增加用Javascript直接获取XML就可以直接在本地运行了,不过这样也会有问题,就是cookie无法使用,无法看到记忆效果。

唐歌说:2007-05-08 16:40 #3

感谢提供这么好的菜单 我最近正在找这个东西

jay说:2007-05-09 21:17 #4

秦歌你提供一个demo就可以解决了

秦歌说:2007-05-09 22:44 #5

什么意思?已经提供demo了啊
对一些人来说一个demo就足够了,不过对另外一些人说明还是很有一些必要的,呵呵。

dUcky说:2007-05-10 15:45 #6

感谢秦歌:)很好用。

另外是不是可以增加当前所在位置,比如点击一个链接以后给这个链接一个样式,变颜色或加粗。

对JS了解不多,求教。

秦歌说:2007-05-10 20:32 #7

现在不是点击一个链接(节点)后有反白效果么?如果你想修改这个效果,只需修改CSS文件dwnTree.css中这句.dwnTree a:hover,.dwnTree .active,.dwnTree .hover{color:#fff;background:#0a246a;}即可

dUcky说:2007-05-11 0:38 #8

收到~~原来是我自己把这条的背景色和颜色删了,原来是这个作用。

谢谢:)

火星人的fans说:2007-05-11 14:24 #9

嘿嘿,大概是你网站配色、字体等不够好,让人找不到链接或者区分不出来重点,你的网站太低调了,低调的太一致了,一眼看过去,似乎竟然没有重点。。。

火星人路人甲说:2007-06-04 17:02 #10

能否点击某子菜单后,其余有打开的子菜单会自动合上?

秦歌说:2007-06-07 13:40 #11

现在没有这个功能,回头我考虑考虑怎么来实现。

火星人路人_robin说:2007-06-19 16:56 #12

都是经典的东东啊,感谢各位大大,向各位大大学习!

火星人路人甲说:2007-07-08 12:51 #13

图片怎么不提供啊

秦歌说:2007-07-08 16:47 #14

什么意思?表情图片?

jay说:2007-07-09 17:49 #15

无标题文档

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,这是用户的要求,希望大哥帮帮我

jay说:2007-07-09 17:52 #16

这里发不了代码,郁闷呀大哥

火星人路人甲说:2007-07-12 14:22 #17

父菜单如果也要有联接该怎么改呢??,大哥谢谢告诉我一下

火星人路人甲说:2007-07-12 16:27 #18

让所有目录都带有url改怎么实现呢?

xdesign说:2007-07-17 12:02 #19

当菜单都打开的时候,JOIN的图片部分断开了..

秦歌说:2007-07-19 1:22 #20

To #17:开始设计的时候没有考虑到父菜单也有URL,主要原因是感觉展开和折叠子菜单的动作和打开链接同步进行会有使用上的冲突,特别是折叠子菜单的时候,完全可以用子菜单的第一个作为父菜单的链接来实现。如果你真的很需要,可能你要自己来修改JS代码了。

To xdesign:你说的情况在IE下有时候的确存在,这个可能是IE下CSS的一个Bug,我会考虑如何解决这个问题的,谢谢。

火星人路人甲说:2007-08-03 17:18 #21

谢谢,提供好东西

xidor说:2007-08-08 10:39 #22

谢谢你提供这个好树,运行是OK的,但是出现一个问题,url的参数只能带一个,带两个就不行,提示js出错.

就会出错!

火星人路人甲说:2007-08-10 16:25 #23

这个代码能否在不连接internet的环境中使用?

秦歌说:2007-08-13 19:36 #24

完全没有问题的,因为用了ajax,所以需要在本机用IIS或者apache配置一个本地环境就可以了。还有一个办法就是不用Ajax获取数据,直接用JS解析XML,这样就可以直接用浏览器打开看到效果,但是cookie应该无法生效的。

水星人路人甲说:2007-09-15 12:43 #25

我用asp写了个动态的XML文件,但格式依然是.asp的这样直接调用的时候没有反应,有没办法可以解决?

秦歌说:2007-09-15 12:51 #26

利用responseXML时,IE只能接受到.xml文件,如果xml不能以xml文件为结尾的,需要在服务器端声明是xml文件类型(Response.ContentType = “text/xml”),或者利用responseText获取,然后封装成XML

水星人路人甲说:2007-09-15 20:56 #27

谢了,我用Response.ContentType搞定的,实在是太感谢你了!

火星人路人甲说:2007-11-15 17:58 #28

为什么我下载后就用不起来,老报“0!Data downloaded unsuccessfully.”

秦歌说:2007-11-15 22:47 #29

那是因为你没有在虚拟环境下运行,因为要支持AJAX和Cookie,这是必须的,请仔细看说明啊。

火星人路人甲说:2008-01-01 13:13 #30

测试中。。。

火星人路人甲说:2008-03-26 20:51 #31

非常好的东西,支持!

火星人路人甲说:2008-05-31 22:05 #32

我用php的,怎么都运行不起来,

xml.php

<?php
header(’Content-Type:text/xml;charset=UTF-8′);
echo ”;
echo ”;
echo ”;
echo ”;
echo ”;
echo ”;
echo ”;
echo ”;
echo ”;
echo ”;
?>

下面是调用的,老是出错,出不来,

//

秦歌说:2008-06-01 1:16 #33

首先,你直接用浏览器打开xml.php,看看是不是正确的打印出了xml。

支持你说:2008-06-11 11:51 #34

秦歌,非常感谢你的东西,在使用时碰到一个问题,就是我想把树限制在200宽,限制成功了,但是如果标题比较长换行会把虚线截断,能否告知怎么解决,谢谢了!

小熊说:2008-06-12 10:47 #35

有个问题,我的xml很大,估计有5万个节点,每次全部载入都需要1分钟,受不了,能不能改成只显示父节点,双击父节点再显示子节点这种方式啊?

秦歌说:2008-06-12 15:32 #36

unfold这个参数就是用来控制显示时子节点是否展开的问题。我猜你想说的是,每次点击一个节点才去利用ajax获取这个节点的数据,以便在大量数据时能能快速呈现吧。如果这样做,需要前后端配合或者把xml拆分若干片段才行(这种方法在大量数据面前也不可行),不管哪种方法,需要做的修改还是很多的。

发表一条评论

您可以在下面评论内容中使用下列XHTML标签:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

您或许也喜欢看:

  1. Javascript的匿名函数
  2. Javascript风格要素(2)
  3. Javascript风格要素(1)
  4. Javascript的一种模块模式
  5. 检测大写锁定键(Caps Lock)是否被激活
  6. Javascript在页面加载时的执行顺序
  7. 《JavaScript高级程序设计》PK《JavaScript权威指南》(第四版)?
  8. IE ActvieX更新产生影响的解决办法
  9. 从未出家门超过48小时说起
回到页眉