业务需求:
1. 菜单个数不固定,当菜单个数长度小于给定范围宽度,则左右移动控制按钮不激活(呈灰色状态)。
2. 初始未移动,右侧按钮为灰色,左边按钮为彩色,提示用户可以点击左侧的移动查看菜单超出给定范围的部分。
3. 当移动开始,左右按钮都应为彩色,提示用户此时可以进行左右两边的移动操作。
4. 当移动结束,当前方向的控制按钮应转变为灰色,提示用户此方向菜单已经移动结束。
5. 若某侧控制按钮可用,则鼠标经过此按钮会有高亮提示。
6. 用户点击菜单会有高亮效果,同时下方内容模块随菜单点击而变化。
在写这个模块的时候,本来我是打算也用jquery来实现,因为本次项目绝大部分程序都是基于jquery的,如果这个模块用jquery来写也是相当简单、快捷的,但偶貌似有段时间没写javascrip了,所以横下一条心,哪怕代码再繁琐点,手指茧再厚点,加班时间再长点,也要用javascript来写(老本可不能忘啊!)。最后就出了这个javascript版本的,事实上花的时间也不长,呵呵。
有2个需求是我自己想做的,但因为项目时间的问题,我没有做。首先,移动速度是匀速,如果菜单项太多,用户用起来会不会觉得太慢?我想做个加速运动,这个用jquery写可就太简单了 T_T(又提到jq了,说了不提它的啊^&*&@%)。再者,由于目前移动的步长是定死了的,菜单移动过程中会出现一个菜单一半显示在外面,一半已经移动进遮罩层,如果用户刚好要点击这个菜单,交互似乎就显得不够友好了。如果每个菜单宽度固定,可以很容易得到一个移动步长。如果菜单不固定怎么做了(我还没想好,谁能给我一个思路?)
这两个需求有空再添加上去。反正基本业务需求已经完成,我就稍稍偷懒一下吧。
需求说完了,说下模块功能构成。该模块功能由两部分组成,一个是菜单移动,另一个是选项卡切换。这次主要是做移动程序,选项卡切换用得是自己写的一个选项卡插件《JQuery制作的选项卡改进版》,拿来即用。
Ok,分析部分说完了。就程序本身,我觉得不是什么很难的东东。就看看左右移动的两个具体方法:
向左移动:
1 goLeftScroll:function(){
2 var iWidth = parseInt(this.scrollDiv.style.left);
3 //当菜单的左坐标绝对值小于等于偏移宽度(由菜单总宽度减去外部容器宽度得到,该值则为移动的路程值)
4 if(Math.abs(iWidth) <= this.offset){
5 //菜单左坐标在当前值基础上减去预设的步长值
6 this.scrollDiv.style.left = iWidth - this.step + "px";
7 //因为移动已经开始,检测到右侧按钮如果会灰色,则修改样式为激活
8 if(ctrlClass.hasClass(this.oCtrlR,this.rightEnd))
9 ctrlClass.removeClass(this.oCtrlR,this.rightEnd);
10 }else if(Math.abs(iWidth) > this.offset){
11 ctrlClass.addClass(this.oCtrlL,this.leftEnd);
12 return;
13 }
14 }
向右移动:
其他的也就不说了,程序很简单的。关键是搞清什么需求,理清思路再来写具体程序就很容易了。大家觉得效果还可以,就多看几遍源码,其义自现。我就不放独立下载地址了,鼓励大家多看源码。Demo上的css、js和html都是独立的,有需要的朋友看看Demo后自己提取吧,其实也很简单的啦。
1 goRightScroll:function(){
2 var iWidth = parseInt(this.scrollDiv.style.left);
3 if(iWidth < 0){
4 this.scrollDiv.style.left = iWidth + this.step + "px";
5 ctrlClass.removeClass(this.oCtrlL,this.leftEnd);
6 }else if(iWidth ==0){
7 ctrlClass.addClass(this.oCtrlR,this.rightEnd);
8 return;
9 }
10 }
Demo地址:
后记:这个demo貌似在chrome下失效,暂时我还不知道怎么回事?麻烦哪位高手能告诉我问题出在哪儿,先在此感谢了!