项目中有一个待办模块,其中由于待办过多,需要做一个左移动和右移动,此处移动模块为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="";
}
}
}
});
欢迎讨论
分享到:
相关推荐
协助达成位置移动、大小改变、透明度和其他的网页效果。 浏览器历史纪录管理工具 协助网页程式使用浏览器之上一页与书签(我的最爱)工具。 连线工具 协助管理跨浏览器的 XMLHttpRequest 功能。他也整合了表单传送...
使用 CONTROL 键和光标键在不推动任何宝石的情况下尽可能向一个方向移动。 使用 SHIFT 键,您将尽可能向一个方向移动,如果宝石挡住,可能会推动它。 使用鼠标左键移动到任何你可以到达的地方,而无需推动任何宝石...
Java二进制IO类与文件复制操作实例 16个目标文件 内容索引:Java源码,初学实例,二进制,文件复制 Java二进制IO类与文件复制操作实例,好像是一本书的例子,源代码有的是独立运行的,与同目录下的其它代码文件互不联系...
1.2 在上移和下移以后,我们将移动以后的两行的id和datagrid-row-index属性也必须互换,这样能保证datagrid-row-index=0的行肯定是页面显示的表格的第一行,=1的是第二行等等。将来保存的时候,就是通过取这个属性值...
基于JAVA的UDP服务器模型源代码,内含UDP服务器端模型和UDP客户端模型两个小程序,向JAVA初学者演示UDP C/S结构的原理。 简单聊天软件CS模式 2个目标文件 一个简单的CS模式的聊天软件,用socket实现,比较简单。 ...
注:ExtAspNet基于一些开源的程序ExtJS, HtmlAgilityPack, Nii.JSON, YUICompressor。 示例: http://extasp.net/ 开源: http://extaspnet.codeplex.com/ 博客: http://sanshi.cnblogs.com/ 邮箱: sanshi.ustc@gmail...
注:ExtAspNet基于一些开源的程序ExtJS, HtmlAgilityPack, Nii.JSON, YUICompressor。 示例: http://extasp.net/ 开源: http://extaspnet.codeplex.com/ 博客: http://sanshi.cnblogs.com/ 邮箱: sanshi.ustc@gmail...
ftp4j是一个FTP客户端Java类库,实现了FTP客户端应具有的大部分功能文件(包括上传和下 载),浏览远程FTP服务器上的目录和文件,创建、删除、重命,移动远程目录和文件。ftp4j提供多种方式连接到远程FTP服务器包括...
ftp4j是一个FTP客户端Java类库,实现了FTP客户端应具有的大部分功能文件(包括上传和下 载),浏览远程FTP服务器上的目录和文件,创建、删除、重命,移动远程目录和文件。ftp4j提供多种方式连接到远程FTP服务器包括...
ftp4j是一个FTP客户端Java类库,实现了FTP客户端应具有的大部分功能文件(包括上传和下 载),浏览远程FTP服务器上的目录和文件,创建、删除、重命,移动远程目录和文件。ftp4j提供多种方式连接到远程FTP服务器包括...
ftp4j是一个FTP客户端Java类库,实现了FTP客户端应具有的大部分功能文件(包括上传和下 载),浏览远程FTP服务器上的目录和文件,创建、删除、重命,移动远程目录和文件。ftp4j提供多种方式连接到远程FTP服务器包括...
ftp4j是一个FTP客户端Java类库,实现了FTP客户端应具有的大部分功能文件(包括上传和下 载),浏览远程FTP服务器上的目录和文件,创建、删除、重命,移动远程目录和文件。ftp4j提供多种方式连接到远程FTP服务器包括...
ftp4j是一个FTP客户端Java类库,实现了FTP客户端应具有的大部分功能文件(包括上传和下 载),浏览远程FTP服务器上的目录和文件,创建、删除、重命,移动远程目录和文件。ftp4j提供多种方式连接到远程FTP服务器包括...
ftp4j是一个FTP客户端Java类库,实现了FTP客户端应具有的大部分功能文件(包括上传和下 载),浏览远程FTP服务器上的目录和文件,创建、删除、重命,移动远程目录和文件。ftp4j提供多种方式连接到远程FTP服务器包括...
ftp4j是一个FTP客户端Java类库,实现了FTP客户端应具有的大部分功能文件(包括上传和下 载),浏览远程FTP服务器上的目录和文件,创建、删除、重命,移动远程目录和文件。ftp4j提供多种方式连接到远程FTP服务器包括...
ftp4j是一个FTP客户端Java类库,实现了FTP客户端应具有的大部分功能文件(包括上传和下 载),浏览远程FTP服务器上的目录和文件,创建、删除、重命,移动远程目录和文件。ftp4j提供多种方式连接到远程FTP服务器包括...
ftp4j是一个FTP客户端Java类库,实现了FTP客户端应具有的大部分功能文件(包括上传和下 载),浏览远程FTP服务器上的目录和文件,创建、删除、重命,移动远程目录和文件。ftp4j提供多种方式连接到远程FTP服务器包括...
ftp4j是一个FTP客户端Java类库,实现了FTP客户端应具有的大部分功能文件(包括上传和下 载),浏览远程FTP服务器上的目录和文件,创建、删除、重命,移动远程目录和文件。ftp4j提供多种方式连接到远程FTP服务器包括...
ftp4j是一个FTP客户端Java类库,实现了FTP客户端应具有的大部分功能文件(包括上传和下 载),浏览远程FTP服务器上的目录和文件,创建、删除、重命,移动远程目录和文件。ftp4j提供多种方式连接到远程FTP服务器包括...