步骤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. Vmware 困惑点记录和解释

    个人理解,如果有不同见解,麻烦请留言,一起进行探讨: DRS和HA是两个独立的功能. 准入控制只是保障有资源打开故障后迁移来的虚拟机,就算自身已经超过切换的阈值了,HA也是可以迁移过去的. 虚拟机允许 ...

  2. 用python批量修改音频ID3等标签

    使用的模块是eyeD3 一.eyeD3的安装 1.安装msgpack,不安装会报错distributed 1.21.8 requires msgpack, which is not installed ...

  3. 37. docker swarm docker service 的更新

    在service 运行的情况下 进行更新 1. 创建 名为 demo 的 overlay 网络 docker network create -d overlay demo 2. 创建 python-f ...

  4. jq监控滑动

    $(window).scroll(function () { if ($(window).scrollTop() == $(document).height() - $(window).height( ...

  5. catalina.out日志膨胀问题解决实例,日志门面commons-logging的实践

    声明:迁移自本人CSDN博客https://blog.csdn.net/u013365635 笔者在公司的时候,遇到一个问题,2个模块A.B Tomcat中的catalina.out及catalina ...

  6. 01 语言基础+高级:1-8 File类与IO流_day08【 File类、递归】

    day08[File类.递归] 主要内容 File类 递归 教学目标 能够说出File对象的创建方式 能够说出File类获取名称的方法名称 能够说出File类获取绝对路径的方法名称 能够说出File类 ...

  7. 模板编程里class 与 typename 的区别

    大部分情况下可以相互替换,但是某些情况class 无法替代typename,例如 template< class T, class U > std::shared_ptr<T> ...

  8. PowerShell创建 Profile

    profile主要用于个性化常用的函数.别名等等.每次加载powershell的时候,都会执行profile中的内容. 查看是否有profile: $profile 如果结果是false说明没有.则创 ...

  9. win10 python 3.7 pip install tensorflow

    环境: ide:pyCharm 2018.3.2 pyhton3.7 os:win10 64bit 步骤: 1.确认你的python有没有装pip,有则直接跳2.无则cmd到python安装目录下ea ...

  10. node/静态路由/express框架中的express.static()和app.use()

    此篇文章转载于 express框架中的express.static()和app.use() Express框架在使用app.use中传入express.static设置静态路由时,这个文件夹下的所有文 ...