做法步骤：
1、首先，下载dtree的相关文件，网址如下：http://destroydrop.com/javascripts/tree/dtree.zip
2、解压缩可以看到，dtree目录下包括这些文件：example01.html 、 dtree.js 、 api.html 、 dtree.css 和img目录。其中api.html是一些说明性文档（在融合frame的时候用的到）。
3、我将这些文件全部放在dtree文件夹里面，放在项目的java Web项目的WebRoot目录下面。
4、修改example01.html的代码
首先，index.jsp：主框架
<html>
<frameset rows="20%,60%,20%">
<frame src="rightbar.jsp" frameborder="1">
<frameset cols="20%,80%">
<frame src="leftbar.jsp" name="leftFrame" frameborder="1">
<frame src="rightbar.jsp" name="rightFrame" frameborder="1">
</frameset>
<frame src="rightbar.jsp">
</frameset>
</html>
其次，leftbar.jsp：
<head>
<link rel="StyleSheet" href="dtree/dtree.css" type="text/css" />
<!-- 引入css样式表 -->
<script type="text/javascript" src="dtree/dtree.js"></script>
<!-- 引入js脚本 -->
</head>
<body>
<div class="dtree/dtree">
<!--创建一个div层，指定class为“dtree”，此时该层就引用了dtree的样式 -->
<script type="text/javascript">
d = new dTree('d');//new一个树对象
d.config.target = "rightFrame";
d.add(0,-1,'My example tree');
d.add(1,0,'Node 1','index.jsp');
d.add(2,1,'点击右边显示','show.jsp');
d.add(3,0,'Node 2','index.jsp');
d.add(4,3,'Node 2.2','index.jsp');
d.add(5,0,'Node 3','index.jsp');
d.add(6,5,'Node 3.1','index.jsp');
d.add(7,5,'Node 3.2','index.jsp');
d.config.folderLinks=false;
document.write(d);
</script>
<script>
</div>
</body>
最后，完善上面代码中所用到的网页。
扫一扫
7664
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
