Jquery mobile terminal TAB touch screen switch implementation effect, jquerytab

Jquery mobile terminal TAB touch screen switch implementation effect, jquerytab

When using the mobile terminal, We can slide left and right through the touch screen gesture to switch the TAB column, such as Netease news and other APP columns. The TAB we mentioned is generally composed of the navigation bar and the content corresponding to the TAB. The tabs on the navigation bar are switched and the corresponding content of the TAB is also switched. This article will introduce you to a mobile terminal with the help of examples.

We have prepared a TAB navigation # pagenavi, which contains the four navigation buttons to be switched for the TAB navigation, and then the main content to be switched # slider. Here we should place four li maps with the navigation buttons, custom content.

<Div class = "box-163css"> <ul id = "pagenavi" class = "page"> <li> <a href = "#"> CSS3 </a> </li> <li> <a href = "#"> JAVASCRIPT </a> </li> <a href = "#"> PHP </a> </li> <li> <a href = "#"> HTML5 </a> </li> </ul> <div id = "slider" class = "swipe"> <ul class = "box01_list"> <li class = "li_list">... </li>... <! -- A total of four li --> </ul> </div>

Of course, we also need to add css styles to HTML, which can be set according to our habits and interests.

Because it is a mobile application, weLoad zepto. jsZepto is a small jquery. Then you needLoad touch screen slide plug-in touchslider. js.

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

Next, we will directly call TouchSlider to implement Content Switching by setting the binding tab, sliding direction, speed, time, and other information. Please refer to the detailed code:

<script type="text/javascript">  var page='pagenavi';  var mslide='slider';  var mtitle='emtitle';  arrdiv = 'arrdiv';   var as=document.getElementById(page).getElementsByTagName('a');   var tt=new TouchSlider({id:mslide,'auto':'-1',fx:'ease-out',direction:'left',speed:600,timeout:5000,'before':function(index){  var as=document.getElementById(this.page).getElementsByTagName('a');  as[this.p].className='';  as[index].className='active';  this.p=index;  var txt=as[index].innerText;  $("#"+this.page).parent().find('.emtitle').text(txt);  var txturl=as[index].getAttribute('href');   var turl=txturl.split('#');  $("#"+this.page).parent().find('.go_btn').attr('href',turl[1]);  }});   tt.page = page;  tt.p = 0;  for(var i=0;i<as.length;i++){  (function(){   var j=i;   as[j].tt = tt;   as[j].onclick=function(){   this.tt.slide(j);   return false;   }  })();  } </script>

The above is the key code about the switching effect of the mobile TAB touch screen. I hope you will like it.