jquery mobiles Terminal TAB-Touchscreen-Umschalteffekt_jquery

Wenn wir das mobile Endgerät verwenden, können wir mit Touchscreen-Gesten nach links und rechts wischen, um die TAB-Spalten zu wechseln, z. B. zwischen APP-Spalten wie NetEase News. Die Registerkarte, über die wir sprechen, besteht im Allgemeinen aus einer Navigationsleiste und dem der Registerkarte entsprechenden Inhalt. Wenn die Beschriftung in der Navigationsleiste geändert wird, ändert sich auch der der Beschriftung entsprechende Inhalt. In diesem Artikel stellen wir Ihnen anhand von Beispielen den TAB-Touchscreen-Umschalteffekt für mobile Endgeräte vor.

Wir bereiten ein TAB-Navigations-#pagenavi vor, das die vier Navigationsschaltflächen enthält, die in der TAB-Navigation umgeschaltet werden sollen, und dann sollte der Hauptinhalt des Umschalt-#sliders hier platziert werden, um den Navigationsschaltflächen zu entsprechen Der Inhalt wird individuell angepasst.

<div class="box-163css"> 
 <ul id="pagenavi" class="page"> 
  <li><a href="#">CSS3</a></li> 
   <li><a href="#">JAVASCRIPT</a></li> 
  <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> 
  ...<!--总共4个li--> 
  </ul> 
 </div> 
</div>

Natürlich müssen wir dem HTML auch CSS-Stile hinzufügen. Dies sollte entsprechend unseren eigenen Gewohnheiten und Hobbys festgelegt werden.

Da es sich um eine mobile Anwendung handelt, laden wir zepto.js, zepto ist eine kleine JQuery. Dann müssen Sie das Touchscreen-Schiebe-Plug-in toucheslider.js laden.

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

Als nächstes rufen wir TouchSlider direkt auf, um den Inhaltswechsel zu erreichen, indem wir die Bindungslasche, die Schieberichtung, die Geschwindigkeit, die Zeit und andere Informationen festlegen. Bitte sehen Sie sich den detaillierten Code an:

<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>

Das Obige ist der Schlüsselcode für den TAB-Touchscreen-Umschalteffekt auf dem mobilen Endgerät. Ich hoffe, er gefällt Ihnen.