mootools位置切换类

1.var posSwitch = new Class({
2.
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. }
93.
94.
95.})
96.posSwitch.implement(new Events, new Options);
97.window.addEvent('load', function(){
98. mySwitch = new posSwitch('scrollWrap','myPanelBox');
99.})