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();">全部展开</a> | <a href="javascript: hovertreemenu.closeAll();">全部收起</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" 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/">hovertreemenu</a> &raquo; <a href="http://hovertree.com/menu/javascript/">JavaScripts</a> &raquo; <a href="http://hovertree.com/hvtart/bjae/pmdo4lfd.htm">Tree</a></h1>

 <h2>何问起树形菜单</h2>

 <div class="dtree">

     <p><a href="javascript: hovertreemenu.openAll();">全部展开</a> | <a href="javascript: hovertreemenu.closeAll();">全部收起</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/">&copy;何问起</a></p>

 </body>

 </html>

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

js无限级树菜单的更多相关文章

EasyUI 树菜单
EasyUI 树菜单通过ssm框架项目实现EasyUI 的树菜单的单选,复选,异步加载树,同步加载树和树权限控制等功能. 本章知识点效果图: 需求:通过SSM框架,实现EasyUI 树菜单的单选, ...
vue+element-ui实现无限级动态菜单树
使用vue+element-ui实现无限级动态菜单该案例实现主要使用递归的思想,递归对新人来容易迷惑的是自己调用自己,直到满足条件为止,接下来我们就一步一步实现一个动态多级菜单vue组件搭建项目并 ...
下拉的DIV+CSS+JS二级树型菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
构造无限级树的框架套路，附上python/golang/php/js实现
目录前言需求数据结果框架递归框架迭代框架递归框架实现 python golang php js 迭代框架实现 python golang php js 前言框架思维非常重要,和语言无 ...
JS动态级联菜单
JS动态级联菜单是前端常用的一个功能,特此抽时间研究了下,附上代码 <html> <head> <meta charset="utf-8" /> ...
JQUERY实现的小巧简洁的无限级树形菜单
JQUERY实现的小巧简洁的无限级树形菜单,可用于后台或前台侧栏菜单!兼容性也比较好. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra ...
bootstrap table 父子表实现【无限级】菜单管理功能
bootstrap table 父子表实现[无限级]菜单管理功能实现效果前端代码 <%@ page language="java" import="java.u ...
C#动态加载树菜单
在做权限系统的时候,需要有一个树形的菜单.下图就是一个树形菜单的样式但问题是,我们可以实现写死的树形菜单.什么是写死的?就是在前台代码中写好要加载的树形菜单是什么样子的.但是我们权限系统的要求是动态 ...
JS 下拉菜单
HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...

随机推荐

Loadrunner时间函数、用时间生成订单编号例子
Loadrunner中取时间函数.用时间函数生成订单编号例子: <如要转载,请注明网络来源及作者:Cheers_Lee> 问题的提出: (1)有时候在Loadrunner中用C语言设计脚本 ...
FreeBSD_11-系统管理——{Part_7 - AUDIT}
相关概念 EVENT 事件,审计系统计录的对象,包括用户登陆.网络与文件操作等各方面 CLASS 类,对具有相同或类似属性的事件的分組 RECORD 记录,审计系统生成的日志中的每一条信息 TRAIL ...
Distributed3：SQL Server 创建分布式数据库
分布式数据库的优势是将IO分散在不同的Physical Disk上,每次查询都由多台Server的CPU,I/O共同负载,通过各节点并行处理数据来提高性能,劣势是消耗大量的网络带宽资源,管理难度大.在 ...
[WPF]带下拉列表的文本框
控件我已经弄好了,代码比较多,所以没办法全面介绍. 一开始我是直接继承Selector类来实现,做是做出来了,不过发现性能不太好.于是,我就想着自己来实现.毕竟我是做给自己用的,也不考虑过多的东西,也 ...
EntityFramework之孩子删除（四）（你以为你真的懂了？）
前言从表面去看待事物视线总有点被层层薄雾笼罩的感觉,当你静下心来思考并让指尖飞梭于键盘之上,终将会拨开浓雾见青天.这是我切身体验. 在EF关系配置中,我暂且将主体对象称作为父亲,而依赖对象称作为孩子 ...
《JavaScript语言精粹》小记
一.前言以下内容均摘自<JavaScript语言精粹>一书,本人在读这本书时,发现作者诠释JavaScript很犀利,特别是数组部分,固记录下来,想和大家分享下. 随笔主要包含两大部分: ...
MVVM 开发的几种模式讨论（WPF）
在WPF系(包括SL,WP或者Win8)应用开发中,MVVM是个老生常谈的问题.初学者可能不会有感觉,但当你写一个核心逻辑能在各种平台上无缝移植,而只需改改UI的时候,那种快感是无法用语言来形容的. ...
RHEL 6.3 详细安装教程
以前刚接触linux时,什么都不懂,为了学习,在电脑上安装双系统(原系统为Win7),吃过不少苦头,在网上搜教程,很多都是语焉不详,导致安装过程中战战兢兢.最近朋友面试运维,面试官有考他对linux安 ...
android 布局使用 viewPager 时，如何解决和子页面长按滑动冲突问题
使用 viewPager 时,如何解决和子页面长按滑动冲突问题. 我的问题原型: 这个问题,我相信遇到的人会比较少,我是在一个 viewPager 中,其中一个 fragment 中实现了 ...
Lucene.net初探
引言在分析同事开发的客户端搜索项目时注意到,搜索的关键是索引,而提到索引就不得不提Lucene.net,思路就是将需要搜索内容写入索引,客户端自己或局域网其他机器搜索时直接搜索索引,从而查看到你共享 ...

js无限级树菜单

js无限级树菜单的更多相关文章

随机推荐

热门专题