您的位置:首页 > 其它

dtree加载菜单基本使用方法

2016-05-12 10:56 323 查看
步骤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。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: