mootools位置切换类

测试地址： http://6.cn/user/myspace.php

1. var posSwitch = new Class({
3.     options :{
4.         api : 'http://6.cn/6cntest/p/h.html',  //待定
5.         transition : {duration: 1000,transition: Fx.Transitions.Cubic.easeOut}  
6.     },
7.     
8.     initialize:function(parentId,boxClass,options){
9.         
10.         this.setOptions(options);
11.         this.idArr = [];                 //模块顺序的数组(发送到php端保存的数组)
12.         this.parentId = parentId;        //模块的总父容器 
13.         this.boxClass = boxClass;        //模块的class
14.         this.boxs = $$('#' + this.parentId + ' div.'+ this.boxClass);      //排序的模块数组
15.         this.num = this.boxs.length; 
16.         if(this.num == 0) return;                                     // 排序的模块个数
17.         for(var i=0; i<this.num; i++){
18.             var box = this.boxs[i]
19.            this.idArr.push(box.id);
20.         }
21.         $$('#'+this.boxs[0].id + ' p')[0].addClass('top');
22.         $$('#'+this.boxs[this.num-1].id + ' p')[0].addClass('bottom');
23.         var uplinks = $$('#' + this.parentId + ' a.up');
24.         var downlinks = $$('#'+ this.parentId + ' a.down');
25.         uplinks.each(function(ele){
26.             ele.addEvent('click',function(event){event.stop();this.switUp(ele)}.bindWithEvent(this))
27.             }.bind(this)
28.          )
29.         downlinks.each(function(ele){
30.             ele.addEvent('click',function(event){event.stop();this.switDown(ele)}.bindWithEvent(this))
31.             }.bind(this)
32.          )
33.     },
34.     
35.     switDown : function(ele){
36.         var thisObj = $(ele.parentNode.parentNode);
37.         var thisIndex = this.idArr.indexOf(thisObj.id);
38.         var thatObj = $(this.idArr[thisIndex+1]);
39.         this.idArr[thisIndex] = thatObj.id;
40.         this.idArr[thisIndex+1] = thisObj.id;
41.         
42.         var thisTop = thisObj.getStyle('top') == 'auto' ? 0 : thisObj.getStyle('top').toInt();
43.         var thatTop = thatObj.getStyle('top') == 'auto' ? 0 : thatObj.getStyle('top').toInt();
44.         var thisHeight = thisObj.getStyle('height').toInt();    // 块高
45.         var thatHeight = thatObj.getStyle('height').toInt();
46.         var e = new Fx.Styles(thisObj, this.options.transition);
47.         e.start({'top':[thisTop,thisTop+thatHeight],'opacity':[0.5,1]});
48.         var f = new Fx.Styles(thatObj, this.options.transition);
49.         f.start({'top':[thatTop, thatTop-thisHeight],'opacity':[0.5,1]});
50.         this.arrowChange();
51.     },
52.     
53.     switUp : function(ele){
54.         var thisObj = $(ele.parentNode.parentNode);
55.         var thisIndex = this.idArr.indexOf(thisObj.id);
56.         var thatObj = $(this.idArr[thisIndex-1]);
57.         this.idArr[thisIndex] = thatObj.id;
58.         this.idArr[thisIndex-1] = thisObj.id;
59.         
60.         var thisTop = thisObj.getStyle('top') == 'auto' ? 0 : thisObj.getStyle('top').toInt();
61.         var thatTop = thatObj.getStyle('top') == 'auto' ? 0 : thatObj.getStyle('top').toInt();
62.         var thisHeight = thisObj.getStyle('height').toInt();    // 块高
63.         var thatHeight = thatObj.getStyle('height').toInt();
64.         var e = new Fx.Styles(thisObj, this.options.transition);
65.         e.start({'top':[thisTop,thisTop-thatHeight],'opacity':[0.5,1]});
66.         var f = new Fx.Styles(thatObj, this.options.transition);
67.         f.start({'top':[thatTop, thatTop+thisHeight],'opacity':[0.5,1]});
68.         this.arrowChange();
69.        
70.     },
71.     
72.     arrowChange:function(){
73.         var links = $$('#'+ this.parentId + ' a.down, a.up');
74.         for(var i=0;i<links.length;i++){
75.            $(links[i].parentNode).removeClass('top').removeClass('bottom');
76.         }
77.         $$('#'+this.idArr[0] + ' p')[0].addClass('top');
78.         $$('#'+this.idArr[this.num-1] + ' p')[0].addClass('bottom');
79.     
80.     },
81.     
82.     save : function(){
83.         var url = this.options.api;
84.         var data = 'order='+ this.idArr + '&uid=' + pageMessage.uid;
85.         var callback = this.back.bind(this);
86.         alert(data);
87.         Request.reSend(url,data,callback);
88.     },
89.     
90.     back :function(httpobj){
91.         
92.     }
95. })
96. posSwitch.implement(new Events, new Options);
97. window.addEvent('load', function(){
98.      mySwitch = new posSwitch('scrollWrap','myPanelBox');
99. })