下载地址:
效果:
核心代码:
<%@ page contentType="text/html; charset=UTF-8"%>
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title>Dtree Sample</title>
<link rel="stylesheet" rev="stylesheet" href="web/css/style.css" type="text/css" />
<link rel="stylesheet" rev="stylesheet" href="web/css/dtree.css" type="text/css" />
<script src="web/js/dtree.js" type="text/javascript"></script>
</head>
<body>
<div id="treeDiv">
<div class="dtree">
<p><a href="javascript: d.openAll();">全展开</a> | <a href="javascript: d.closeAll();">全收起</a></p>
<script type="text/javascript">
<!--
d = new dTree('d');
d.add(0,-1,'Root');
d.add(1,0,'1','web/jsp/1.jsp','显示1.jsp','rightFrame','','',false);
d.add(2,0,'2','web/jsp/2.jsp','显示2.jsp','rightFrame','','',false);
d.add(3,0,'3','web/jsp/3.jsp','显示3.jsp','rightFrame','','',false);
d.add(4,0,'4','web/jsp/4.jsp','显示4.jsp','rightFrame','','',false);
d.add(5,1,'李逵','test?page=likui','显示李逵','rightFrame','','',false);
d.add(6,1,'宋江','test?page=sj','显示宋江','rightFrame','','',false);
d.add(7,1,'鲁智深','test?page=lzs','显示鲁智深','rightFrame','','',false);
document.write(d);
//-->
</script>
</div>
</div>
<div id="contentDiv">
<iframe id="index_mainframe" name="rightFrame" class="index_mainframe" src="web/jsp/blank.jsp" frameborder="0" scrolling="no" ></iframe>
</div>
</body>
</html>
dtree的css,js代码都不复杂,如果对其稍加改造,可以做出更眩的东西来。