JS + Div +CSS 实现类 windows 树

xxpniu · 发表于 2013-1-27 05:40:38

Js 类文件
//author xxp //Email 54249636@qq.com//deployvar AddOnclick=Class.create({ initialize:function(_oc){ if(typeof _oc == 'function'){ this.beforeOnclick=_oc; }else{this.beforeOnclick=function (){return;} } } } );//TreeNotevar 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; } });//TreeStylevar 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 ><div id="tree"><div>测试</div></div></body></html>

		自动登录	找回密码
密码			立即注册

JS + Div +CSS 实现类 windows 树

浏览过的版块