接下来就是给它添加脚本代码了。为了方便,在这里用的是jQuery库。
我决定为它建立一个对象,大致成员变量如下:
- $( 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);
- })
(责任编辑:ken)