js无限级树菜单

以前做网站，树形菜单一般都很简单，自己定义风格样式，简单的js控制，后来原来网上很多文章都在讨论Js树型菜单，看了几个实例，发现这个树比较简单好用。

http://hovertree.com/texiao/js/9.htm
这个无限级可刷新Js树型菜单 menuTree
1、可设置无限级菜单
2、不必使用框架
3、可刷新，多页面内跳转不会影响菜单
4、可限级创造子树
5、支持目前主流浏览器：IE5，6，7，8，9，10，11，酷睿，火狐等
6、节点图片可设置切换图片效果

点击这里下载 http://hovertree.com/down/h/treemenu.htm

解压缩treemenu.rar 包。
dtree目录下包括这些文件：example01.html 、 hovertreedtree.js 、 api.html 、 hovertreedtree.css 和img目录
注意：除了api.html之外，其它的文件都是必须拷贝的。api.html是dtree的函数介绍。

打开example01.html文件 http://hovertree.com/texiao/js/9.htm

<div class="dtree"><p><a href="javascript: hovertreemenu.openAll();" rel="external nofollow"  rel="external nofollow" >全部展开</a> | <a href="javascript: hovertreemenu.closeAll();" rel="external nofollow"  rel="external nofollow" >全部收起</a></p><script type="text/javascript">
<!--var hovertreemenu = new dTree('hovertreemenu');hovertreemenu.add(0, -1, '何问起树形菜单');
hovertreemenu.add(1,0,'节点 1','http://hovertree.com');
hovertreemenu.add(2, 0, '节点 2', 'http://tool.hovertree.com/');
hovertreemenu.add(3, 1, '节点 1.1', 'http://hovertree.com/hvtart/bjae/pmdo4lfd.htm');
hovertreemenu.add(4, 0, '节点 3', 'http://hovertree.com/hvtart/bjae/q3etb2qv.htm');
hovertreemenu.add(5, 3, '节点 1.1.1', 'http://hovertree.com/hvtart/bjae/l59bo21o.htm');
hovertreemenu.add(6, 5, '节点 1.1.1.1', 'http://hovertree.com/hvtart/bjae/lhnydfey.htm');
hovertreemenu.add(7, 0, '节点 4', 'http://hovertree.com/hvtart/bjae/k4085k8v.htm');
hovertreemenu.add(8, 1, '节点 1.2', 'http://hovertree.com/hvtart/bjae/m8wrrmrw.htm');
hovertreemenu.add(9, 0, '图片', 'http://hovertree.com/hvtimg/', 'Pictures I\'ve taken over the years', '', '', 'http://hovertree.com/texiao/js/9/img/imgfolder.gif');
hovertreemenu.add(10, 9, '欢迎您！', 'http://hovertree.com/hvtart/bjae/onxw4ahp.htm', 'Pictures of Gullfoss and Geysir');
hovertreemenu.add(11, 9, '雪花飞舞', 'http://hovertree.com/hvtart/bjae/79mtsd1t.htm');
hovertreemenu.add(12, 0, '回收站', 'http://hovertree.com/texiao/', '', '', 'http://hovertree.com/texiao/js/9/img/trash.gif');document.write(hovertreemenu);//-->
</script></div>

API：
http://hovertree.com/texiao/js/9/api.htm

d.add(0,-1,’My example tree’);
这一句为树添加了一个根节点，显示名称为’My example tree’ d.add(1,0,’Node 1’,’example01.html’);
这一句在树的根节点下面添加了一个子节点。（d.add（）方法的参数具体含义可参见api.html文件）
常用的：
第一个参数，表示当前节点的ID
第二个参数，表示当前节点的父节点的ID,根节点的值为 -1
第三个参数，节点要显示的文字
第四个参数，节点的Url
第五个参数，鼠标移至该节点时节点的Title
第六个参数，节点的target
第七个参数，用做节点的图标,节点没有指定图标时使用默认值
第八个参数，用做节点打开的图标,节点没有指定图标时使用默认值
第九个参数，判断节点是否打开

属性菜单使用说明

函数

add()
向树里添加一个节点
只能在树被创建之前调用.
必须 id, pid, name
参数
名字类型描述
id Number 唯一的ID号
pid Number 判定父节点的数字,根节点的值为 -1
name String 节点的文本标签
url String 节点的Url
title String 节点的Title
target String 节点的target
icon String 用做节点的图标,节点没有指定图标时使用默认值
iconOpen String 用做节点打开的图标,节点没有指定图标时使用默认值
open Boolean 判断节点是否打开
例子
mytree.add(1, 0, ’My node’, ’node.html’, ’node title’, ’mainframe’, ’img/musicfolder.gif’);

