iPhone手機開發的外掛程式jQTouch入門

jQTouch是jQuery的一款外掛程式，可以在iPhone，iPod Touch等裝置的Mobile WebKit瀏覽器上實現一些動畫、列表導航、預設應用樣式等各種常見UI效果。隨著iPhone，iPod Touch等裝置的使用日益增多，jQTouch無疑為手機網站的開發減少了很多工作，而且在樣式和相容性方面也得到了很大的提高。

jQTouch官方網站：http://www.jqtouch.com
開啟首頁即可下載最新的外掛程式包和一些執行個體代碼。下面介紹一下jQTouch的一些簡單用法。
開始使用jQTouch

1.  載入外掛程式
首先在頁面的頭部包含必要的指令檔和樣式檔案
 

 

  
<style type="text/css" media="screen">@import "jqtouch/jqtouch.min.css";</style> 
  
<style type="text/css" media="screen">@import "themes/jqt/theme.min.css";</style> 
  
<script src="jqtouch/jquery.1.3.2.min.js" type="text/javascript" charset="utf-8"></script> 
  
<script src="jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script> 
 

裡面相應的檔案都可以在下載的程式碼封裝裡找到
2. 初始化jQTouch

 

  
<script type="text/javascript" charset="utf-8"> 
  
var jQT = new $.jQTouch({  
  
icon: 'jqtouch.png',  
  
addGlossToIcon: false,  
  
startupScreen: 'jqt_startup.png',  
  
statusBar: 'black',  
  
preloadImages: [  
  
'img/back_button.png',  
  
'img/back_button_clicked.png',  
  
'img/button_clicked.png',  
  
'img/grayButton.png',  
  
'img/whiteButton.png',  
  
'img/loading.gif'  
  
]  
  
});  
  
</script> 
 

3. 使用方法
當HTML載入了jQTouch外掛程式，將會預設第一個HTML對象顯示，其他所有的HTML對象都不顯示，比如body下有div1，div2，div3…此時只有第一個div是顯示的，其他所有的div都不會顯示，在頁面標籤的控制上，
則是通過class和id來控制的，比如說在預設情況下，jQTouch配置了8項動畫：滑動(slide), 向上滑動(slideup), 溶解(dissolve), 褪色(fade), 翻轉(flip), 彈出(pop), 交替(swap), 和多維資料區塊(cube)。
想要呈現這些動畫效果，可以通過下面的方法來實現：
 

 

  
<a class="slide" href="#animdemo">Slide</a> 
  
<a class="slideup" href="#animdemo">Slide Up</a> 
  
<a class="dissolve" href="#animdemo">Dissolve</a> 
  
<a class="fade" href="#animdemo">Fade</a> 
  
<a class="flip" href="#animdemo">Flip</a> 
  
<a class="pop" href="#animdemo">Pop</a> 
  
<a class="swap" href="#animdemo">Swap</a> 
  
<a class="cube" href="#animdemo">Cube</a> 
 

其中href中指向的id，就是點選連結後要顯示HTML對象，這就要保證頁面裡還有一個id為animdemo的HTML對象。
當然上述這些動畫效果的實現方式也可以在初始化的時候自訂，外掛程式給我們提供了很多可選的參數。現在新版本改進了系統的可擴充性：
改進了3D flip transition
回調事件:整個頁面的過渡、swipe事件以及方向的改變
添加示範：Clock、To-Do，和一些主要功能示範
主題：目前擁有Apple和jQuery主題灰色）
jQTouch外掛程式實現的頁面效果真的是很絢，有作iPhone或iPod Touch朋友不妨去試一試。