步骤1:官网下载dtree.zip包,官网地址:http://destroydrop.com/javascripts/tree/,文件包括dtree.css,dtree.js和api.html和例子;

步骤2:根据example01.html代码修改自己需要的菜单,示例代码如下:

<span style="font-size:14px;"><span style="white-space: pre;">	</span><script type="text/javascript">
<!-- d = new dTree('d'); 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'); document.write(d); //-->
</script></span>

步骤3:运行效果图如下:

步骤4:要修改或添加图标,可以修改dtree.js代码,如下这段就是图标设置。

	this.icon = {

		root				: 'img/base.gif',

		folder			: 'img/folder.gif',

		folderOpen	: 'img/folderopen.gif',

		node				: 'img/page.gif',

		empty				: 'img/empty.gif',

		line				: 'img/line.gif',

		join				: 'img/join.gif',

		joinBottom	: 'img/joinbottom.gif',

		plus				: 'img/plus.gif',

		plusBottom	: 'img/plusbottom.gif',

		minus				: 'img/minus.gif',

		minusBottom	: 'img/minusbottom.gif',

		nlPlus			: 'img/nolines_plus.gif',

		nlMinus			: 'img/nolines_minus.gif'

	};

注意:树形结构根节点的父id必须为-1,如果要设置其他值请修改dtree.js。

dtree加载菜单基本使用方法的更多相关文章

  1. [Q]手动加载菜单方法

    一般情况下,安装程序会自动安装依云软件菜单,但可能由于某些原因未能自动安装的话,您可以手动加载菜单,步骤如下: 在AoutCAD命令行输入"CUILOAD",会弹出"加载 ...

  2. C#遍历XML文件动态加载菜单

    通过遍历XML文件动态加载菜单,顺便利用WebBrowser控件实现一个简单的桌面浏览器 效果如下: 代码如下: XMLFile1.xml <?xml version="1.0&quo ...

  3. 实战android菜单项之XML加载菜单与动态菜单项[转]

    原文地址:http://blog.csdn.net/kaiwii/article/details/7767225 自定义android应用程序的菜单项首先要知道切入点.经过学习,知道主要是两个Acti ...

  4. Vue + Element UI 实现权限管理系统 前端篇(十):动态加载菜单

    动态加载菜单 之前我们的导航树都是写死在页面里的,而实际应用中是需要从后台服务器获取菜单数据之后动态生成的. 我们在这里就用上一篇准备好的数据格式Mock出模拟数据,然后动态生成我们的导航菜单. 接口 ...

  5. Vue + Element UI 实现权限管理系统(动态加载菜单)

    动态加载菜单 之前我们的导航树都是写死在页面里的,而实际应用中是需要从后台服务器获取菜单数据之后动态生成的. 我们在这里就用上一篇准备好的数据格式Mock出模拟数据,然后动态生成我们的导航菜单. 接口 ...

  6. 在mvc中动态加载菜单

    最近做了一个项目, 要在客户端动态的显示菜单,也就是这些菜单是保存在数据库中的, 在客户端动态加载菜单,这样做的好处很明显,就是菜单很容易修改,直接在后台进行维护,再也不会直接在前面的 视图页面中进行 ...

  7. Excel催化剂开源第7波-VSTO开发中Ribbon动态加载菜单

    在VS开发环境中,特别是VSTO的开发,微软已经现成地给开发者准备了设计器模式的功能区开发,相对传统的VBA.ExcelDna和其他方式的COM加载项开发来说,不需要手写xml功能区,直接类似拖拉窗体 ...

  8. c#动态加载卸载DLL的方法

    这篇文章介绍了c#动态加载卸载DLL的方法,有需要的朋友可以参考一下 c#中通过反射可以方便的动态加载dll程序集,但是如果你需要对dll进行更新,却发现.net类库没有提供卸载dll程序集的方法.在 ...

  9. WEB启动时就加载servlet的dopost方法

    web启动的时候可以加载servlet的init方法,无法加载dopost方法,如果你需要什么内容在启动的时候执行,可以将内容放到init方法里面,dopost方法,是在客户端使用post请求的时候才 ...

随机推荐

  1. Eclipse 配置spring boot pom.xml第1行报错的两种解决办法

    现象 通过spring boot项目导入eclipse后,pom.xml文件的第一行总是报错.这里使用的spring版本是2.1.5,2.1.4以前的版本等其他版本的spring没有这个问题. 解决办 ...

  2. yum无法安装nginx,报错内容为1:nginx-1.14.2-1.el7_4.ngx.x86_64: [Errno 5] [Errno 2] 没有那个文件或目录

    yum命令安装nginx时报错:1:nginx-1.14.2-1.el7_4.ngx.x86_64: [Errno 5] [Errno 2] 没有那个文件或目录 一.问题原因:Python版本的问题 ...

  3. Python笔记_第四篇_高阶编程_进程、线程、协程_3.进程vs线程

    1.多任务的实现原理: 通常我们会设计Mater-Workder模式,Master负责分配任务,Worker负责执行任务,因此多任务环境下,通常是一个Master,多个Worker 2.多进程: 主进 ...

  4. Python笔记_第一篇_面向过程_第一部分_3.进制、位运算、编码

    通过对内存这一个部分的讲解,对编程会有一个相对深入的认识.数据结构是整个内存的一个重要内容,那么关于数据结构这方面的问题还需要对进制.位运算.编码这三个方面再进行阐述一下.前面说将的数据结构是从逻辑上 ...

  5. Delphi调用c++写的dll (me)

    unit Unit1; interface uses Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants, System ...

  6. java学习——内部类(二)

    使用内部类 内部类一共有三种使用方法: 1.在外部类中使用内部类 在外部类中使用内部类,与平常使用内部类没有区别,可以直接通过内部类的类名来定义变量,通过new调用内部类的构造方法来创建实例. 唯一的 ...

  7. Linux 配置单机yum源--ISO镜像做源

    前提:防火墙关闭.SElinus关闭 1.上传ISO镜像(建议传到home目录下) [root@localhost home]# ls iso/ CentOS-.iso 2.挂载目录 [root@lo ...

  8. eclipse Java EE 与 Java 区别

    1. 综述 eclipse IDE 一般来说有三种可切换的模式 Java EE Java 调试 可直接下拉至底部看两者的比较. 2. Java Java 是带有用户界面的 基本IDE ,缺少数据库和w ...

  9. 完成在本机远程连接HBase进行数据增删改查

    1.进行hbase与本机远程连接测试连接 1.1 修改虚拟机文件hbase-site.xml(cd/usr/local/hbase/conf)文件,把localhost换成你的虚拟机主机名字 1.2修 ...

  10. oracle 学习(四)游标

    显式游标 隐式游标:如果在PL/SQL程序段中使用SELECT语句进行操作,PL/SQL 会隐含的处理游标定义,即为隐式游标.这种游标不需要像显式那样声明,也不必打开关闭. CREATE OR REP ...