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

Posted on 由
LINEで送る
[`evernote` not found]

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

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

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

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

<ul id="btnTab">
	<li class="selected"><a href="#TAB1">TAB1</a></li>
	<li><a href="#TAB2">TAB2</a></li>
</ul>
<div id="DataSelect" class="clearfix">
	<!-- ▼▼TAB1▼▼ -->
	<div id="TAB1">
		<div id="TAB1Slider">
			<ul>
				<!-- ▼表單1-第1頁▼ -->
				<li>
					<h4 class="titleL">表單1-第1頁</h4>
					<table>
					</table>
 
					<table>
					</table>
				</li>
				<!-- ▲表單1-第1頁▲ -->
				<!-- ▼表單1-第2頁▼ -->
				<li>
					<h4 class="titleC">表單1-第2頁</h4>
					<table>
					</table>
					<table>
					</table>
					<table>
					</table>
				</li>
				<!-- ▲表單1-第2頁▲ -->
				<!-- ▼表單1-第3頁▼ -->
				<li>
					<h4 class="titleC">表單1-第3頁</h4>
					<table>
					</table>
					<table>
					</table>
					<table>
					</table>
				</li>
				<!-- ▲表單1-第3頁▲ -->
			</ul>
		</div>
	</div>
	<!-- ▲▲TAB1▲▲ -->
 
	<!-- ▼▼TAB2▼▼ -->
	<div id="TAB2">
		<div id="TAB2Slider">
			<ul>
				<!-- ▼表單2-第1頁▼ -->
				<li>
					<h4 class="titleL">表單2-第1頁</h4>
					<table>
					</table>
 
					<table>
					</table>
				</li>
				<!-- ▲表單2-第1頁▲ -->
 
				<!-- ▼表單2-第2頁▼ -->
				<li>
 
					<h4 class="titleC">表單2-第2頁</h4>
					<table>
					</table>
 
					<table>
					</table>
 
					<table>
					</table>
				</li>
				<!-- ▲表單2-第2頁▲ -->
 
				<!-- ▼表單2-第3頁▼ -->
				<li>
					<h4 class="titleC">表單2-第3頁</h4>
					<table>
					</table>
 
					<table>
					</table>
 
					<table>
					</table>
				</li>
				<!-- ▲表單2-第3頁▲ -->
 
			</ul>
		</div>
	</div>
	<!-- ▲▲TAB2▲▲ -->
</div>

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<pages.length; i++) {
         if(i !== 0) pages[i].style.display = 'none';
         tabs[i].onclick = function(){ tab.showpage(this); return false; };
      }
   },
 
   showpage: function(obj){
      var tabs = this.setup.tabs;
      var pages = this.setup.pages;
      var sliders = this.setup.sliders;
      var num;
 
      for(num=0; num<tabs.length; num++) {
         if(tabs[num] === obj) break;
      }
 
      for(var i=0; i<pages.length; i++) {
         if(i == num) {
            pages[num].style.display = 'block';
            tabs[num].className = 'selected';
            var slider = new Swipe(sliders[num]);
         }
         else{
            pages[i].style.display = 'none';
            tabs[i].className = null;
         }
      }
   }
}

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