用dtree实现树形菜单 dtree使用说明

准备工作：
请从我们http://www.jb51.net/jiaoben/31974.html下载dtree.zip文件
dtree.zip压缩包介绍：
dtree是一个由JavaScript编写成的简单的树形菜单组件，目前免费并且开源。
目前有很多的树形菜单组件(比如ext)，dtree是一种简单易懂的js组件，
不需要复杂的操作即可生产，同时支持动态从数据库引入数据
解压后有以下几部分：
img文件夹： 包含树形菜单显示需要的图标
api.html ： 作者写的dtree帮助文档 　　
dtree.css： 树形菜单的样式
dtree.js ： js核心文件，代码都在其中
example01.html：树形菜单实例 dtree主要方法介绍：
dtree主要方法介绍：
add(parameters)：添加一个树节点，实际参数有9个add(id,pid,name,url,title,target,icon,iconOpen,open);
位置 参数别名 类型 功能
1 id int 节点自身的id(唯一)
2 pid int 节点的父节点id
3 name string 节点显示在页面上的名称
4 url string 节点的链接地址
5 title string 鼠标放在节点上显示的提示信息
6 target string 节点链接所打开的目标frame
7 icon string 节点关闭状态时显示的图标
8 iconOpen string 节点打开状态时显示的图标
9 open bool 节点第一次加载是否打开
注：dtree.js文件中是一些默认图片的路径，可以自己配置图片和路径，我下载的在44~57行
openAll()打开全部节点，可在树对象创建前或创建后调用
closeAll()关闭全部节点，可在树对象创建前或创建后调用
openTo(id,select)打开指定id的节点，可以传两个参数：
id 指定需要打开的节点的唯一id
　　select 是否让该节点处于选中状态
config配置
变量 类型 默认值 描述
target string 所有节点的target
folderLinks bool true 文件夹可被链接
useSelection bool true 节点可被选择高亮
useCookies bool true 树可以使用cookie记住状态
useLines bool true 创建带结构连接线的树
useIcons bool true 创建带有图表的树
useStatusText bool false 用节点名替代显示在状态栏的节点url
closeSameLevel bool false 同级节点只允许一个节点处于打开状态
inOrder bool false 加速父节点树的显示
例如：tree.config.closeSameLevel=true;表示打开某级节点时，该级其他处于打开状态的同级节点会被关闭
示例代码：


代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Tree</title>
<link rel="StyleSheet" href="dtree.css" type="text/css" /><!-- 引入css样式表 -->
<script type="text/javascript" src="dtree.js"></script><!-- 引入js脚本 -->
</head>
<body>
<div class="dtree"><!--创建一个div层，指定class为“dtree”，此时该层就引用了dtree的样式 -->
<script type="text/javascript">
d = new dTree('d');//new一个树对象
//设置树的节点及其相关属性
d.add(0,-1,'My example tree');
d.add(1,0,'Node 1','example01.html');
d.add(2,0,'Node 2','example01.html');
d.add(3,1,'Node 1.1','example01.html');
d.add(4,0,'Node 3','example01.html');
d.add(5,3,'Node 1.1.1','example01.html');
d.add(6,5,'Node 1.1.1.1','example01.html');
d.add(7,0,'Node 4','example01.html');
d.add(8,1,'Node 1.2','example01.html');
d.add(9,0,'My Pictures','example01.html','Pictures I\'ve taken over the years','','','img/imgfolder.gif');
d.add(10,9,'The trip to Iceland','example01.html','Pictures of Gullfoss and Geysir');
d.add(11,9,'Mom\'s birthday','example01.html');
d.add(12,0,'Recycle Bin','example01.html','','','img/trash.gif');
//config配置，设置文件夹不能被链接，即有子节点的不能被链接。
d.config.folderLinks=false;
document.write(d);
</script>
</div>
</body>
</html>

赞 (0)

