纯JavaScript树型目录结构

Posted on 2010-01-27 16:37  秋风啸落叶  阅读(467)  评论(0)  编辑  收藏  举报

 

javascript
  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5 <meta content="古树,于恒良,www.gushu.net" />
  6 
  7 <title>树型目录</title>
  8 <style type="text/css">
  9     <!--
 10     html,body {height:100%;margin:0;font:12px tahoma,宋体,sans-serif;}
 11     a {text-decoration:none;}
 12     a,a:visited {color:#000;background:inherit;}
 13     

 

 14     p {margin:0;padding:0 0 0 18px;}
 15     p a,p a:visited {color:#00f;background:inherit;}
 16     
 17     
 18     /*树型目录开始*/
 19     .TreeMenu img.s {cursor:pointer;vertical-align:middle;}
 20     .TreeMenu ul {padding:0;}
 21     .TreeMenu li {list-style:none;padding:0;}
 22     .Closed ul {display:none;}
 23     .Child img.s {background:none;cursor:default;}
 24     
 25     #TreeMenu {float:left;width:200px;height:98%;border:1px solid #99BEEF;background:#D2E4FC;color:inherit;margin:3px;padding:3px;}
 26     #TreeMenu ul {margin:0 0 0 17px;}
 27     #TreeMenu img.s {width:20px;height:20px;}
 28     #TreeMenu .Opened img.s {background: url(bullet.gif); no-repeat 0 1px;}
 29     #TreeMenu .Closed img.s {background: url(bullet.gif); no-repeat 0 1px;}
 30     #TreeMenu .Child img.s {background: url(rt.gif);-repeat 13px 2px;}
 31     /*树型目录结束*/
 32 
 33     -->
 34 </style>
 35 <script type="text/javascript">
 36 <!--
 37     function Ob(o){
 38      var o=document.getElementById(o)?document.getElementById(o):o;
 39      return o;
 40     }
 41     function Hd(o) {
 42      Ob(o).style.display="none";
 43     }
 44     function Sw(o) {
 45      Ob(o).style.display="";
 46     }
 47     function ExCls(o,a,b,n){
 48      var o=Ob(o);
 49      for(i=0;i<n;i++) {o=o.parentNode;}
 50      o.className=o.className==a?b:a;
 51     }
 52     function TreeMenu(id,TagName0) {
 53       this.id=id;
 54       this.TagName0=TagName0==""?"li":TagName0;
 55       this.AllNodes = Ob(this.id).getElementsByTagName(TagName0);
 56       this.InitCss = function (ClassName0,ClassName1,ClassName2,ImgUrl) {
 57       this.ClassName0=ClassName0;
 58       this.ClassName1=ClassName1;
 59       this.ClassName2=ClassName2;
 60       this.ImgUrl=ImgUrl || "TreeMenu_img/s.gif";
 61       this.ImgBlankA ="<img src=\""+this.ImgUrl+"\" s\" ExCls(this,'"+ClassName0+"','"+ClassName1+"',1);\" alt=\"展开/折叠\" />";
 62       this.ImgBlankB ="<img src=\""+this.ImgUrl+"\" s\" />";
 63       for (i=0;i<this.AllNodes.length;i++ ) {
 64        this.AllNodes[i].className==""?this.AllNodes[i].className=ClassName1:"";
 65        this.AllNodes[i].innerHTML=(this.AllNodes[i].className==ClassName2?this.ImgBlankB:this.ImgBlankA)+this.AllNodes[i].innerHTML;
 66        }
 67      }
 68      this.SetNodes = function (n) {
 69       var sClsName=n==0?this.ClassName0:this.ClassName1;
 70       for (i=0;i<this.AllNodes.length;i++ ) {
 71        this.AllNodes[i].className==this.ClassName2?"":this.AllNodes[i].className=sClsName;
 72       }
 73      }
 74     }
 75 -->
 76 </script>
 77 
 78 </head>
 79 <body>
 80 
 81 <div >
 82 
 83 <p><a href="#" AllClose');">全部展开</a><a href="#" AllOpen');" style="display:none;">全部折叠</a></p>
 84 
 85 <ul>
 86 <li ><a href="#" target="_blank">古树网站后台管理系统</a>
 87 <!--目录节点开始-->
 88       <ul>
 89     <li><a href="#1">111</a>
 90         <ul>
 91             <li><a href="#2">222</a>
 92                 <ul>
 93                  <li ><a href="#">333</a></li>
 94                  <li ><a href="#">333</a></li>
 95                  <li ><a href="#">333</a></li>
 96                  <li ><a href="#">333</a></li>
 97                  <li ><a href="#">333</a></li>
 98                  <li ><a href="#">333</a></li>
 99                  <li ><a href="#">333</a></li>
100                 </ul>
101             </li>
102             <li><a href="#">Web编程</a>
103                 <ul>
104                  <li ><a href="#">Java</a></li><!--Child Node-->
105                  <li ><a href="#">.Net</a></li>
106                  <li ><a href="#">ASP/VBScript</a></li>
107                  <li ><a href="#">PHP</a></li>
108                  <li ><a href="#">Perl/Python</a></li>
109                  <li ><a href="#">Web综合/开源</a></li>
110                 </ul>
111             </li>
112         </ul>
113     </li>
114     </ul>
115 <!--目录节点开始-->
116 </li>
117 </ul><ul>
118 <li ><a href="http://www.gushu.cn/" target="_blank">古树网站后台管理系统</a>
119 <!--目录节点开始-->
120       <ul>
121     <li><a href="#1">111</a>
122         <ul>
123             <li><a href="#2">222</a>
124                 <ul>
125                  <li ><a href="#">333</a></li>
126                  <li ><a href="#">333</a></li>
127                  <li ><a href="#">333</a></li>
128                  <li ><a href="#">333</a></li>
129                  <li ><a href="#">333</a></li>
130                  <li ><a href="#">333</a></li>
131                  <li ><a href="#">333</a></li>
132                 </ul>
133             </li>
134             <li><a href="#">Web编程</a>
135                 <ul>
136                  <li ><a href="#">Java</a></li><!--Child Node-->
137                  <li ><a href="#">.Net</a></li>
138                  <li ><a href="#">ASP/VBScript</a></li>
139                  <li ><a href="#">PHP</a></li>
140                  <li ><a href="#">Perl/Python</a></li>
141                  <li ><a href="#">Web综合/开源</a></li>
142                 </ul>
143             </li>
144         </ul>
145     </li>    <li><a href="#1">111</a>
146         <ul>
147             <li><a href="#2">222</a>
148                 <ul>
149                  <li ><a href="#">333</a></li>
150                  <li ><a href="#">333</a></li>
151                  <li ><a href="#">333</a></li>
152                  <li ><a href="#">333</a></li>
153                  <li ><a href="#">333</a></li>
154                  <li ><a href="#">333</a></li>
155                  <li ><a href="#">333</a></li>
156                 </ul>
157             </li>
158             <li><a href="#">Web编程</a>
159                 <ul>
160                  <li ><a href="#">Java</a></li><!--Child Node-->
161                  <li ><a href="#">.Net</a></li>
162                  <li ><a href="#">ASP/VBScript</a></li>
163                  <li ><a href="#">PHP</a></li>
164                  <li ><a href="#">Perl/Python</a></li>
165                  <li ><a href="#">Web综合/开源</a></li>
166                 </ul>
167             </li>
168         </ul>
169     </li>
170     </ul>
171 <!--目录节点开始-->
172 </li>
173 </ul>
174 </div>
175 <script type="text/javascript">
176 <!--
177     var MyTreeMenu=new TreeMenu("TreeMenu","li");
178     MyTreeMenu.InitCss("Opened","Closed","Child","tr.gif");
179 -->
180 </script>
181 </body>
182 </html>
183