`
jiayj198609
  • 浏览: 149816 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

常用的三种树形菜单->很实用的

SybaseASP.netOracleVBScriptLinux 
阅读更多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<style type="text/css">
a {text-decoration:none;}
a,a:visited {color:#000;background:inherit;}
body {margin:0;padding:20px;font:12px tahoma,宋体,sans-serif;}
dt {font-size:22px;font-weight:bold;margin:0 0 0 15px;}
dd {margin:0 0 0 15px;}
h4 {margin:0;padding:0;font-size:18px;text-align:center;}
p {margin:0;padding:0 0 0 18px;}
p a,p a:visited {color:#00f;background:inherit;}
/*CNLTreeMenu Start*/
.CNLTreeMenu img.s {cursor:pointer;vertical-align:middle;}
.CNLTreeMenu ul {padding:0;}
.CNLTreeMenu li {list-style:none;padding:0;}
.Closed ul {display:none;}
.Child img.s {background:none;cursor:default;}
#CNLTreeMenu1 ul {margin:0 0 0 17px;}
#CNLTreeMenu1 img.s {width:20px;height:15px;}
#CNLTreeMenu1 .Opened img.s {background:url(http://www.zzsky.cn/effect/images/treemenu/opened1.gif) no-repeat 0 0;}
#CNLTreeMenu1 .Closed img.s {background:url(http://www.zzsky.cn/effect/images/treemenu/closed1.gif) no-repeat 0 0;}
#CNLTreeMenu1 .Child img.s {background:url(http://www.zzsky.cn/effect/images/treemenu/child1.gif) no-repeat 3px 5px;}
#CNLTreeMenu2 ul {margin:0 0 0 17px;}
#CNLTreeMenu2 img.s {width:17px;height:15px;}
#CNLTreeMenu2 .Opened img.s {background:url(http://www.zzsky.cn/effect/images/treemenu/opened2.gif) no-repeat 4px 6px;}
#CNLTreeMenu2 .Closed img.s {background:url(http://www.zzsky.cn/effect/images/treemenu/closed2.gif) no-repeat 3px 6px;}
#CNLTreeMenu2 .Child img.s {background:url(http://www.zzsky.cn/effect/images/treemenu/child2.gif) no-repeat 3px 5px;}
#CNLTreeMenu3 ul {margin:0 0 0 17px;}
#CNLTreeMenu3 img.s {width:34px;height:18px;}
#CNLTreeMenu3 .Opened img.s {background:url(http://www.zzsky.cn/effect/images/treemenu/opened3.gif) no-repeat 0 1px;}
#CNLTreeMenu3 .Closed img.s {background:url(http://www.zzsky.cn/effect/images/treemenu/closed3.gif) no-repeat 0 1px;}
#CNLTreeMenu3 .Child img.s {background:url(http://www.zzsky.cn/effect/images/treemenu/child3.gif) no-repeat 13px 2px;}
/*CNLTreeMenu End*/
/*Temp CSS for View Demo*/
#CNLTreeMenu1,#CNLTreeMenu2,#CNLTreeMenu3 {float:left;width:249px;border:1px solid #99BEEF;background:#D2E4FC;color:inherit;margin:3px;padding:3px;}
#CNLTreeMenu1,#CNLTreeMenu2 {padding-bottom:15px;}
.ViewCode {clear:both;border:1px solid #FFB900;background:#FFFFCC;color:inherit;margin:3px;padding:3px;}
.ViewCode h6 {color:#00f;}
</style>
<title>无限级树形菜单- java中文网:www.javaweb.cc</title>
</head>
<body>

<div class="CNLTreeMenu" id="CNLTreeMenu1">
<h4>CNL Tree Menu1</h4>
<p><a id="AllOpen_1" href="#" onClick="MyCNLTreeMenu1.SetNodes(0);Hd(this);Sw('AllClose_1');">全部展开</a><a id="AllClose_1" href="#" onClick="MyCNLTreeMenu1.SetNodes(1);Hd(this);Sw('AllOpen_1');" style="display:none;">全部折叠</a></p>
<ul>
<li class="Opened"><a href="http://www.zzsky.cn">Zzsky.Cn</a>
<ul>
<li><a href="#1">技术区</a>
<ul>
<li><a href="#">网页技术</a>
<ul>
<li class="Child"><a href="#">JavaScript</a></li>
<!--Child Node-->
<li class="Child"><a href="#">HTML/XHTML/CSS</a></li>
<li class="Child"><a href="#">Ajax</a></li>
<li class="Child"><a href="#">网页制作工具</a></li>
<li class="Child"><a href="#">设计/图形</a></li>
<li class="Child"><a href="#">Flash/多媒体</a></li>
<li class="Child"><a href="#">VML/Web3D</a></li>
</ul>
</li>
<!--Sub Node 3-->
<li><a href="#">Web编程</a>
<ul>
<li class="Child"><a href="#">Java</a></li>
<!--Child Node-->
<li class="Child"><a href="#">.Net</a></li>
<li class="Child"><a href="#">ASP/VBScript</a></li>
<li class="Child"><a href="#">PHP</a></li>
<li class="Child"><a href="#">Perl/Python</a></li>
<li class="Child"><a href="#">Web综合/开源</a></li>
</ul>
</li>
<!--Sub Node 3-->
<li><a href="#">数据库</a>
<ul>
<li class="Child"><a href="#">Access/SQLServer</a></li>
<!--Child Node-->
<li class="Child"><a href="#">MySQL/PostgreSQL</a></li>
<li class="Child"><a href="#">Oracle/DB2/Sybase</a></li>
</ul>
</li>
<!--Sub Node 3-->
<li><a href="#">服务器</a>
<ul>
<li class="Child"><a href="#">Windows/IIS</a></li>
<!--Child Node-->
<li class="Child"><a href="#">Unix/Linux/Apache</a></li>
<li class="Child"><a href="#">应用服务器</a></li>
</ul>
</li>
<!--Sub Node 3-->
</ul>
</li>
<!--Sub Node 2-->
<li><a href="#1">二级目录</a>
<ul>
<li><a href="#">三级目录</a>
<ul>
<li><a href="#">四级目录</a>
<ul>
<li><a href="#">五级目录</a>
<ul>
<li><a href="#">......</a>
<ul>
<li><a href="#">第n级目录</a>
<ul>
<li class="Child"><a href="#">叶结点1</a></li>
<!--Child Node-->
<li class="Child"><a href="#">叶结点2</a></li>
<li class="Child"><a href="#">叶结点3</a></li>
</ul>
</li>
<!--Sub Node n -->
</ul>
</li>
<!--Sub Node 6 -->
</ul>
</li>
<!--Sub Node 5 -->
</ul>
</li>
<!--Sub Node 4-->
</ul>
</li>
<!--Sub Node 3-->
</ul>
</li>
<!--Sub Node 2-->
<li><a href="#1">二级目录</a>
<ul>
<li><a href="#">三级目录</a>
<ul>
<li><a href="#">四级目录</a>
<ul>
<li><a href="#">五级目录</a>
<ul>
<li><a href="#">......</a>
<ul>
<li><a href="#">第n级目录</a>
<ul>
<li class="Child"><a href="#">叶结点1</a></li>
<!--Child Node-->
<li class="Child"><a href="#">叶结点2</a></li>
<li class="Child"><a href="#">叶结点3</a></li>
</ul>
</li>
<!--Sub Node n -->
</ul>
</li>
<!--Sub Node 6 -->
</ul>
</li>
<!--Sub Node 5 -->
</ul>
</li>
<!--Sub Node 4-->
</ul>
</li>
<!--Sub Node 3-->
</ul>
</li>
<!--Sub Node 2-->
</ul>
</li>
<!--Sub Node 1 -->
</ul>
</div>
<!-- CNLTreeMenu -->
<!--CNLTreeMenu1 End!-->



<!--CNLTreeMenu2 Start:-->
<div class="CNLTreeMenu" id="CNLTreeMenu2">
<h4>CNL Tree Menu2</h4>
<p><a id="AllOpen_2" href="#" onClick="MyCNLTreeMenu2.SetNodes(0);Hd(this);Sw('AllClose_2');">全部展开</a><a id="AllClose_2" href="#" onClick="MyCNLTreeMenu2.SetNodes(1);Hd(this);Sw('AllOpen_2');" style="display:none;">全部折叠</a></p>
<ul>
<li class="Opened"><a href="http://www.zzsky.cn">Zzsky.Cn</a>
<ul>
<li><a href="#1">技术区</a>
<ul>
<li><a href="#">网页技术</a>
<ul>
<li class="Child"><a href="#">JavaScript</a></li>
<!--Child Node-->
<li class="Child"><a href="#">HTML/XHTML/CSS</a></li>
<li class="Child"><a href="#">Ajax</a></li>
<li class="Child"><a href="#">网页制作工具</a></li>
<li class="Child"><a href="#">设计/图形</a></li>
<li class="Child"><a href="#">Flash/多媒体</a></li>
<li class="Child"><a href="#">VML/Web3D</a></li>
</ul>
</li>
<!--Sub Node 3-->
<li><a href="#">Web编程</a>
<ul>
<li class="Child"><a href="#">Java</a></li>
<!--Child Node-->
<li class="Child"><a href="#">.Net</a></li>
<li class="Child"><a href="#">ASP/VBScript</a></li>
<li class="Child"><a href="#">PHP</a></li>
<li class="Child"><a href="#">Perl/Python</a></li>
<li class="Child"><a href="#">Web综合/开源</a></li>
</ul>
</li>
<!--Sub Node 3-->
<li><a href="#">数据库</a>
<ul>
<li class="Child"><a href="#">Access/SQLServer</a></li>
<!--Child Node-->
<li class="Child"><a href="#">MySQL/PostgreSQL</a></li>
<li class="Child"><a href="#">Oracle/DB2/Sybase</a></li>
</ul>
</li>
<!--Sub Node 3-->
<li><a href="#">服务器</a>
<ul>
<li class="Child"><a href="#">Windows/IIS</a></li>
<!--Child Node-->
<li class="Child"><a href="#">Unix/Linux/Apache</a></li>
<li class="Child"><a href="#">应用服务器</a></li>
</ul>
</li>
<!--Sub Node 3-->
</ul>
</li>
<!--Sub Node 2-->
<li><a href="#1">二级目录</a>
<ul>
<li><a href="#">三级目录</a>
<ul>
<li><a href="#">四级目录</a>
<ul>
<li><a href="#">五级目录</a>
<ul>
<li><a href="#">......</a>
<ul>
<li><a href="#">第n级目录</a>
<ul>
<li class="Child"><a href="#">叶结点1</a></li>
<!--Child Node-->
<li class="Child"><a href="#">叶结点2</a></li>
<li class="Child"><a href="#">叶结点3</a></li>
</ul>
</li>
<!--Sub Node n -->
</ul>
</li>
<!--Sub Node 6 -->
</ul>
</li>
<!--Sub Node 5 -->
</ul>
</li>
<!--Sub Node 4-->
</ul>
</li>
<!--Sub Node 3-->
</ul>
</li>
<!--Sub Node 2-->
<li><a href="#1">二级目录</a>
<ul>
<li><a href="#">三级目录</a>
<ul>
<li><a href="#">四级目录</a>
<ul>
<li><a href="#">五级目录</a>
<ul>
<li><a href="#">......</a>
<ul>
<li><a href="#">第n级目录</a>
<ul>
<li class="Child"><a href="#">叶结点1</a></li>
<!--Child Node-->
<li class="Child"><a href="#">叶结点2</a></li>
<li class="Child"><a href="#">叶结点3</a></li>
</ul>
</li>
<!--Sub Node n -->
</ul>
</li>
<!--Sub Node 6 -->
</ul>
</li>
<!--Sub Node 5 -->
</ul>
</li>
<!--Sub Node 4-->
</ul>
</li>
<!--Sub Node 3-->
</ul>
</li>
<!--Sub Node 2-->
</ul>
</li>
<!--Sub Node 1 -->
</ul>
</div>
<!-- CNLTreeMenu -->
<!--CNLTreeMenu2 End-->



<!--CNLTreeMenu3 Start:-->
<div class="CNLTreeMenu" id="CNLTreeMenu3">
<h4>CNL Tree Menu3</h4>
<p><a id="AllOpen_3" href="#" onClick="MyCNLTreeMenu3.SetNodes(0);Hd(this);Sw('AllClose_3');">全部展开</a><a id="AllClose_3" href="#" onClick="MyCNLTreeMenu3.SetNodes(1);Hd(this);Sw('AllOpen_3');" style="display:none;">全部折叠</a></p>
<ul>
<li class="Opened"><a href="http://www.zzsky.cn">Zzsky.Cn</a>
<ul>
<li><a href="#1">技术区</a>
<ul>
<li><a href="#">网页技术</a>
<ul>
<li class="Child"><a href="#">JavaScript</a></li>
<!--Child Node-->
<li class="Child"><a href="#">HTML/XHTML/CSS</a></li>
<li class="Child"><a href="#">Ajax</a></li>
<li class="Child"><a href="#">网页制作工具</a></li>
<li class="Child"><a href="#">设计/图形</a></li>
<li class="Child"><a href="#">Flash/多媒体</a></li>
<li class="Child"><a href="#">VML/Web3D</a></li>
</ul>
</li>
<!--Sub Node 3-->
<li><a href="#">Web编程</a>
<ul>
<li class="Child"><a href="#">Java</a></li>
<!--Child Node-->
<li class="Child"><a href="#">.Net</a></li>
<li class="Child"><a href="#">ASP/VBScript</a></li>
<li class="Child"><a href="#">PHP</a></li>
<li class="Child"><a href="#">Perl/Python</a></li>
<li class="Child"><a href="#">Web综合/开源</a></li>
</ul>
</li>
<!--Sub Node 3-->
<li><a href="#">数据库</a>
<ul>
<li class="Child"><a href="#">Access/SQLServer</a></li>
<!--Child Node-->
<li class="Child"><a href="#">MySQL/PostgreSQL</a></li>
<li class="Child"><a href="#">Oracle/DB2/Sybase</a></li>
</ul>
</li>
<!--Sub Node 3-->
<li><a href="#">服务器</a>
<ul>
<li class="Child"><a href="#">Windows/IIS</a></li>
<!--Child Node-->
<li class="Child"><a href="#">Unix/Linux/Apache</a></li>
<li class="Child"><a href="#">应用服务器</a></li>
</ul>
</li>
<!--Sub Node 3-->
</ul>
</li>
<!--Sub Node 2-->
<li><a href="#1">二级目录</a>
<ul>
<li><a href="#">三级目录</a>
<ul>
<li><a href="#">四级目录</a>
<ul>
<li><a href="#">五级目录</a>
<ul>
<li><a href="#">......</a>
<ul>
<li><a href="#">第n级目录</a>
<ul>
<li class="Child"><a href="#">叶结点1</a></li>
<!--Child Node-->
<li class="Child"><a href="#">叶结点2</a></li>
<li class="Child"><a href="#">叶结点3</a></li>
</ul>
</li>
<!--Sub Node n -->
</ul>
</li>
<!--Sub Node 6 -->
</ul>
</li>
<!--Sub Node 5 -->
</ul>
</li>
<!--Sub Node 4-->
</ul>
</li>
<!--Sub Node 3-->
</ul>
</li>
<!--Sub Node 2-->
<li><a href="#1">二级目录</a>
<ul>
<li><a href="#">三级目录</a>
<ul>
<li><a href="#">四级目录</a>
<ul>
<li><a href="#">五级目录</a>
<ul>
<li><a href="#">......</a>
<ul>
<li><a href="#">第n级目录</a>
<ul>
<li class="Child"><a href="#">叶结点1</a></li>
<!--Child Node-->
<li class="Child"><a href="#">叶结点2</a></li>
<li class="Child"><a href="#">叶结点3</a></li>
</ul>
</li>
<!--Sub Node n -->
</ul>
</li>
<!--Sub Node 6 -->
</ul>
</li>
<!--Sub Node 5 -->
</ul>
</li>
<!--Sub Node 4-->
</ul>
</li>
<!--Sub Node 3-->
</ul>
</li>
<!--Sub Node 2-->
</ul>
</li>
<!--Sub Node 1 -->
</ul>
</div>
<script type="text/javascript">
<!--
function Ob(o){
var o=document.getElementById(o)?document.getElementById(o):o;
return o;
}
function Hd(o) {
Ob(o).style.display="none";
}
function Sw(o) {
Ob(o).style.display="";
}
function ExCls(o,a,b,n){
var o=Ob(o);
for(i=0;i<n;i++) {o=o.parentNode;}
o.className=o.className==a?b:a;
}
function CNLTreeMenu(id,TagName0) {
this.id=id;
this.TagName0=TagName0==""?"li":TagName0;
this.AllNodes = Ob(this.id).getElementsByTagName(TagName0);
this.InitCss = function (ClassName0,ClassName1,ClassName2,ImgUrl) {
this.ClassName0=ClassName0;
this.ClassName1=ClassName1;
this.ClassName2=ClassName2;
this.ImgUrl=ImgUrl || "http://www.zzsky.cn/effect/images/treemenu/s.gif";
this.ImgBlankA ="<img src=\""+this.ImgUrl+"\" class=\"s\" onclick=\"ExCls(this,'"+ClassName0+"','"+ClassName1+"',1);\" alt=\"展开/折叠\" />";
this.ImgBlankB ="<img src=\""+this.ImgUrl+"\" class=\"s\" />";
for (i=0;i<this.AllNodes.length;i++ ) {
this.AllNodes[i].className==""?this.AllNodes[i].className=ClassName1:"";
this.AllNodes[i].innerHTML=(this.AllNodes[i].className==ClassName2?this.ImgBlankB:this.ImgBlankA)+this.AllNodes[i].innerHTML;
}
}
this.SetNodes = function (n) {
var sClsName=n==0?this.ClassName0:this.ClassName1;
for (i=0;i<this.AllNodes.length;i++ ) {
this.AllNodes[i].className==this.ClassName2?"":this.AllNodes[i].className=sClsName;
}
}
}
var MyCNLTreeMenu1=new CNLTreeMenu("CNLTreeMenu1","li");
MyCNLTreeMenu1.InitCss("Opened","Closed","Child","http://www.zzsky.cn/effect/images/treemenu/s.gif");
var MyCNLTreeMenu2=new CNLTreeMenu("CNLTreeMenu2","li");
MyCNLTreeMenu2.InitCss("Opened","Closed","Child","http://www.zzsky.cn/effect/images/treemenu/s.gif");
var MyCNLTreeMenu3=new CNLTreeMenu("CNLTreeMenu3","li");
MyCNLTreeMenu3.InitCss("Opened","Closed","Child","http://www.zzsky.cn/effect/images/treemenu/s.gif");
-->
</script>

</body>
</html>




  • 大小: 2.1 KB
  • 大小: 26.9 KB
分享到：
| ajax上传文件进度条实现
评论
19 楼 william_zhg 2010-12-03  
能分享就是好事情。剩下的事情就自己去解决了。呵呵
18 楼 hereyouare 2010-12-01  
感谢楼主~~效果图是不错的~~
虽然楼主一开始没有用代码着色，但对于需要这些功能的人来说，他会自己复制到IDE里去看。
虽然楼主一开始没有截图，但对于需要这些功能的人来说，自己运行一下代码，效果可以自己看。
虽然楼主一开始没有将代码打包，但对于需要这些功能的人来说，复制下来代码，一样可以运行。
虽然楼主没有写出从数据库里读数据的方法，但对于需要这些功能的并且动手能力强的人来说，则可以自己实现这部分功能。

没有别的意思，只是感谢楼主的分享，能分享就是好人~好人也有自己事要做，也在学习与进步，希望楼主继续分享自己的经验~~
17 楼 yjrl 2010-11-30  
楼主这么放代码有何意义额
16 楼 神之小丑 2010-11-30  
lz 不会又是转载的吧？
15 楼 czyaapy99 2010-11-29  
对阿！都是写死滴，给它放作数据库里面读取出来，也可以啊！！！！
14 楼 wcx1 2010-11-29  
看了一下，汗！！！！！！！！！！！！
13 楼 yanyan_zhl 2010-11-28  
renwolang521 写道
yunzhongxia 写道
最讨厌看这种代码了，一团糟，javaeye的代码着色功能为什么不用呢？

我觉得 javaeye 什么时候 也能 可以折叠 就好了。
对于长段代码 默认先折叠起来 看着有兴趣了 再展开看

说的是哈...
12 楼 a3mao 2010-11-28  
xloadtree 很好用
11 楼 cn-done 2010-11-27  
忍住郁闷的心情。楼主的代码是否可以压缩成文件上传，只需发几个效果图就可以了。
放一堆代码而且还不用JE的CODE包装一下，IE频繁的报警：加载过慢
10 楼 renwolang521 2010-11-27  
yunzhongxia 写道
最讨厌看这种代码了，一团糟，javaeye的代码着色功能为什么不用呢？

我觉得 javaeye 什么时候 也能 可以折叠 就好了。
对于长段代码 默认先折叠起来 看着有兴趣了 再展开看
9 楼 BestUpon 2010-11-26  
HTMLTREE ！
8 楼 jsycbc 2010-11-26  
吸烟的狐狸 写道
楼主太不负责任了，刷积分呢？

楼上的不厚道，什么都想现成的
都像你这样，怎么进步
7 楼 吸烟的狐狸 2010-11-26  
楼主太不负责任了，刷积分呢？
6 楼 jorneyR 2010-11-26  
郁闷，都是写死的。
为什么不把树的内容放在XML文件中，然后浏览器中加载树并动态分析树的内容，然后显示呢？
5 楼 tangjikey 2010-11-26  
请在FF下查看，ie会报脚本错误。
我已经完整的格式化代码(html在dw下格式，js在aptana下格式)，html格式输出。
如果没有安装ff，请下载正文后附件。 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<style type="text/css">
a { text-decoration:none; }
a, a:visited { color:#000; background:inherit; }
body { margin:0; padding:20px; font:12px tahoma, 宋体, sans-serif; }
dt { font-size:22px; font-weight:bold; margin:0 0 0 15px; }
dd { margin:0 0 0 15px; }
h4 { margin:0; padding:0; font-size:18px; text-align:center; }
p { margin:0; padding:0 0 0 18px; }
p a, p a:visited { color:#00f; background:inherit; }
/*CNLTreeMenu Start*/ 
.CNLTreeMenu img.s { cursor:pointer; vertical-align:middle; }
.CNLTreeMenu ul { padding:0; }
.CNLTreeMenu li { list-style:none; padding:0; }
.Closed ul { display:none; }
.Child img.s { background:none; cursor:default; }
#CNLTreeMenu1 ul { margin:0 0 0 17px; }
#CNLTreeMenu1 img.s { width:20px; height:15px; }
#CNLTreeMenu1 .Opened img.s { background:url(http://www.zzsky.cn/effect/images/treemenu/opened1.gif) no-repeat 0 0; }
#CNLTreeMenu1 .Closed img.s { background:url(http://www.zzsky.cn/effect/images/treemenu/closed1.gif) no-repeat 0 0; }
#CNLTreeMenu1 .Child img.s { background:url(http://www.zzsky.cn/effect/images/treemenu/child1.gif) no-repeat 3px 5px; }
#CNLTreeMenu2 ul { margin:0 0 0 17px; }
#CNLTreeMenu2 img.s { width:17px; height:15px; }
#CNLTreeMenu2 .Opened img.s { background:url(http://www.zzsky.cn/effect/images/treemenu/opened2.gif) no-repeat 4px 6px; }
#CNLTreeMenu2 .Closed img.s { background:url(http://www.zzsky.cn/effect/images/treemenu/closed2.gif) no-repeat 3px 6px; }
#CNLTreeMenu2 .Child img.s { background:url(http://www.zzsky.cn/effect/images/treemenu/child2.gif) no-repeat 3px 5px; }
#CNLTreeMenu3 ul { margin:0 0 0 17px; }
#CNLTreeMenu3 img.s { width:34px; height:18px; }
#CNLTreeMenu3 .Opened img.s { background:url(http://www.zzsky.cn/effect/images/treemenu/opened3.gif) no-repeat 0 1px; }
#CNLTreeMenu3 .Closed img.s { background:url(http://www.zzsky.cn/effect/images/treemenu/closed3.gif) no-repeat 0 1px; }
#CNLTreeMenu3 .Child img.s { background:url(http://www.zzsky.cn/effect/images/treemenu/child3.gif) no-repeat 13px 2px; }
/*CNLTreeMenu End*/ 
/*Temp CSS for View Demo*/ 
#CNLTreeMenu1, #CNLTreeMenu2, #CNLTreeMenu3 { float:left; width:249px; border:1px solid #99BEEF; background:#D2E4FC; color:inherit; margin:3px; padding:3px; }
#CNLTreeMenu1, #CNLTreeMenu2 { padding-bottom:15px; }
.ViewCode { clear:both; border:1px solid #FFB900; background:#FFFFCC; color:inherit; margin:3px; padding:3px; }
.ViewCode h6 { color:#00f; }
</style>
<title>无限级树形菜单- java中文网:www.javaweb.cc</title>
</head>
<body>
<div class="CNLTreeMenu" id="CNLTreeMenu1">
  <h4>CNL Tree Menu1</h4>
  <p><a id="AllOpen_1" href="#" onClick="MyCNLTreeMenu1.SetNodes(0);Hd(this);Sw('AllClose_1');">全部展开</a><a id="AllClose_1" href="#" onClick="MyCNLTreeMenu1.SetNodes(1);Hd(this);Sw('AllOpen_1');" style="display:none;">全部折叠</a></p>
  <ul>
    <li class="Opened"><a href="http://www.zzsky.cn">Zzsky.Cn</a>
      <ul>
        <li><a href="#1">技术区</a>
          <ul>
            <li><a href="#">网页技术</a>
              <ul>
                <li class="Child"><a href="#">JavaScript</a></li>
                <!--Child Node-->
                <li class="Child"><a href="#">HTML/XHTML/CSS</a></li>
                <li class="Child"><a href="#">Ajax</a></li>
                <li class="Child"><a href="#">网页制作工具</a></li>
                <li class="Child"><a href="#">设计/图形</a></li>
                <li class="Child"><a href="#">Flash/多媒体</a></li>
                <li class="Child"><a href="#">VML/Web3D</a></li>
              </ul>
            </li>
            <!--Sub Node 3-->
            <li><a href="#">Web编程</a>
              <ul>
                <li class="Child"><a href="#">Java</a></li>
                <!--Child Node-->
                <li class="Child"><a href="#">.Net</a></li>
                <li class="Child"><a href="#">ASP/VBScript</a></li>
                <li class="Child"><a href="#">PHP</a></li>
                <li class="Child"><a href="#">Perl/Python</a></li>
                <li class="Child"><a href="#">Web综合/开源</a></li>
              </ul>
            </li>
            <!--Sub Node 3-->
            <li><a href="#">数据库</a>
              <ul>
                <li class="Child"><a href="#">Access/SQLServer</a></li>
                <!--Child Node-->
                <li class="Child"><a href="#">MySQL/PostgreSQL</a></li>
                <li class="Child"><a href="#">Oracle/DB2/Sybase</a></li>
              </ul>
            </li>
            <!--Sub Node 3-->
            <li><a href="#">服务器</a>
              <ul>
                <li class="Child"><a href="#">Windows/IIS</a></li>
                <!--Child Node-->
                <li class="Child"><a href="#">Unix/Linux/Apache</a></li>
                <li class="Child"><a href="#">应用服务器</a></li>
              </ul>
            </li>
            <!--Sub Node 3-->
          </ul>
        </li>
        <!--Sub Node 2-->
        <li><a href="#1">二级目录</a>
          <ul>
            <li><a href="#">三级目录</a>
              <ul>
                <li><a href="#">四级目录</a>
                  <ul>
                    <li><a href="#">五级目录</a>
                      <ul>
                        <li><a href="#">......</a>
                          <ul>
                            <li><a href="#">第n级目录</a>
                              <ul>
                                <li class="Child"><a href="#">叶结点1</a></li>
                                <!--Child Node-->
                                <li class="Child"><a href="#">叶结点2</a></li>
                                <li class="Child"><a href="#">叶结点3</a></li>
                              </ul>
                            </li>
                            <!--Sub Node n -->
                          </ul>
                        </li>
                        <!--Sub Node 6 -->
                      </ul>
                    </li>
                    <!--Sub Node 5 -->
                  </ul>
                </li>
                <!--Sub Node 4-->
              </ul>
            </li>
            <!--Sub Node 3-->
          </ul>
        </li>
        <!--Sub Node 2-->
        <li><a href="#1">二级目录</a>
          <ul>
            <li><a href="#">三级目录</a>
              <ul>
                <li><a href="#">四级目录</a>
                  <ul>
                    <li><a href="#">五级目录</a>
                      <ul>
                        <li><a href="#">......</a>
                          <ul>
                            <li><a href="#">第n级目录</a>
                              <ul>
                                <li class="Child"><a href="#">叶结点1</a></li>
                                <!--Child Node-->
                                <li class="Child"><a href="#">叶结点2</a></li>
                                <li class="Child"><a href="#">叶结点3</a></li>
                              </ul>
                            </li>
                            <!--Sub Node n -->
                          </ul>
                        </li>
                        <!--Sub Node 6 -->
                      </ul>
                    </li>
                    <!--Sub Node 5 -->
                  </ul>
                </li>
                <!--Sub Node 4-->
              </ul>
            </li>
            <!--Sub Node 3-->
          </ul>
        </li>
        <!--Sub Node 2-->
      </ul>
    </li>
    <!--Sub Node 1 -->
  </ul>
</div>
<!-- CNLTreeMenu -->
<!--CNLTreeMenu1 End!-->
<!--CNLTreeMenu2 Start:-->
<div class="CNLTreeMenu" id="CNLTreeMenu2">
  <h4>CNL Tree Menu2</h4>
  <p><a id="AllOpen_2" href="#" onClick="MyCNLTreeMenu2.SetNodes(0);Hd(this);Sw('AllClose_2');">全部展开</a><a id="AllClose_2" href="#" onClick="MyCNLTreeMenu2.SetNodes(1);Hd(this);Sw('AllOpen_2');" style="display:none;">全部折叠</a></p>
  <ul>
    <li class="Opened"><a href="http://www.zzsky.cn">Zzsky.Cn</a>
      <ul>
        <li><a href="#1">技术区</a>
          <ul>
            <li><a href="#">网页技术</a>
              <ul>
                <li class="Child"><a href="#">JavaScript</a></li>
                <!--Child Node-->
                <li class="Child"><a href="#">HTML/XHTML/CSS</a></li>
                <li class="Child"><a href="#">Ajax</a></li>
                <li class="Child"><a href="#">网页制作工具</a></li>
                <li class="Child"><a href="#">设计/图形</a></li>
                <li class="Child"><a href="#">Flash/多媒体</a></li>
                <li class="Child"><a href="#">VML/Web3D</a></li>
              </ul>
            </li>
            <!--Sub Node 3-->
            <li><a href="#">Web编程</a>
              <ul>
                <li class="Child"><a href="#">Java</a></li>
                <!--Child Node-->
                <li class="Child"><a href="#">.Net</a></li>
                <li class="Child"><a href="#">ASP/VBScript</a></li>
                <li class="Child"><a href="#">PHP</a></li>
                <li class="Child"><a href="#">Perl/Python</a></li>
                <li class="Child"><a href="#">Web综合/开源</a></li>
              </ul>
            </li>
            <!--Sub Node 3-->
            <li><a href="#">数据库</a>
              <ul>
                <li class="Child"><a href="#">Access/SQLServer</a></li>
                <!--Child Node-->
                <li class="Child"><a href="#">MySQL/PostgreSQL</a></li>
                <li class="Child"><a href="#">Oracle/DB2/Sybase</a></li>
              </ul>
            </li>
            <!--Sub Node 3-->
            <li><a href="#">服务器</a>
              <ul>
                <li class="Child"><a href="#">Windows/IIS</a></li>
                <!--Child Node-->
                <li class="Child"><a href="#">Unix/Linux/Apache</a></li>
                <li class="Child"><a href="#">应用服务器</a></li>
              </ul>
            </li>
            <!--Sub Node 3-->
          </ul>
        </li>
        <!--Sub Node 2-->
        <li><a href="#1">二级目录</a>
          <ul>
            <li><a href="#">三级目录</a>
              <ul>
                <li><a href="#">四级目录</a>
                  <ul>
                    <li><a href="#">五级目录</a>
                      <ul>
                        <li><a href="#">......</a>
                          <ul>
                            <li><a href="#">第n级目录</a>
                              <ul>
                                <li class="Child"><a href="#">叶结点1</a></li>
                                <!--Child Node-->
                                <li class="Child"><a href="#">叶结点2</a></li>
                                <li class="Child"><a href="#">叶结点3</a></li>
                              </ul>
                            </li>
                            <!--Sub Node n -->
                          </ul>
                        </li>
                        <!--Sub Node 6 -->
                      </ul>
                    </li>
                    <!--Sub Node 5 -->
                  </ul>
                </li>
                <!--Sub Node 4-->
              </ul>
            </li>
            <!--Sub Node 3-->
          </ul>
        </li>
        <!--Sub Node 2-->
        <li><a href="#1">二级目录</a>
          <ul>
            <li><a href="#">三级目录</a>
              <ul>
                <li><a href="#">四级目录</a>
                  <ul>
                    <li><a href="#">五级目录</a>
                      <ul>
                        <li><a href="#">......</a>
                          <ul>
                            <li><a href="#">第n级目录</a>
                              <ul>
                                <li class="Child"><a href="#">叶结点1</a></li>
                                <!--Child Node-->
                                <li class="Child"><a href="#">叶结点2</a></li>
                                <li class="Child"><a href="#">叶结点3</a></li>
                              </ul>
                            </li>
                            <!--Sub Node n -->
                          </ul>
                        </li>
                        <!--Sub Node 6 -->
                      </ul>
                    </li>
                    <!--Sub Node 5 -->
                  </ul>
                </li>
                <!--Sub Node 4-->
              </ul>
            </li>
            <!--Sub Node 3-->
          </ul>
        </li>
        <!--Sub Node 2-->
      </ul>
    </li>
    <!--Sub Node 1 -->
  </ul>
</div>
<!-- CNLTreeMenu -->
<!--CNLTreeMenu2 End-->
<!--CNLTreeMenu3 Start:-->
<div class="CNLTreeMenu" id="CNLTreeMenu3">
  <h4>CNL Tree Menu3</h4>
  <p><a id="AllOpen_3" href="#" onClick="MyCNLTreeMenu3.SetNodes(0);Hd(this);Sw('AllClose_3');">全部展开</a><a id="AllClose_3" href="#" onClick="MyCNLTreeMenu3.SetNodes(1);Hd(this);Sw('AllOpen_3');" style="display:none;">全部折叠</a></p>
  <ul>
    <li class="Opened"><a href="http://www.zzsky.cn">Zzsky.Cn</a>
      <ul>
        <li><a href="#1">技术区</a>
          <ul>
            <li><a href="#">网页技术</a>
              <ul>
                <li class="Child"><a href="#">JavaScript</a></li>
                <!--Child Node-->
                <li class="Child"><a href="#">HTML/XHTML/CSS</a></li>
                <li class="Child"><a href="#">Ajax</a></li>
                <li class="Child"><a href="#">网页制作工具</a></li>
                <li class="Child"><a href="#">设计/图形</a></li>
                <li class="Child"><a href="#">Flash/多媒体</a></li>
                <li class="Child"><a href="#">VML/Web3D</a></li>
              </ul>
            </li>
            <!--Sub Node 3-->
            <li><a href="#">Web编程</a>
              <ul>
                <li class="Child"><a href="#">Java</a></li>
                <!--Child Node-->
                <li class="Child"><a href="#">.Net</a></li>
                <li class="Child"><a href="#">ASP/VBScript</a></li>
                <li class="Child"><a href="#">PHP</a></li>
                <li class="Child"><a href="#">Perl/Python</a></li>
                <li class="Child"><a href="#">Web综合/开源</a></li>
              </ul>
            </li>
            <!--Sub Node 3-->
            <li><a href="#">数据库</a>
              <ul>
                <li class="Child"><a href="#">Access/SQLServer</a></li>
                <!--Child Node-->
                <li class="Child"><a href="#">MySQL/PostgreSQL</a></li>
                <li class="Child"><a href="#">Oracle/DB2/Sybase</a></li>
              </ul>
            </li>
            <!--Sub Node 3-->
            <li><a href="#">服务器</a>
              <ul>
                <li class="Child"><a href="#">Windows/IIS</a></li>
                <!--Child Node-->
                <li class="Child"><a href="#">Unix/Linux/Apache</a></li>
                <li class="Child"><a href="#">应用服务器</a></li>
              </ul>
            </li>
            <!--Sub Node 3-->
          </ul>
        </li>
        <!--Sub Node 2-->
        <li><a href="#1">二级目录</a>
          <ul>
            <li><a href="#">三级目录</a>
              <ul>
                <li><a href="#">四级目录</a>
                  <ul>
                    <li><a href="#">五级目录</a>
                      <ul>
                        <li><a href="#">......</a>
                          <ul>
                            <li><a href="#">第n级目录</a>
                              <ul>
                                <li class="Child"><a href="#">叶结点1</a></li>
                                <!--Child Node-->
                                <li class="Child"><a href="#">叶结点2</a></li>
                                <li class="Child"><a href="#">叶结点3</a></li>
                              </ul>
                            </li>
                            <!--Sub Node n -->
                          </ul>
                        </li>
                        <!--Sub Node 6 -->
                      </ul>
                    </li>
                    <!--Sub Node 5 -->
                  </ul>
                </li>
                <!--Sub Node 4-->
              </ul>
            </li>
            <!--Sub Node 3-->
          </ul>
        </li>
        <!--Sub Node 2-->
        <li><a href="#1">二级目录</a>
          <ul>
            <li><a href="#">三级目录</a>
              <ul>
                <li><a href="#">四级目录</a>
                  <ul>
                    <li><a href="#">五级目录</a>
                      <ul>
                        <li><a href="#">......</a>
                          <ul>
                            <li><a href="#">第n级目录</a>
                              <ul>
                                <li class="Child"><a href="#">叶结点1</a></li>
                                <!--Child Node-->
                                <li class="Child"><a href="#">叶结点2</a></li>
                                <li class="Child"><a href="#">叶结点3</a></li>
                              </ul>
                            </li>
                            <!--Sub Node n -->
                          </ul>
                        </li>
                        <!--Sub Node 6 -->
                      </ul>
                    </li>
                    <!--Sub Node 5 -->
                  </ul>
                </li>
                <!--Sub Node 4-->
              </ul>
            </li>
            <!--Sub Node 3-->
          </ul>
        </li>
        <!--Sub Node 2-->
      </ul>
    </li>
    <!--Sub Node 1 -->
  </ul>
</div>
<script type="text/javascript">
    <!--
    function Ob(o){
        var o = document.getElementById(o) ? document.getElementById(o) : o;
        return o;
    }
    
    function Hd(o){
        Ob(o).style.display = "none";
    }
    
    function Sw(o){
        Ob(o).style.display = "";
    }
    
    function ExCls(o, a, b, n){
        var o = Ob(o);
        for (i = 0; i < n; i++) {
            o = o.parentNode;
        }
        o.className = o.className == a ? b : a;
    }
    
    function CNLTreeMenu(id, TagName0){
        this.id = id;
        this.TagName0 = TagName0 == "" ? "li" : TagName0;
        this.AllNodes = Ob(this.id).getElementsByTagName(TagName0);
        this.InitCss = function(ClassName0, ClassName1, ClassName2, ImgUrl){
            this.ClassName0 = ClassName0;
            this.ClassName1 = ClassName1;
            this.ClassName2 = ClassName2;
            this.ImgUrl = ImgUrl || "http://www.zzsky.cn/effect/images/treemenu/s.gif";
            this.ImgBlankA = "<img src=\"" + this.ImgUrl + "\" class=\"s\" onclick=\"ExCls(this,'" + ClassName0 + "','" + ClassName1 + "',1);\" alt=\"展开/折叠\" />";
            this.ImgBlankB = "<img src=\"" + this.ImgUrl + "\" class=\"s\" />";
            for (i = 0; i < this.AllNodes.length; i++) {
                this.AllNodes[i].className == "" ? this.AllNodes[i].className = ClassName1 : "";
                this.AllNodes[i].innerHTML = (this.AllNodes[i].className == ClassName2 ? this.ImgBlankB : this.ImgBlankA) + this.AllNodes[i].innerHTML;
            }
        }
        this.SetNodes = function(n){
            var sClsName = n == 0 ? this.ClassName0 : this.ClassName1;
            for (i = 0; i < this.AllNodes.length; i++) {
                this.AllNodes[i].className == this.ClassName2 ? "" : this.AllNodes[i].className = sClsName;
            }
        }
    }
    
    var MyCNLTreeMenu1 = new CNLTreeMenu("CNLTreeMenu1", "li");
    MyCNLTreeMenu1.InitCss("Opened", "Closed", "Child", "http://www.zzsky.cn/effect/images/treemenu/s.gif");
    var MyCNLTreeMenu2 = new CNLTreeMenu("CNLTreeMenu2", "li");
    MyCNLTreeMenu2.InitCss("Opened", "Closed", "Child", "http://www.zzsky.cn/effect/images/treemenu/s.gif");
    var MyCNLTreeMenu3 = new CNLTreeMenu("CNLTreeMenu3", "li");
    MyCNLTreeMenu3.InitCss("Opened", "Closed", "Child", "http://www.zzsky.cn/effect/images/treemenu/s.gif");
    -->
</script>
</body>
</html>
4 楼 yunzhongxia 2010-11-26  
最讨厌看这种代码了，一团糟，javaeye的代码着色功能为什么不用呢？
3 楼 zp19827 2010-11-26  
  又是一个CSS样式加载的
2 楼 jiayj198609 2010-11-25  
呵呵。。。是我疏忽了！我看看哈；能不能弄个图片上去！
1 楼 ypzhangyx 2010-11-25  
最好能截个图放上来 比较直观一些
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    各种语言脚本的树形菜单代码大全

    在IT领域，特别是网页开发中，树形菜单代码是一种常用的技术，用于构建具有层次结构的导航系统。"各种语言脚本的树形菜单代码大全"这个资源包集合了多种编程语言和方法来创建这种功能，包括CSS（层叠样式表）、...

    树形菜单（超酷）.rar

    树形菜单在IT界，尤其是Java Web开发中，是一种常用且高效的用户界面元素，它能够以层次结构展示数据，使得用户能清晰地看到各种选项之间的关系。这种菜单形式尤其适用于那些具有多级分类或者层级关系的数据展示，...

    OpenSwing---Java 常用控件集合

    JTreeComboBox 带有树形结构的下拉列表 com.sunking.swing.print.* 一个打印模板 -------------------------------------------------------------------- ■ OpenSwing的测试方法： 解压后是一个JBUILDER项目的目录...

    JSP Ajax树形菜单完整示例

    综上所述，JSP与Ajax结合实现的树形菜单在Web应用中具有很高的实用价值。通过合理的前端和后端设计，我们可以提供一个流畅、高效的用户界面，同时减轻服务器负担。在实际项目中，可以根据需求进一步定制和优化，提升...

    jQuery文件树形菜单插件proTree

    在网页开发中，为了更好地组织和展示大量数据，树形菜单是一个常用且实用的元素。`proTree`是一款基于jQuery的插件，它能帮助开发者轻松实现文件目录或层级结构的可视化展示。通过数组导入，可以灵活地构建出具有...

    dtree原版+经典树形菜单+API

    dtree是一款常用的JavaScript库，用于创建动态的树形菜单，它提供了丰富的API接口，使得开发者能够灵活地定制和控制树形菜单的行为。本文将深入探讨dtree的原版特性、经典树形菜单的实现方式以及其API文档中的关键...

    Altium Designer 快捷键

    - **Home**：显示整个项目的树形结构。 #### 二、Altium Designer 设置与优化 - **DXP -&gt; Preferences**：进入系统设置界面，在这里可以进行各种高级设置。 - **General - Use localized resources**：选择中文...

    JsTree 树形菜单大集合

    包括动态加载和静态加载的，ASP、PHP等运行环境的都有，每一个都带有实例，有的加入了AJAX技术，可以说非常实用，也值得收藏一下，树形菜单也算是比较常用的。

    常用树形控件

    树形控件是计算机图形用户界面（GUI）中常见的一种数据可视化组件，它以树状结构展示信息，常用于文件管理、菜单系统、组织结构展示等场景。在本主题中，我们将深入探讨树形控件的基本概念、工作原理、常见用途以及...

    树形结构和右键弹出菜单.zip

    在LabVIEW编程环境中，树形结构（Tree Structure）和右键弹出菜单（Context Menu）是两种常用的交互式用户界面元素。这篇详细说明将深入探讨如何在LabVIEW中使用这两种功能，以及它们在实际应用中的重要性。 首先，...

    非常实用的JS树型菜单

    在“ASP产品三级(多级)分类数据库版与树型菜单动态非数据库版.2014.06”这个压缩包中，很可能包含了一个基于ASP技术的多级分类系统，配合JavaScript实现的树型菜单展示。这种菜单通常会根据服务器端的数据库数据动态...

    JQ ztree树形菜单筛选插件

    **JQ ztree树形菜单筛选插件**是一款强大的前端组件，主要用于构建具有多级层次结构的树形菜单。这个插件是基于广泛使用的JavaScript库jQuery开发的，它提供了丰富的功能，包括动态加载数据、节点操作、事件处理以及...

    jQuery树形下拉菜单特效代码

    【jQuery树形下拉菜单特效代码】是一种在网页交互中常用的UI设计，它结合了jQuery库的高效性和灵活性，为用户提供了优雅的导航体验。在网页设计中，下拉菜单通常用于展示多级分类，使得用户能快速找到目标信息，而树...

    VC++ 树形控件学习

    在VC++编程中，树形控件（Tree Control）是一种常用的数据展示组件，它能够以层级结构显示数据，常用于文件资源管理器、程序菜单等场景。本资料包"树形控件学习"针对VC++初学者，提供了一些实用的代码示例，帮助读者...

    树形样式示例代码

    另一方面，`xyTree4.12`很可能是一个版本号为4.12的XTree库文件，它包含了实现树形菜单功能所需的JavaScript代码。开发者需要将这个库文件引入到他们的HTML页面中，以便使用XTree的功能。 为了更好地理解并使用这个...

    VS2010扩展管理实用工具

    1. **访问扩展管理器**：打开VS2010后，可以通过菜单栏中的“工具”-&gt;“扩展管理器”来访问该工具。首次打开时，会看到已安装的所有扩展列表。 2. **在线库浏览**：在左侧栏中，可以选择“联机库”，这里列出了可以...

    自定义树形列表控件

    标题中的“自定义树形列表控件”结合了这两种控件的优点，提供了一种新的UI组件，它既有树形结构的层次展示，又有列表控件的多列信息展示。这种控件在需要同时展示复杂层级关系和多种属性信息的场景中非常实用，例如...

    java反编译工具:jd-gui

    - 打开JD-GUI，通过菜单栏的“File” -&gt; “Open Class”或拖放.class文件到界面中，可以查看单个类的源码。 - 若要查看整个.jar文件，选择“File” -&gt; “Open Archive”。 3. 功能特性： - 高亮显示：代码高亮...

Magicbox
Global site tag (gtag.js) - Google Analytics