JS + Div +CSS 实现类 windows 树

Js 类 文件

//author xxp 
//Email 54249636@qq.com
//deploy
var AddOnclick=Class.create({
							   initialize:function(_oc){
								   if(typeof _oc == 'function'){
								   this.beforeOnclick=_oc;
								   }else{
									this.beforeOnclick=function (){return;}   
									   }
								   }
							  }
							  );
//TreeNote
var TreeNote=Class.create({
					  //树的子节点,
					  //初始化 参数 textValue,rank,onclick,deployBottom
					  initialize:function(textValue,onclick,deployBottom){
						  this.textValue=textValue,this.onclick=onclick,this.deployBottom=deployBottom;
						  //父节点
						  this.superNote=null;
						  //包含div
						  this.outerDiv=null;
						  //树的DIV
						  this.superDiv=null;
						  },
					  appendChildNote:function (/*TreeNote*/_obj){
						  //不存在子节点包含数组则创建
						  if(!this.childNote)this.childNote=[];
						  this.childNote[this.childNote.length]=_obj;
						  _obj.superNote=this;
						  },
					  //是否存在子节点	  
					  haveChildNote:function(){
						  return !(!this.childNote);
						  },
					  haveSuperNote:function(){
						  return !(!this.superNote);
						  },
					  isLast:function(){
						   //是否有父节点
						   if(this.haveSuperNote()){
							     return this.superNote.childNote[this.superNote.childNote.length-1]==this;
							   }
						    return true;	   
						  }	  
					  });
//TreeStyle
var TreeStyle=Class.create({
						  //数的样式 
						  initialize:function(_1,_2,_3,_4,_5,_6,_7,_8,_9,_10){
							  this._1=_1,this._2=_2,this._3=_3,this._4=_4,this._5=_5,this._6=_6,this._7=_7,this._8=_8,this._9=_9,this._10=_10;
							  }	  
						   });
var Tree=Class.create({
					  initialize:function(_container,root){
						  this.container=_container;//容器div
						  this.root=root;//最高节点
						  this.style=new TreeStyle("C1","C2","C3","C4","C5","C6","C7","C8","C9","C10");
						  var _t=new Element("div");
						  this.container.appendChild(_t);
						  this.display(_t,this.root);
						  },
					  addNote:function(_root){
						  this.root=_root;
						  },
					  display:function(_outerDiv,_note){
						  var _s=this.style;
						  //该层容器DIV
						  var _root=_outerDiv;
						  //该节点容器DIV
						  var _t_r_d=new Element("div");
						  _root.appendChild(_t_r_d);
						  //捆绑进对象
						  _note.outerDiv=_t_r_d;
						  _note.superDiv=_root;
						  //创建行DIV
						  var _t_r_c=new Element("div");
						  _t_r_d.appendChild(_t_r_c);
						  //临时变量一
						  var _t1=null;
						  var _t_s_o=null; //上层对象
						  //获取层
						  var rank=0;
						  _t_s_o=_note;
						  for(;;){
							 if(!_t_s_o.haveSuperNote()) break;
							 _t_s_o=_t_s_o.superNote;
							 rank++;
							//if(rank>10)break;
							}
						  //显示前面的div	  
						  for(var i=rank;i>0;i--){
							  _t_s_o=_note;
							  for(var j=i-1;j>=0;j--){
								  _t_s_o=_t_s_o.superNote;;
								  }
							  _t1=new Element("div");
							  if(_t_s_o.isLast()){
							  _t1.className=_s._8;
							  }else{
							  _t1.className=_s._4;
							  }
							  _t_r_c.appendChild(_t1);
							  }
						   //显示前面的展开Or Not
						   _t1=new Element("div");
						   _t_r_c.appendChild(_t1);
						   _t1._bindNote=_note;
						   _t1._tree=this;
						   _t1._isOpen=false;
						   _t1.onclick=function(){
							   this._bindNote.deployBottom.beforeOnclick();
							   if(this._bindNote.haveChildNote()){
								this._tree.showNext(this);
								this._isOpen=!this._isOpen;
								this._tree.changeCss(this,
								 this._isOpen?this._tree.style._6:this._tree.style._7
								 );
								}
							   }
						   if(_note.haveChildNote()){
							  if(_note.isLast()){
								  _t1.className=_s._7;
								  }else{
								  _t1.className=_s._5;	  
									  }
							}else{
								 if(_note.isLast()){
								  _t1.className=_s._3;
								  }else{
								  _t1.className=_s._2;	  
									  }
							}
						   _t1=new Element("div");
						   _t_r_c.appendChild(_t1);
						   _t1._bindNote=_note;
						   _t1._tree=this;
						   _t1.className=_s._9;
						   _t1.onclick=function(){
							   this._bindNote.onclick.beforeOnclick();
							   }
						   _t1.update(_note.textValue)   
						   },
						 showNext:function(_obj){
							  //_t = true
							  if(_obj._isOpen){
								  _obj._bindNote.childNote[0].superDiv.remove();
								  return;
								  }
							  var _t=new Element("div");
							  _obj._bindNote.outerDiv.appendChild(_t);
							  for(var i=0;i<_obj._bindNote.childNote.length;i++){
							  this.display(_t,_obj._bindNote.childNote[i]);
							  }
							 },
						 changeCss:function(_obj,_className){
							  _obj.className=_className;
							 }	 
							 
					  });

