$( function()
{
/***对象方法，进行一些成员变量的赋值
变量：elem：要被上下移动的工具条区域名（元素名、id和class的组合）
perHight：每一格一次被移动的长度
slideN：工具栏中工具的行数
showN：可见的工具的行数（这里是3）
speed：一次移动所花的毫秒数
index：可见区域的第一行的索引
barElem：滑动条名（元素名、id和class的组合）
***/
function toolBar(elem,perHeight,slideN,showN,speed,index,barElem)
{……}
toolBar.prototype=
{
/***滑动条的高度的设置
高度计算公式：滑动条可设置的最大高度*可见的工具的行数/工具栏中工具的总行数
***/
initBar:function()
{……},
/***工具条滑动的函数，to是要被滑动到的索引，这函数在点上下按钮或移动滑动条的时候会被触发***/
slide:function(to)
{……},
/***滑动条滑动的函数，to是要被滑动到的索引，这函数在点上下按钮的时候会被触发，和slide函数同步实现***/
barSlide:function(to)
{……},
/***本函数为上下按钮添加点击事件
upelem：向上按钮的名字（元素名、id和class的组合）
downelem：向下按钮的名字（元素名、id和class的组合）
***/
clickTab:function(upelem,downelem)
{……},
/***拖动滑动条的函数，拖动后，工具框也进行相应移动。
elem：需要被移动的元素名（元素名、id和class的组合）
handle：使相应元素被移动所需要拖动的把柄元素名（元素名、id和class的组合）
uplev：被拖动元素最高点（这里是0）
downlev：被拖动元素的最低点（这里是196）
***/
drag:function(elem,handle,uplev,downlev)
{……}
}
/***这里进行对象的实例化，与相关函数的调用***/
})
完整的js代码如下：
复制代码 代码如下:
$(function()
{
function toolBar(elem,perHeight,slideN,showN,speed,index,barElem)
{
this.elem=$(elem);
this.perHeight=perHeight;
this.slideN=slideN;
this.showN=showN;
this.speed=speed;
this.index=index;
this.barElem=barElem;
}
toolBar.prototype=
{
initBar:function()
{
var tl=$(this.barElem).parent().height();
$(this.barElem).css({'height':tl*this.showN/this.slideN});
},
slide:function(to)
{
this.elem.animate({'top':-(to*this.perHeight)},this.speed)
},
barSlide:function(to)
{
var tl=$(this.barElem).parent().height();
$(this.barElem).animate({'top':tl*to/this.slideN},this.speed)
},
clickTab:function(upelem,downelem)
{
var _this=this;
$(upelem).bind('click',function()
{
if(_this.index>0)
{
_this.index--;
_this.slide(_this.index);
_this.barSlide(_this.index);
}
return false;
});
$(downelem).bind('click',function()
{
if(_this.index<_this.slideN-_this.showN)
{
_this.index++;
_this.slide(_this.index);
_this.barSlide(_this.index);
}
return false;
});
},
drag:function(elem,handle,uplev,downlev)
{
var _this=this;
var tl=$(this.barElem).parent().height();
var C=$(elem);
var dy, moveout;
var T = $(handle);
T.bind("selectstart", function()
{
return false;
});
T.mousedown(function(e)
{
//dx = e.clientX - parseInt(C.css("left"));
e=e?e:window.event;
dy = e.clientY - parseInt(C.css("top"));
C.mousemove(move).mouseout(out).css('opacity', 0.8);
T.mouseup(up);
});
function move(e)
{
e=e?e:window.event;
moveout = false;
if((e.clientY - dy)>=uplev&&(e.clientY - dy)<=(downlev-C.height()))
C.css({"top": e.clientY - dy});
}
function out(e)
{
e=e?e:window.event;
moveout = true;
setTimeout(function(){checkout(e);}, 100);
}
function up(e)
{
e=e?e:window.event;
var adaptTop;
var presTop=parseInt(C.css("top"));
C.unbind("mousemove", move).unbind("mouseout", out).css('opacity', 1);
T.unbind("mouseup", up);
//alert(parseInt(_this.slideN));
if(((presTop/(tl/_this.slideN))-parseInt(presTop/(tl/_this.slideN)))>=0.5)
{
_this.index=parseInt(presTop/(tl/_this.slideN))+1;
}
else
{
_this.index=parseInt(presTop/(tl/_this.slideN));
}
adaptTop=_this.index*(tl/_this.slideN);
_this.slide(_this.index);
C.css({"top":adaptTop});
}
function checkout(e)
{
e=e?e:window.event;
moveout && up(e);
}
}
}
var slength=$("#smallTools .innerToolBox ul").length;
var stBox=new toolBar("#smallTools .innerToolBox",69,slength,3,700,0,"#smallTools .innerBar");
stBox.initBar();
stBox.clickTab("#smallTools .upBtn","#smallTools .downBtn");
stBox.drag("#smallTools .innerBar","#smallTools .innerBar",0,196);
})
水平有限，如有错误，敬请批评指正。
您可能感兴趣的文章: