jquery移動端TABタッチパネル切替による効果

モバイル端末を使用すると、タッチスクリーンジェスチャーで左右にスライドしてTAB欄、例えば網易ニュースなどのアプリ欄を切り替えることができます.私たちが言うTABは一般的にナビゲーションバーとTABに対応する内容からなり、ナビゲーションバーのラベルを切り替えると同時にラベルに対応する内容も切り替える.ここでは、例を挙げて、モバイル端末TABのタッチスクリーン切り替え効果について説明します.
TABナビゲーション#pagenaviを用意します.TABナビゲーションを切り替える4つのナビゲーションボタンと、切り替える本体コンテンツ#sliderが含まれています.ここでは、4つのliをナビゲーションボタンに対応させ、コンテンツをカスタマイズする必要があります.

 
 
 
  
CSS3
 
   
JAVASCRIPT
 
  
PHP
 
  
HTML5
 
 
 
 
 
  
 
  
 
  ... 
  
 
  ... 
  
 
 
 

もちろん、HTMLにcssスタイルを付ける必要があります.これは自分の習慣や趣味に合わせて設定します.
モバイル端末アプリケーションなのでzeptoをロードします.js,zeptoは体積の小さいjqueryである.タッチスクリーンスライドプラグインtouchsliderをロードする必要があります.js.

にTouchSliderを び し、バインドtabを し、スライド 、 、 などの でコンテンツの り えを します. コードを してください.

 
 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; 
  } 
 })(); 
 } 

以上、モバイル端末TABのタッチパネル切り替え効果に関するキーコードを共有しましたので、お気に召してください.