测试 页

<!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=utf-8" />
<script src="prototype.js"></script>
<script src="tree.js"></script>
<script>
var rootNote=new TreeNote("测试树Root",new AddOnclick(function(){alert("root")}),new AddOnclick(function(){})); 
rootNote.appendChildNote(new TreeNote("测试树_---t",new AddOnclick(function(){}),new AddOnclick(function(){})));
t= new TreeNote("测试树111t",new AddOnclick(function(){}),new AddOnclick(function(){}));
t.appendChildNote(new TreeNote("测试树1t",new AddOnclick(function(){}),new AddOnclick(function(){})));
t.appendChildNote(new TreeNote("测试树1t",new AddOnclick(function(){}),new AddOnclick(function(){})));
t.appendChildNote(new TreeNote("测试树1t",new AddOnclick(function(){}),new AddOnclick(function(){})));
rootNote.appendChildNote(t);
rootNote.appendChildNote(new TreeNote("测试树_---t",new AddOnclick(function(){}),new AddOnclick(function(){})));
function init(){
new Tree($("tree"),rootNote)
}</script>
<title>无标题文档</title>
<style>
  #tree div{ clear:both; font-size:12px;}
  #tree .C1{ float:left; clear:none; height:16px; width:15px; background:url(TreeAll.gif) 0 0 no-repeat;cursor:pointer;}
  #tree .C2{ float:left; clear:none; height:16px; width:15px; background:url(TreeAll.gif) 0 -16px no-repeat;cursor:pointer;}
  #tree .C3{ float:left; clear:none; height:16px; width:15px; background:url(TreeAll.gif) 0 -32px no-repeat;cursor:pointer;}
  #tree .C4{ float:left; clear:none; height:16px; width:15px; background:url(TreeAll.gif) 0 -48px no-repeat;cursor:pointer;}
  #tree .C5{ float:left; clear:none; height:16px; width:15px; background:url(TreeAll.gif) 0 -64px no-repeat;cursor:pointer;}
  #tree .C6{ float:left; clear:none; height:16px; width:15px; background:url(TreeAll.gif) 0 -80px no-repeat;cursor:pointer;}
  #tree .C7{ float:left; clear:none; height:16px; width:15px; background:url(TreeAll.gif) 0 -96px no-repeat;cursor:pointer;}
  #tree .C8{ float:left; clear:none; height:16px; width:15px; cursor:pointer;}
  #tree .C9{ float:left; clear:none; height:16px; width:200px;cursor:pointer; overflow:hidden; line-height:16px; text-indent:3px;}
</style>
</head>

<body onload="init()">
<div id="tree">
<div>测试</div>
</div>
</body>
</html>