相关推荐

  • 一个简单的js树形菜单

    一个简单的js树形菜单

    我练习一下,以免不时之需. 树形菜单不过就是把普通菜单重新排列一下,看起来像树形而已. 上图京东的菜单,给他多几个嵌套,然后添加收缩伸展事件,差不多就行了. 给个例子: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html>

  • 以前写的两个CSS树形菜单

    第一次写的CSS树形菜单比较简单,只有二级目录,javascript代码总共不到十行,主要是靠CSS中的包含写法来实现的.演示地址:(1)http://www.cnlei.org/mycode/csstreemenu/index.html(2)http://cnlei.iecn.net/mycode/csstreemenu/index.html下载链接:(1)http://www.cnlei.org/mycode/csstreemenu/csstreemenu.rar(2)http://cnle

  • Android提高之多级树形菜单的实现方法

    Android提高之多级树形菜单的实现方法

    一般来说在Android里要实现树形菜单,都是用ExpandableList(也有高手自己继承ListView或者LinearLayout来做),但是ExpandableList一般只能实现2级树形菜单.本文所述实例也依然使用ExpandableList,但是要实现的是3级树形菜单. 本文程序运行效果图如下图所示: 当用BaseExpandableListAdapter来实现二级树形菜单时,父项(getGroupView())和子项(getChildView())都是使用TextView.当要实

  • Java递归如何正确输出树形菜单

    Java递归如何正确输出树形菜单

    本文实例为大家分享了java递归输出树形菜单的具体代码,供大家参考,具体内容如下 首先我们要建立树节点的类: package com.tree; public class Node { private Integer id; private Integer parentId; private String name; private String link; public Integer getId() { return id; } public void setId(Integer id) {

  • CSS TreeMenu 二级树形菜单示例

    二级树形菜单示例:CSS TreeMenu a,a:visited {color:#333;text-decoration:none;} a:hover {color:#f60;} body,td {font:13px "Geneva","宋体", "Arial", "Helvetica",sans-serif;} ul,li {margin:0;padding:0;list-style:none;} h1,h2,h3,h4,

  • 无限级CSS树形菜单 Ver2.0

    新写的树:    1.解决了大数量加载过慢的问题    2.改进应用接口,可扩展性更强 先看效果吧,回头再写相关的使用参数文档:) 实例演示:    http://www.jb51.net/tools/cssTREE/index.html http://www.jb51.net/tools/cssTREE/index.big.html(大数据量(3000结点)效果演示) 代码下载:    http://www.jb51.net/tools/cssTREE/lTREE.rar 使用说明:    待

  • winform树形菜单无限级分类实例

    winform树形菜单无限级分类实例

    以下实现的是一个树形菜单,每一级对应一类窗口,点击叶子节点时弹出新的窗口: 用递归和委托实现的. 第一部分功能-创建树形菜单 复制代码 代码如下: /// <summary>         /// 创建树形菜单         /// </summary>         public void AddTree(int ParentID, TreeNode pNode)         {             // 数据库名字字段             string str

  • JS无限极树形菜单,json格式、数组格式通用示例

    修改了一下数据格式,是json和数组或者混合型的数据都通用,不用特定key等 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&g

  • 轻松学习jQuery插件EasyUI EasyUI创建树形菜单

    轻松学习jQuery插件EasyUI EasyUI创建树形菜单

    一.EasyUI使用标记创建树形菜单 一个树形菜单(Tree)可以从标记创建.easyui 树形菜单(Tree)也可以定义在 <ul> 元素中.无序列表的 <ul> 元素提供一个基础的树(Tree)结构.每一个 <li> 元素将产生一个树节点,子 <ul> 元素将产生一个父树节点. 创建树形菜单(Tree) <ul class="easyui-tree"> <li> <span>Folder</s

  • json+jQuery实现的无限级树形菜单效果代码

    json+jQuery实现的无限级树形菜单效果代码

    本文实例讲述了json+jQuery实现的无限级树形菜单效果代码.分享给大家供大家参考.具体如下: 这里演示json树形菜单,JS无级树树形菜单,引入了jQuery插件,使用递归实现获取无级树数据并生成DOM结构,可以在JSON数据里 扩展无限级 看结构就明白. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-json-tree-style-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &quo

随机推荐