redguardtoo的专栏

理性、常识、宽容

最少代码写成的javascript menu tree收藏

没有图片,没有外部的js文件,没有css文件,只有一个52行的html文件.不过可扩充性很好,你可以轻易加上图片和超链接.

修改自 Marcelo Franco的版本,他的版本使用了table并且假定div只能用于tree menu.按照现代的web编程惯例不一定是可接受的.据Marcelo Franco说适用的浏览器是 Microsoft Internet Explorer 4+, Netscape 4+, etc.),我在我的浏览器上(IE6,opera8.52, firefox1.5)测了下我的简化版本,好像也没有什么问题.

以下就是全部的源代码

<html>
<head>
	<title>Tree Menu</title>
</head>
<script language="javascript" type="text/javascript">
<!--
function tog(item){
   obj=document.getElementById(item);
   visible=(obj.style.display!="none");
   key=document.getElementById("x" + item);
   if (visible) {
     obj.style.display="none";
     key.innerHTML="+";
   } else {
      obj.style.display="block";
      key.innerHTML="-";
   }
}
  
function expall(item,yes){
   obj=document.getElementById(item);
   arr=obj.getElementsByTagName("UL");
   for (i=0;i<arr.length;i++) {
     key=document.getElementById("x" + arr[i].id);
     if(yes){
       arr[i].style.display="block";
       key.innerHTML="-";
     }else{
       arr[i].style.display="none";
       key.innerHTML="+";
     }
   }
}
//-->
</script>

<div id='tree'>
<a id='xall' href="javascript:tog('all');">+</a>
<ul id='all' style="display:none;">
	<li>child1</li>
	<li ><a id='xfather' href="javascript:tog('father');">+</a>father
	<ul id='father' style="display:none;">
		<li>child2</li>
		<li>child3</li>
  	</ul>
	</li>
</ul>
</div>
<p><a href="javascript:expall('tree',1);">Expand All</a> 
-- <a href="javascript:expall('tree',0);">Collapse All</a></p>
<p>
Extended from 
<a href="http://www.codeproject.com/jscript/treemenu.asp">Marcelo Franco</a>'s tree menu.
</p>
</body>
</html>

发表于 @ 2006年03月14日 16:11:00|评论(loading...)