- var posSwitch = new Class({
- options :{
- api : 'http://6.cn/6cntest/p/h.html', //待定
- transition : {duration: 1000,transition: Fx.Transitions.Cubic.easeOut}
- },
- initialize:function(parentId,boxClass,options){
- this.setOptions(options);
- this.idArr = []; //模块顺序的数组(发送到php端保存的数组)
- this.parentId = parentId; //模块的总父容器
- this.boxClass = boxClass; //模块的class
- this.boxs = $$('#' + this.parentId + ' div.'+ this.boxClass); //排序的模块数组
- this.num = this.boxs.length;
- if(this.num == 0) return; // 排序的模块个数
- for(var i=0; i<this.num; i++){
- var box = this.boxs[i]
- this.idArr.push(box.id);
- }
- $$('#'+this.boxs[0].id + ' p')[0].addClass('top');
- $$('#'+this.boxs[this.num-1].id + ' p')[0].addClass('bottom');
- var uplinks = $$('#' + this.parentId + ' a.up');
- var downlinks = $$('#'+ this.parentId + ' a.down');
- uplinks.each(function(ele){
- ele.addEvent('click',function(event){event.stop();this.switUp(ele)}.bindWithEvent(this))
- }.bind(this)
- )
- downlinks.each(function(ele){
- ele.addEvent('click',function(event){event.stop();this.switDown(ele)}.bindWithEvent(this))
- }.bind(this)
- )
- },
- switDown : function(ele){
- var thisObj = $(ele.parentNode.parentNode);
- var thisIndex = this.idArr.indexOf(thisObj.id);
- var thatObj = $(this.idArr[thisIndex+1]);
- this.idArr[thisIndex] = thatObj.id;
- this.idArr[thisIndex+1] = thisObj.id;
- var thisTop = thisObj.getStyle('top') == 'auto' ? 0 : thisObj.getStyle('top').toInt();
- var thatTop = thatObj.getStyle('top') == 'auto' ? 0 : thatObj.getStyle('top').toInt();
- var thisHeight = thisObj.getStyle('height').toInt(); // 块高
- var thatHeight = thatObj.getStyle('height').toInt();
- var e = new Fx.Styles(thisObj, this.options.transition);
- e.start({'top':[thisTop,thisTop+thatHeight],'opacity':[0.5,1]});
- var f = new Fx.Styles(thatObj, this.options.transition);
- f.start({'top':[thatTop, thatTop-thisHeight],'opacity':[0.5,1]});
- this.arrowChange();
- },
- switUp : function(ele){
- var thisObj = $(ele.parentNode.parentNode);
- var thisIndex = this.idArr.indexOf(thisObj.id);
- var thatObj = $(this.idArr[thisIndex-1]);
- this.idArr[thisIndex] = thatObj.id;
- this.idArr[thisIndex-1] = thisObj.id;
- var thisTop = thisObj.getStyle('top') == 'auto' ? 0 : thisObj.getStyle('top').toInt();
- var thatTop = thatObj.getStyle('top') == 'auto' ? 0 : thatObj.getStyle('top').toInt();
- var thisHeight = thisObj.getStyle('height').toInt(); // 块高
- var thatHeight = thatObj.getStyle('height').toInt();
- var e = new Fx.Styles(thisObj, this.options.transition);
- e.start({'top':[thisTop,thisTop-thatHeight],'opacity':[0.5,1]});
- var f = new Fx.Styles(thatObj, this.options.transition);
- f.start({'top':[thatTop, thatTop+thisHeight],'opacity':[0.5,1]});
- this.arrowChange();
- },
- arrowChange:function(){
- var links = $$('#'+ this.parentId + ' a.down, a.up');
- for(var i=0;i<links.length;i++){
- $(links[i].parentNode).removeClass('top').removeClass('bottom');
- }
- $$('#'+this.idArr[0] + ' p')[0].addClass('top');
- $$('#'+this.idArr[this.num-1] + ' p')[0].addClass('bottom');
- },
- save : function(){
- var url = this.options.api;
- var data = 'order='+ this.idArr + '&uid=' + pageMessage.uid;
- var callback = this.back.bind(this);
- alert(data);
- Request.reSend(url,data,callback);
- },
- back :function(httpobj){
- }
- })
- posSwitch.implement(new Events, new Options);
- window.addEvent('load', function(){
- mySwitch = new posSwitch('scrollWrap','myPanelBox');
- })
mootools位置切换类
最新推荐文章于 2020-08-05 08:37:05 发布