移动web：tab选项卡
平常做移动端会用到tab选项卡，这和PC端有些区别，移动端是触摸滑动切换，PC端是点击、移入切换。
这里滑动切换就是一个移动端事件的应用，这里主要用到的触摸事件：touchstart、touchmove、touchend。
和做其他的效果一样，先有html结构，css样式修饰，再写JS代码。
html:
<div class="mtabs" id="tabs"> <ul class="mhead"> <li>tab1</li> <li>tab2</li> <li>tab3</li> </ul> <div class="mcontent"> <ul> <li>tab1内容内容内容内容</li> <li>tab1内容内容内容内容</li> <li>tab1内容内容内容内容</li> <li>tab1内容内容内容内容</li> <li>tab1内容内容内容内容</li> </ul> <ul> <li>tab2内容内容内容内容</li> <li>tab2内容内容内容内容</li> <li>tab2内容内容内容内容</li> <li>tab2内容内容内容内容</li> <li>tab2内容内容内容内容</li> </ul> <ul> <li>tab3内容内容内容内容</li> <li>tab3内容内容内容内容</li> <li>tab3内容内容内容内容</li> <li>tab3内容内容内容内容</li> <li>tab3内容内容内容内容</li> </ul> </div> </div><!-- End .mtabs -->
css:
body,div,ul,li{ margin:0; padding:0; } ul,li { list-style:none; } body { font-size:100%; font-family:Helvetica,STHeiti,Droid Sans Fallback; } .mtabs { width:100%; overflow:hidden; } .mhead { height:38px; border-top:2px solid #9ac7ed; background:#ECF2F6; -webkit-tap-highlight-color:rgba(0,0,0,0); } .mhead li { position:relative; font-size:1.125em; text-align:center; float:left; width:64px; height:38px; line-height:38px; color:#2a70be; } .mhead li.current { border-top:2px solid #2a70be; margin-top:-2px; background:#FFF; color:#c14545; } .mcontent { width:100%; overflow:hidden; } .mcontent ul { width:100%; float:left; } .mcontent li { height:35px; line-height:35px; font-size:1.125em; padding:0 10px; }
下面的截图是想要的一个效果预览：
下面是实际效果，可以在Chrome的移动模式查看：
- tab1
- tab2
- tab3
- tab1内容内容内容内容
- tab1内容内容内容内容
- tab1内容内容内容内容
- tab1内容内容内容内容
- tab1内容内容内容内容
- tab2内容内容内容内容
- tab2内容内容内容内容
- tab2内容内容内容内容
- tab2内容内容内容内容
- tab2内容内容内容内容
- tab3内容内容内容内容
- tab3内容内容内容内容
- tab3内容内容内容内容
- tab3内容内容内容内容
- tab3内容内容内容内容
先贴上JS代码，供参考
/**
* LBS mTabs
* Date: 2014-5-10
* ===================================================
* opts.mtab tabs外围容器/滑动事件对象(一个CSS选择器)
* opts.mhead tabs标题容器/点击对象(一个CSS选择器)
* opts.mcontent tabs内容容器/滑动切换对象(一个CSS选择器)
* opts.index tabs索引(默认0) 指定显示哪个索引的标题、内容
* opts.current tabs当前项的类名(默认current)
* ===================================================
**/
;(function(){
window.mTabs = function(opts){
if(typeof opts === undefined) return;
//取得tabs外围容器、标题容器、内容容器
this.mtab = document.querySelector(opts.mtab);
this.mhead = document.querySelector(opts.mhead);
this.mcontent = document.querySelector(opts.mcontent);
//取得标题容器内选项集合、内容容器内容集合
this.mheads = this.mhead.children;
this.mcontents = this.mcontent.children;
this.length = this.mheads.length;
if(this.length < 1) return;
if(opts.index > this.length-1) opts.index = this.length-1;
this.index = this.oIndex = opts.index || 0;
this.current = opts.current || 'current'; //当前活动选项类名
this.touch = {};//自定义一个对象 用来保存手指触摸相关信息
this.init();
}
mTabs.prototype = {
init: function(opts){
this.set();
this.initset();
this.bind();
},
initset: function(){
for(var i = 0; i < this.length; i++){
this.mheads[i].index = i;//设置了一个属性 方便点击时判断是点了哪一项
this.mheads[i].className = this.mheads[i].className.replace(this.current,'');
this.mcontents[i].className = this.mcontents[i].className.replace(this.current,'');
}//初始化设置、先清空手动加在标题或内容HTML标签的当前类名（this.current）、再设置哪一项为当前选项并设置类名
this.mheads[this.index].className += ' '+this.current;
this.mcontents[this.index].className += ' '+this.current;
//对应的内容要显示在可视区域
//this.mcontent.style.webkitTransform = this.mcontent.style.transform = "translateX(" + (-this.index * this.width) + "px)";
//this.mcontent.style.webkitTransform = this.mcontent.style.transform = "translate3d(" + (-this.index * this.width) + "px,0,0)";
},
set: function(){//获取浏览器的视口宽度、并设置内容容器的宽度、每一项内容区域的宽度，屏幕旋转，浏览器窗口变换会再次设置这些值
this.width = document.documentElement.clientWidth || document.body.clientWidth;
this.mcontent.style.width = this.length * this.width + 'px';
for(var i = 0; i < this.length; i++) this.mcontents[i].style.width = this.width + 'px';//调整在可视区域显示的内容项
//this.mcontent.style.webkitTransform = this.mcontent.style.transform = "translateX(" + (-this.index * this.width) + "px)";
this.mcontent.style.webkitTransform = this.mcontent.style.transform = "translate3d(" + (-this.index * this.width) + "px,0,0)";
},
bind: function(){
//绑定各种事件
var _this = this;
this.mtab.addEventListener("touchstart",function(e){
_this.touchStart(e);
}, false);
this.mtab.addEventListener("touchmove",function(e){
_this.touchMove(e);
}, false);
this.mtab.addEventListener("touchend",function(e){
_this.touchEnd(e);
}, false);
this.mtab.addEventListener("touchcancel",function(e){
_this.touchEnd(e);
}, false);
this.mhead.addEventListener("click",function(e){
_this.touchClick(e);
}, false);
this.mcontent.addEventListener('webkitTransitionEnd',function(){
_this.transitionEnd();
}, false);
window.addEventListener("resize", function(){
setTimeout(function(){
_this.set();
},100);
}, false);
window.addEventListener("orientationchange",function(){
setTimeout(function(){
_this.set();
},100);
}, false);
},
touchStart: function(e){
this.touch.x = e.touches[0].pageX;
this.touch.y = e.touches[0].pageY;
this.touch.time = Date.now();
this.touch.disX = 0;
this.touch.disY = 0;
this.touch.fixed = ''; //重要 这里采用了判断是滚动页面行为、还是切换选项行为 如果是滚动页面就在滑动时只滚动页面 相应的切换选项就切换不会滚动页面
},
touchMove: function(e){
if(this.touch.fixed === 'up') return;
e.stopPropagation();
if(e.touches.length > 1 || e.scale && e.scale !== 1) return;
this.touch.disX = e.touches[0].pageX - this.touch.x;
this.touch.disY = e.touches[0].pageY - this.touch.y;
if(this.touch.fixed === ''){//行为判断 采用这种方式 主要解决手指按下移动(左上、右上)时滑动切换和滚动页面同时执行的问题
if( Math.abs(this.touch.disY) > Math.abs(this.touch.disX) ){
this.touch.fixed = 'up';
}else{
this.touch.fixed = 'left';
}
}
if(this.touch.fixed === 'left'){
e.preventDefault();
if( (this.index === 0 && this.touch.disX > 0) || (this.index === this.length-1 && this.touch.disX < 0) ) this.touch.disX /= 4; //在 第一项向右滑动、最后一项向左滑动 时
//this.mcontent.style.webkitTransform = this.mcontent.style.transform = "translateX(" + ( this.touch.disX - this.index * this.width ) + "px)";
this.mcontent.style.webkitTransform = this.mcontent.style.transform = "translate3d(" + ( this.touch.disX - this.index * this.width ) + "px,0,0)";
}
},
touchEnd: function(e){
if(this.touch.fixed === 'left'){
var _this = this, X = Math.abs(this.touch.disX);
this.mcontent.style.webkitTransition = this.mcontent.style.transition = 'all 100ms';
if( (Date.now() - this.touch.time > 100 && X > 10) || X > this.width/2 ){
this.touch.time = Date.now();
this.touch.disX > 0 ? this.index-- : this.index++;
this.index < 0 && (this.index = 0);
this.index > this.length - 1 && (this.index = this.length - 1);
if(this.index === this.oIndex) this.mcontent.style.webkitTransition = this.mcontent.style.transition = 'all 300ms';
if(this.index !== this.oIndex) this.replace();
}
//this.mcontent.style.webkitTransform = this.mcontent.style.transform = "translateX(" + (-this.index * this.width) + "px)";
this.mcontent.style.webkitTransform = this.mcontent.style.transform = "translate3d(" + (-this.index * this.width) + "px,0,0)";
}
},
transitionEnd: function(){
this.mcontent.style.webkitTransition = this.mcontent.style.transition = 'all 0ms';
},
touchClick: function(e){
var target = e.target;
if(target.nodeType === 1 && target.index !== undefined){
if(target.index === this.index) return;
e.preventDefault();
e.stopPropagation();
this.index = target.index;
this.mcontent.style.webkitTransition = this.mcontent.style.transition = 'all 100ms';
//this.mcontent.style.webkitTransform = this.mcontent.style.transform = "translateX(" + (-this.index * this.width) + "px)";
this.mcontent.style.webkitTransform = this.mcontent.style.transform = "translate3d(" + (-this.index * this.width) + "px,0,0)";
this.replace();
}
},
replace: function(){
this.mheads[this.index].className += ' '+this.current;
this.mheads[this.oIndex].className = this.mheads[this.oIndex].className.replace(this.current,'').trim();
this.mcontents[this.index].className += ' '+this.current;
this.mcontents[this.oIndex].className = this.mcontents[this.oIndex].className.replace(this.current,'').trim();
this.oIndex = this.index;
}
}
}());
使用方式很简单，如下
document.addEventListener('DOMContentLoaded',function(){
//use mTabs
new mTabs({
mtab: '#tabs',
mhead: '#tabs .mhead',
mcontent: '#tabs .mcontent'
});
/*new mTabs({
mtab: '#tabs',
mhead: '#tabs .mhead',
mcontent: '#tabs .mcontent',
index: 1,
current: 'active'
});*/
},false);
mtab: <div class="mtabs" id="tabs"> //.. </div> mhead: <ul class="mhead"> //.. </ul> mcontent: <div class="mcontent"> //.. </div>
在此说下思路：
先获得一个tabs容器对象(mtab)，它包含了两个对应的类集合容器，一个是标签栏(mhead)、一个是内容栏(mcontent)，再分别取得类集合容器里面对应的选项mheads、mcontents。
this.mtab = document.querySelector(opts.mtab); this.mhead = document.querySelector(opts.mhead); this.mcontent = document.querySelector(opts.mcontent); this.mheads = this.mhead.children; this.mcontents = this.mcontent.children;
获取设备浏览器窗口的宽，并更新内容容器(mcontent)的宽，内容项的宽，一般在页面都会有文档声明 <!DOCTYPE html> document.documentElement.clientWidth 就能获取浏览器窗口的宽。
this.width = document.documentElement.clientWidth || document.body.clientWidth; this.mcontent.style.width = this.length * this.width + 'px'; for(var i = 0; i < this.length; i++) this.mcontents[i].style.width = this.width + 'px';
在手指触摸按上时(在tabs容器对象上), 获取手指按下时在页面的位置 ( e.touches[0].pageX)。 touchs想象成有几根手指，只需要第一根按下的手指( touches[0] )。初始化了一个行为判断 this.touch.fixed (当在tabs上滑动时是要滚动页面还是要切换选项卡)。
this.touch.x = e.touches[0].pageX; //.. this.touch.fixed = '';
在移动手指时，做出行为的判断。先获得移动的距离(左右方向、上下方向)，根据两个方向的值比较判断是哪种行为。
this.touch.disX = e.touches[0].pageX - this.touch.x;
this.touch.disY = e.touches[0].pageY - this.touch.y;
//..
if(this.touch.fixed === ''){
if( Math.abs(this.touch.disY) > Math.abs(this.touch.disX) ){
this.touch.fixed = 'up';
}else{
this.touch.fixed = 'left';
}
}
在移动手指时，内容容器(mcontent)也会跟着移动，并且做了在处于第一项和最后一项时的移动限制。
if( (this.index === 0 && this.touch.disX > 0) || (this.index === this.length-1 && this.touch.disX < 0) ) this.touch.disX /= 4;
在手指离开屏幕的时候，做出切换判断，是向左还是向右。在第一项时，不能向左切换，最后一项时不能向右切换。
this.touch.disX > 0 ? this.index-- : this.index++; this.index < 0 && (this.index = 0); this.index > this.length - 1 && (this.index = this.length - 1);
最后是真正的移动切换，用了css3动画切换，translateX 或者 translate3d .
//this.mcontent.style.webkitTransform = this.mcontent.style.transform = "translateX(" + (-this.index * this.width) + "px)";
this.mcontent.style.webkitTransform = this.mcontent.style.transform = "translate3d(" + (-this.index * this.width) + "px,0,0)";
代码中有个transitionEnd方法，配合webkitTransitionEnd事件在动画切换执行完成时调用。这里调用这个方法是用来清除动画定义的持续时间。
transitionEnd: function(){
this.mcontent.style.webkitTransition = this.mcontent.style.transition = 'all 0ms';
}
this.mcontent.addEventListener('webkitTransitionEnd',function(){
_this.transitionEnd();
}, false);
点击切换是判断点击了哪一项，在初始设置时已经为每一项保存了索引值(index)，根据对应的索引值，切换选项，更新状态。可以循环绑定点击事件，也可以使用事件委托，这里使用的是事件委托。
this.mheads[i].index = i;
touchClick: function(e){
var target = e.target;
if(target.nodeType === 1 && target.index !== undefined){
//..
this.index = target.index;
//..
this.mcontent.style.webkitTransform = this.mcontent.style.transform = "translate3d(" + (-this.index * this.width) + "px,0,0)";
}
}
this.mhead.addEventListener("click",function(e){
_this.touchClick(e);
}, false);
tab选项卡主要是获得两组对应的类似集合(一组标签，一组内容)，两个类似数组都有索引值(数组下标)，通过这个索引值，做出对应的切换。获取索引值是tab选项卡的关键，移动web端的选项卡主要是增加了触摸事件操作这个索引值。加上定时器，每隔多少时间增加或者减少这个索引值，自动播放也就完成了。会了tab选项卡也就会了图片的切换，焦点图什么的，原理都是一样。
tab选项卡下载