首先先抛出需求: Tabs区域的Tabs的个数是根据后台传过来的,当Tabs数目较多的时候,需要设计左右滑动的按钮通过点击显示隐藏的Tabs。
Tabs区域的HTML代码结构为:
contentBottomHTML += '<span id="leftArrow" class="span_icon" style="margin:0 5px;display:inline-block; vertical-align: top;" οnclick="Invoice.clickArrow(-1)"><i style="color:#059911; vertical-align:top;line-height:40px" class="fa fa-chevron-left"></i></span>' + '<div style="position:relative;overflow:hidden;width:415px;display:inline-block;height:40px"> <ul class="nav nav-tabs" id="nav-individual" style="width:10000px; left:0;position:absolute;transition:left 0.2s"> '
contentBottomHTML += '</ul></div><span class="span_icon" style="margin:0 5px;transition:right 0.2s;vertical-align:top" οnclick="Invoice.clickArrow(1)"><i style="color:#059911;vertical-align:top;line-height:40px" class="fa fa-chevron-right"></i></span>
contentBottomHTML指的是Tabs拼接的代码。
1.在Tabs区域外分别加了class为fa fa-chevron-right和fa fa-chevron-left的标签,但由于布局问题需要用<div>标签将<ul>标签包起来,并设置行高才可以同行显示(css都写在style属性里)。
2.思路:左右滑动需要移动的是整个Tabs区域,先拿到这个区域的标签,本来是以为可以通过在第一步添加的<i>标签中定义onclick事件,并在事件体中写$("#nav-individual").scrollLeft(50)中实现效果,最后发现还是too young, too simple。组内杰大佬过来一会就给了更为简便的实现效果的方案。
3.实现(write less, do more,先贴代码)
Invoice.clickArrow = function(direction){
var navIndividual = $("#nav-individual");
var oldLeft = navIndividual.css('left');
var numOldLeft = oldLeft.slice(0,oldLeft.length-2)
var newData =((parseInt(numOldLeft) + direction*(-125)));
if((newData > 0 ) || newData < -(Invoice.tabLen*125 - 350)){
return false;
}
navIndividual.css('left',newData +"px")
}
简单解释一下,函数传参direction是为了控制左移右移的动作,首先我们拿到<ul>标签,通过方法拿到每次点击时距离最左的距离,然后再定义了每次点击左移或者右移的距离(这里有个字符串剪切和整型转换的小细节,需要慢慢调一下),由于Tabs数目是有限的,需要判断Tabs停止的条件。当Tabs标签距离左边超过0(左移最大距离)或者小于最大Tabs宽度减去下面表格宽度的时候(右移最大距离),点击事件不再执行(tabLen指的是小Tabs的个数,所占宽度为125px)。最后将Left属性值设置为我们点击为之间设置的值。(PS:在最后效果实现的时候加了Transition过度动画让效果看起来更加流畅。)
整个Tabs左右滑动的逻辑不算十分复杂,但却是对CSS很好的复习方式,也是对业务实现能力好的锻炼机会。