基于YUI下的标签移动操作，包括点击后的左移动和右移动

项目中有一个待办模块，其中由于待办过多，需要做一个左移动和右移动，此处移动模块为li，即每点击一次移动一个li的位置，li长度自适应。

 

AP.widget.TodoLableMove = new AP.Class({
    /*移动窗体的父(外层显示)dom对象；必填；传入参数为parentId*/
    parentDom:null,
    /*移动窗体dom对象；必填；传入参数为moveId*/
    moveDom:null,
    /*左移动按钮；可填；传入参数为leftId*/
    moveLeftDom:null,
    /*右移动按钮；可填；传入参数为rightId*/
    moveRightDom:null,
    /*每次移动宽度，如果为-1则移动显示中第一个标签的宽度；可填；传入参数为moveSize*/
    moveSize:-1,
    /*移动速度，值越大越慢；可填；传入参数为setTime*/
    setTime:10, //移动速度
    showSize:4,//最多显示数
    lables:null,//标签列表
    firstIndex:0,//显示的第一个的li
    lastIndex:0,//显示的最后一个的li
    timeIndex:0,//滚动计数
    outWidth:0,//外层宽度
    innerWidth:0,//内层宽度
    scrolln:0,
    //构造函数
    initialize : function(_arg){
        //复制参数。
        AP.hashExtend(this,_arg);
       
        if(_arg.parentId){
            this.parentDom=D.get(_arg.parentId);
            this.outWidth=this.parentDom.offsetWidth;
        }
        if(_arg.moveId){
            this.moveDom=D.get(_arg.moveId);
        }
        if(_arg.leftId){
            this.moveLeftDom=D.get(_arg.leftId);
            E.on(this.moveLeftDom,"click",this._moveLeft,this);
        }
        if(_arg.rightId){
            this.moveRightDom=D.get(_arg.rightId);
            E.on(this.moveRightDom,"click",this._moveRight,this);
        }
    },
    /*
     * 初始化
     */
    _setLable:function(){
        this.lables = new Array();
        var lables=D.query("li",this.moveDom);
        var j=0;
        this.innerWidth=0;
        this.scrolln=0;
        this.firstIndex=0;
        this.lastIndex=0;
        for(var i=0;i<lables.length;i++){
            if(!lables[i].style.display) this.lables[j++]=lables[i];
        }
        for(var i=this.firstIndex;i<this.lables.length;i++){
            this.innerWidth=this.innerWidth+this.lables[i].offsetWidth;
        }
        this.moveLeftDom.style.display="none";
        this._IsRightShow();
    } ,
     
    /*左移动函数*/
    _moveLeft:function(e,f){
        f.timeIndex=0;
        f.lastIndex--;
        f._setScroll_L();
        f._IsleftShow();
    },
    /*右移动函数*/
    _moveRight:function(e,f){
        f.timeIndex=0;
        f.firstIndex++;
        f._setScroll_R();
        f._IsRightShow();
    },
    //左移动
    _setScroll_L:function(){
        var width = this.lables[this.firstIndex].offsetWidth;
        this.scrolln ++;
        if(this.scrolln>=0){//滚到最左边时
            this.moveLeftDom.style.display="none";
            this.moveRightDom.style.display="";
            return
        }else if((this.scrolln+this.innerWidth)<=this.outWidth){//滚到最右边时
            this.moveLeftDom.style.display="";
            this.moveRightDom.style.display="none";
            this.moveDom.style.left=this.scrolln+"px";
            if(this.timeIndex<width) this.timeIndex++;
        }else{//在滚动区域内
            this.moveLeftDom.style.display="";
            this.moveRightDom.style.display="";
            this.moveDom.style.left=this.scrolln+"px";
            if(this.timeIndex<width) this.timeIndex++;
            else return
        }
        var o = this;
        function m(){o._setScroll_L();}
        setTimeout(m,this.setTimeOut);
    },
    //右移动
    _setScroll_R:function(){
        var width = this.lables[this.firstIndex-1].offsetWidth;
        this.scrolln --;
        if(this.scrolln>=0){//滚到最左边时
            this.moveLeftDom.style.display="none";
            this.moveRightDom.style.display="";
            return
        }else if((this.scrolln+this.innerWidth)<=this.outWidth){//滚到最右边时
            this.moveLeftDom.style.display="";
            this.moveRightDom.style.display="none";
            this.moveDom.style.left=this.scrolln+"px";
            if(this.timeIndex<width) this.timeIndex++;
            else return
        }else{//在滚动区域内
            this.moveLeftDom.style.display="";
            this.moveRightDom.style.display="";
            this.moveDom.style.left=this.scrolln+"px";
            if(this.timeIndex<width) this.timeIndex++;
            else return
        }
        var o = this;
        function m(){o._setScroll_R();}
        setTimeout(m,this.setTimeOut);
    },
    //左移动时标签显示
    _IsleftShow:function(){
        var inner_Width=0;
        for(var i=this.lastIndex;i>=0;i--){
            this.lables[i].style.display="";
            inner_Width=inner_Width+this.lables[i].offsetWidth;
            if(inner_Width<this.outWidth){
                this.firstIndex=i;
            }
        }
        this._IsRightShow();
    },
    //右移动时标签显示
    _IsRightShow:function(){
        var inner_Width=0;
        if(this.firstIndex==0) this.moveLeftDom.style.display="none";
        else this.moveLeftDom.style.display="";
        for(var i=this.firstIndex;i<this.lables.length;i++){
            this.lables[i].style.display="";
            inner_Width+=this.lables[i].offsetWidth;
            if(inner_Width<this.outWidth){
                this.lastIndex=i;
                this.moveRightDom.style.display="none";
            }else{
                this.lables[i].style.display="none";
                this.moveRightDom.style.display="";
            }
        }
    }
});

 

欢迎讨论