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

- URL: https://justfly.idv.tw/js%e7%94%a8swipejs%e5%9c%a8iphone%e4%b8%8a%e5%81%9a%e4%b8%80%e5%80%8b%e6%9c%89tab%e5%8f%af%e4%bb%a5%e5%88%87%e6%8f%9b%e7%9a%84%e6%bb%91%e5%8b%95%e8%a1%a8%e5%96%ae/
- 日期: 2012-07-06
- 分類: WEB&RIA
- 標籤: iphone, javascript

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

條件是這樣的：

1.有兩個的TAB,每個TAB下各有一個滑動表單。

2.滑動表單在兩頁以上，每頁以一個iphone螢幕為準（320px）。

3.畫動表單顧名思義必須可以滑動（橫向）。

4.不能使用jQuery

因為第四點，所以我介紹給她的[這個方式](https://justfly.idv.tw/2012/02/10/Just_1070.html)就變得不可行。然後她自己去找了另一個js來套用：[swipejs](http://swipejs.com/)。只是她的問題出在於因為TAB的寫法也是google來的，所以，沒有辦法把兩個js做很好的結合。

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

HTML

```
TAB1
	TAB2


	
	
		
			
				
				
					表單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也有另外讀取。不過就不在本篇範圍嚕。