[JS]用swipejs在iPhone上做一個有TAB可以切換的滑動表單

發佈日期: 作者:

前幾天有個同事遇到了一個javascript的問題，據說已經困擾了她好多天。

條件是這樣的：
1.有兩個的TAB,每個TAB下各有一個滑動表單。
2.滑動表單在兩頁以上，每頁以一個iphone螢幕為準（320px）。
3.畫動表單顧名思義必須可以滑動（橫向）。
4.不能使用jQuery

因為第四點，所以我介紹給她的這個方式就變得不可行。然後她自己去找了另一個js來套用：swipejs。只是她的問題出在於因為TAB的寫法也是google來的，所以，沒有辦法把兩個js做很好的結合。

於是我幫他改完後，程式就變成這樣：
HTML




	
	

		

			
    
				
				
  • 
					
    表單1-第1頁
    
					
    
					
    

					
    
					
    
				
    • 
				
				
				
  • 
					
    表單1-第2頁
    
					
    
					
    
					
    
					
    
					
    
					
    
				
    • 
				
				
				
  • 
					
    表單1-第3頁
    
					
    
					
    
					
    
					
    
					
    
					
    
				
    • 
				
			

		

	

	

	
	

		

			
    
				
				
  • 
					
    表單2-第1頁
    
					
    
					
    

					
    
					
    
				
    • 
				

				
				
  • 

					
    表單2-第2頁
    
					
    
					
    

					
    
					
    

					
    
					
    
				
    • 
				

				
				
  • 
					
    表單2-第3頁
    
					
    
					
    

					
    
					
    

					
    
					
    
				
    •

JAVASCRIPT

window.onload=function() {
tab.setup = {
   tabs: document.getElementById('btnTab').getElementsByTagName('li'),
   
   pages: [
	  document.getElementById('TAB1'),
	  document.getElementById('TAB2'),
   ],

   sliders: [
	  document.getElementById('TAB1Slider'),
	  document.getElementById('TAB2Slider'),
     ]
}

tab.init();
}
/*--setup end--*/

var tab = {
   init: function(){
      var tabs = this.setup.tabs;
      var pages = this.setup.pages;
      var sliders = this.setup.sliders;
      
      var slider = new Swipe(sliders[0]);
      for(i=0; i

當然table原本是有內容的，css也有另外讀取。不過就不在本篇範圍嚕。