A-A+

jquery实现移动端TAB触屏切换效果

2016年01月13日 web前端设计 暂无评论 阅读 6 views 次

下面我们一起来看一个jquery实现移动端TAB触屏切换效果的例子,希望这个例子能够对各位朋友带来帮助.

我们使用移动端时可以通过触屏手势左右滑动来切换TAB栏目,如网易新闻等APP栏目切换。我们说的TAB一般由导航条和TAB对应的内容组成,切换导航条上的标签同时标签对应的内容也会跟着切换。本文将结合实例给大家介绍一个移动端TAB触屏切换效果。

我们准备一个TAB导航#pagenavi,里面包含TAB导航要切换的四个导航按钮,然后是切换的主体内容#slider,这里应该放置四个li与导航按钮对应,内容自定义。

  1. <div class="box-163css">   
  2.     <ul id="pagenavi" class="page">   
  3.         <li><a href="#/css.html" class="active">CSS3</a></li>   
  4.           <li><a href="#http://www.helloweba.net/jquery.html">JAVASCRIPT</a></li>   
  5.         <li><a href="#/php.html">PHP</a></li>   
  6.         <li><a href="#http://www.helloweba.net/web.html">HTML5</a></li>   
  7.     </ul>   
  8.     <div id="slider" class="swipe">   
  9.       <ul class="box01_list">   
  10.         <li class="li_list">   
  11.         ...   
  12.         </li>   
  13.         ...<!--总共4个li-->   
  14.       </ul>   
  15.     </div>   
  16. </div>  

当然,我们还需要给HTML加上css样式,本例已打包好css文件供大家下载。

由于是移动端应用,我们加载zepto.js,zepto就是体积小的jquery。然后需要加载触屏滑动插件touchslider.js。

  1. <script type="text/javascript" src="js/zepto_min.js"></script>   
  2. <script type="text/javascript" src="js/touchslider.js"></script>  

接下来我们就直接调用TouchSlider,通过设置绑定tab,滑动方向、速度、时间等信息实现内容切换,请看详细代码:

  1. <script type="text/javascript">   
  2.     var page='pagenavi';   
  3.     var mslide='slider';   
  4.     var mtitle='emtitle';   
  5.     arrdiv = 'arrdiv';   
  6.    
  7.     var as=document.getElementById(page).getElementsByTagName('a');   
  8.    
  9.     var tt=new TouchSlider({id:mslide,'auto':'-1',fx:'ease-out',direction:'left',speed:600,timeout:5000,'before':function(index){   
  10.         var as=document.getElementById(this.page).getElementsByTagName('a');   
  11.         as[this.p].className='';   
  12.         as[index].className='active';   
  13.         this.p=index;   
  14.         var txt=as[index].innerText;   
  15.         $("#"+this.page).parent().find('.emtitle').text(txt);   
  16.         var txturl=as[index].getAttribute('href');           
  17.         var turl=txturl.split('#');   
  18.         $("#"+this.page).parent().find('.go_btn').attr('href',turl[1]);   
  19.     }});   
  20.    
  21.     tt.page = page;   
  22.     tt.p = 0;   
  23.     for(var i=0;i<as.length;i++){   
  24.         (function(){   
  25.             var j=i;   
  26.             as[j].tt = tt;   
  27.             as[j].onclick=function(){   
  28.                 this.tt.slide(j);   
  29.                 return false;   
  30.             }   
  31.         })();   
  32.     }   
  33. </script>  
标签:

给我留言