openAll()
打开所有节点
可在树被创建以前或以后调用.
例子
mytree.openAll();

closeAll()
关闭所有节点
可在树被创建以前或以后调用.
例子
mytree.closeAll();

openTo()
Opens the tree to a certain node and can also select the node.
只能在树被创建以后调用..
参数
名字类型描述
id Number 节点唯一的ID号
select Boolean 判断节点是否被选择
例子
mytree.openTo(4, true);

配置
变量类型默认值描述
target String true 所有节点的target
folderLinks Boolean true 文件夹可链接
useSelection Boolean true 节点可被选择(高亮)
useCookies Boolean true 树可以使用cookies记住状态
useLines Boolean true 创建带线的树
useIcons Boolean true 创建带有图标的树
useStatusText Boolean false 用节点名替代显示在状态栏的节点url
closeSameLevel Boolean false 只有一个有父级的节点可以被展开,当这个函数可用时openAll() 和 closeAll() 函数将不可用
inOrder Boolean false 如果父级节点总是添加在子级节点之前,使用这个参数可以加速菜单显示.
例子
mytree.config.target = “mytarget”;

完整代码：

 <!DOCTYPE html>
 <html>
 <head>
     <title>JS树形菜单Tree - 何问起</title>
     <link rel="StyleSheet" href="http://hovertree.com/texiao/js/9/hovertreedtree.css" rel="external nofollow"  type="text/css" />
     <script type="text/javascript" src="http://hovertree.com/texiao/js/9/hovertreedtree.js"></script>
     <style>body{font-family:'Times New Roman', Times, serif}a{color:black}</style>
 </head> <body> <h1><a href="http://hovertree.com/" rel="external nofollow" >hovertreemenu</a> &raquo; <a href="http://hovertree.com/menu/javascript/" rel="external nofollow" >JavaScripts</a> &raquo; <a href="http://hovertree.com/hvtart/bjae/pmdo4lfd.htm" rel="external nofollow" >Tree</a></h1> <h2>何问起树形菜单</h2> <div class="dtree">     <p><a href="javascript: hovertreemenu.openAll();" rel="external nofollow"  rel="external nofollow" >全部展开</a> | <a href="javascript: hovertreemenu.closeAll();" rel="external nofollow"  rel="external nofollow" >全部收起</a></p>     <script type="text/javascript">
         <!--         var hovertreemenu = new dTree('hovertreemenu');         hovertreemenu.add(0, -1, '何问起树形菜单');
         hovertreemenu.add(1,0,'节点 1','http://hovertree.com');
         hovertreemenu.add(2, 0, '节点 2', 'http://tool.hovertree.com/');
         hovertreemenu.add(3, 1, '节点 1.1', 'http://hovertree.com/hvtart/bjae/pmdo4lfd.htm');
         hovertreemenu.add(4, 0, '节点 3', 'http://hovertree.com/hvtart/bjae/q3etb2qv.htm');
         hovertreemenu.add(5, 3, '节点 1.1.1', 'http://hovertree.com/hvtart/bjae/l59bo21o.htm');
         hovertreemenu.add(6, 5, '节点 1.1.1.1', 'http://hovertree.com/hvtart/bjae/lhnydfey.htm');
         hovertreemenu.add(7, 0, '节点 4', 'http://hovertree.com/hvtart/bjae/k4085k8v.htm');
         hovertreemenu.add(8, 1, '节点 1.2', 'http://hovertree.com/hvtart/bjae/m8wrrmrw.htm');
         hovertreemenu.add(9, 0, '图片', 'http://hovertree.com/hvtimg/', 'Pictures I\'ve taken over the years', '', '', 'http://hovertree.com/texiao/js/9/img/imgfolder.gif');
         hovertreemenu.add(10, 9, '欢迎您！', 'http://hovertree.com/hvtart/bjae/onxw4ahp.htm', 'Pictures of Gullfoss and Geysir');
         hovertreemenu.add(11, 9, '雪花飞舞', 'http://hovertree.com/hvtart/bjae/79mtsd1t.htm');
         hovertreemenu.add(12, 0, '回收站', 'http://hovertree.com/texiao/', '', '', 'http://hovertree.com/texiao/js/9/img/trash.gif');         document.write(hovertreemenu);         //-->
     </script> </div> <p><a href="http://hovertree.com/" rel="external nofollow" >&copy;何问起</a></p> </body> </html>

web前端： http://www.cnblogs.com/jihua/p/webfront.html

个人收藏笔记记录

开通VIP