让Yui-tree有ext一样的expand和collapse的animation

修改treeview.js 添加以下代码：

2. var ecIsAnim=false;//防止高频率点击节点造成的错误
4. YAHOO.widget.SlidUp = function(el, callback) {
5.     this.el = el;
6.     this.callback = callback;
7. };
9. YAHOO.widget.SlidUp.prototype = {
11.     animate: function() {
12.     
13.         if(ecIsAnim)
14.            return;
15.         var tvanim = this;
16.         var dur = 0.3;
17.         
18.     var n=this.el;
19.     var pn=n.parentNode;
20.     n.position="absolute";
21.             
22.     var div=document.createElement("div");
23.     div.style.position="relative";
24.     div.style.overflow="hidden";
26.     pn.insertBefore(div,n);
27.     div.appendChild(n);
28.         
29.     var a1 = new YAHOO.util.Anim(n,{top:{to:-n.offsetHeight}},dur); 
30.     var a2= new YAHOO.util.Anim(div,{height:{to:0}},dur);
31.     a1.onComplete.subscribe(function(){ tvanim.onComplete(div,pn,n);});
32.         ecIsAnim=true;
33.         a1.animate();
34.         a2.animate();
35.     
36.     },
37.     onComplete: function(div,pn,n) {
38.         var s = n.style;
39.         s.display="none";
40.         n.position="relative";
41.     s.top="0";
42.         
43.         pn.insertBefore(n,div);
44.     pn.removeChild(div);
45.         ecIsAnim=false;
46.         this.callback();
47.     },
48.     toString: function() {
49.         return "SlidUp";
50.     }
51. };
55. YAHOO.widget.SlidDown = function(el, callback) {
56.     this.el = el;
57.     this.callback = callback;
58. };
60. YAHOO.widget.SlidDown.prototype = {
61.     
62.     animate: function() {
63.         if(ecIsAnim)
64.            return;
65.         var tvanim = this;
66.         var dur = 0.3; 
67.         
68.     var n=this.el;
69.     var pn=n.parentNode;
71.     var div=document.createElement("div");
72.     div.style.position="relative";
73.     div.style.height="0";
74.     div.style.overflow="hidden";
76.     pn.insertBefore(div,n);
77.     div.appendChild(n);
78.         
79.     n.position="absolute";
80.     n.style.display="block";
81.     n.style.height=n.offsetHeight;
82.     n.style.top=-n.offsetHeight+"px";
83.         
84.     var a1 = new YAHOO.util.Anim(n,{top:{to:0}},dur); 
85.     var a2= new YAHOO.util.Anim(div,{height:{to:n.offsetHeight}},dur);
86.     a1.onComplete.subscribe(function(){ tvanim.onComplete(div,pn,n);});
87.         ecIsAnim=true;
88.         a2.animate();
89.     a1.animate();   
90.     },
91.     onComplete: function(div,pn,n) {
92.     var s = n.style;
93.         n.position="relative";
94.     s.top="0";
95.         
96.         pn.insertBefore(n,div);
97.     pn.removeChild(div);
98.         ecIsAnim=false;
99.         this.callback();
100.     },
101.     toString: function() {
102.         return "SlidDown";
103.     }
104. };

使用的时候代码：

1. tree = new YAHOO.widget.TreeView("your Div id");
2.   tree.setExpandAnim("SlidDown");
3.   tree.setCollapseAnim("SlidUp");

修改treeview.css这个很重要：

1. /* the style of the div around each node's collection of children */
2. .ygtvchildren {position:relative }  //重要
3. * html .ygtvchildren { height:1%;position:relative }  

1. /*
2.   over
3. */