目前，隨著iphone、itouch、ipad的流行，越來越多的開發(fā)者想開發(fā)相關(guān)的應(yīng)用程序。但目前，蘋果只提供了Objective - C語言去編寫iPhone應(yīng)用程序。但可惜的是，即使蘋果的總裁喬布斯吹噓它的易用性，C語言本身是不容易學習的語言，跟開發(fā)Web網(wǎng)站來比更加是復雜。但是，這一切將發(fā)生變化，因為jQuery的工具jqTouch出現(xiàn)了。

成都創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供屏邊網(wǎng)站建設(shè)、屏邊做網(wǎng)站、屏邊網(wǎng)站設(shè)計、屏邊網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、屏邊企業(yè)網(wǎng)站模板建站服務(wù)，10余年屏邊做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。

　jqTouch是一個開放源碼的jQuery的Ajax庫，使你可以很容易地建立和優(yōu)化iPhone的相關(guān)應(yīng)用，它還適用于建立其它有觸摸功能的設(shè)備的應(yīng)用，如google的Android應(yīng)用。可以在http://www.jqtouch.com/上下載到j(luò)qtouch。

　　你可以在該網(wǎng)站上觀看jqTouch的演示，但你會發(fā)現(xiàn)用普通的瀏覽器無法正常瀏覽其中的不少功能，這是因為演示使用jqTouch其實是為iPhone等設(shè)備進行過優(yōu)化和改造的，其中不少觸摸事件和動畫效果在普通的IE瀏覽器中無法實現(xiàn)(甚至在FireFox4中),但你可以在Mac上或者Safari瀏覽器上看到其效果。

　　開始使用jqTouch

　　使用jqTouch的目的使構(gòu)建基于iPhone的應(yīng)用變的容易，而所有的只需要一點HTML，CSS和一些JavaScript知識。下面我們先從一個基本的網(wǎng)頁開始做個例子，下面的代碼中使用的只是DIV和UL /the LI元素，這些應(yīng)該是大家熟知的了。

 
 
 
 

  
  
  
  
 
  
  
  
  
   
 
  
  
  
  
   
William Shakespeare strong> p> 

  
  
  
  
   
William Shakespeare (baptised 26 April 1564; died 23 April 1616) was an English poet and playwright, widely regarded as the greatest writer in the English language and the world's pre-eminent dramatist. He is often called England's national poet and the "Bard of Avon".  em> p> 

  
  
  
  
    ul> 
  
  
  
  
   Close a> 
  
  
  
  
 div> 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
   
  
  
  
  
    
Quotes h1> 
  
  
  
  
    Home a> 
  
  
  
  
   div> 
  
  
  
  
 
  
  
  
  
    
Slide a> li> 
  
  
  
  
    
Slide Up a> li> 
  
  
  
  
    
Dissolve a> li> 
  
  
  
  
    
Fade a> li> 
  
  
  
  
    
Flip a> li> 
  
  
  
  
    
Pop a> li> 
  
  
  
  
    
Swap a> li> 
  
  
  
  
    
Cube a> li> 
  
  
  
  
 ul> 
  
  
  
  
 div>       
  
  
  
  
 
  
  
  
  
 
  
  
  
  
    
Quote h1> 
  
  
  
  
    Home a> 
  
  
  
  
 div> 
  
  
  
  
 
  
  
  
  
    Better a witty fool than a foolish wit.   
  
  
  
  
 div> 
  
  
  
  
 div> 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
    
Contact Us h1> 
  
  
  
  
    Back a> 
  
  
  
  
 div> 
  
  
  
  
 
  
  
  
  
  
 
  
  
  
  
  
 li> 
  
  
  
  
  
 li> 
  
  
  
  
  
 textarea> li> 
  
  
  
  
  
Do you want us to contact you? span> li> 
  
  
  
  
  
What is your favorite play li> 
  
  
  
  
 
  
  
  
  
   
  
  
  
  
  Much Ado About Nothing option> 
  
  
  
  
  As You Like It option> 
  
  
  
  
     optgroup> 
  
  
  
  
     
  
  
  
  
  Hamlet option> 
  
  
  
  
  Othello option> 
  
  
  
  
     optgroup> 
  
  
  
  
 select> 
  
  
  
  
   li> 
  
  
  
  
   ul> 
  
  
  
  
 form> 
  
  
  
  
 div> 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
    
Shakespeare h1> 
  
  
  
  
    Quote Shakespeare a> 
  
  
  
  
 div> 
  
  
  
  
 
  
  
  
  
    
About Shakespeare a> li> 
  
  
  
  
    
Quotes a> li> 
  
  
  
  
    
Contact Us a> li> 
  
  
  
  
 ul> 
  
  
  
  
External Links h2> 
  
  
  
  
 
  
  
  
  
    
InsideRIA.com a> li> 
  
  
  
  
 ul> 
  
  
  
  
 
  
  
  
  
    
Email Me a> li> 
  
  
  
  
    
Call Me a> li> 
  
  
  
  
 ul> 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
    
Add this page to your home screen to view the custom icon, startup screen, and full screen mode. p> 
  
  
  
  
 div> 
  
  
  
  
 div> 
 
 
 
 

　　以上的代碼，執(zhí)行后的效果如下圖：

　　在上面的代碼中，唯一用到的唯一的HTML5的元素被采用的是“optgroup“元素。接下來，我們把這個HTML應(yīng)用轉(zhuǎn)變?yōu)閕phone應(yīng)用。

　　iPhone內(nèi)置的瀏覽器是目前市場上最先進的瀏覽器之一。它在如 CSS、動畫方面一直有相當優(yōu)秀的功能，而這些功能后來才被引入到桌面的瀏覽器中。

　　接下來本文中展示的代碼，需要在Safari Mac或直接在IOS設(shè)備(iPhone，iPod的或ipad)中運行。該代碼運行在iOS3和iOS4上。而對于在iOS2上的運行情況，本文則未作相關(guān)測試。

　　首先到http://www.jqtouch.com/下載jqtouch,而jqtouch的源代碼可以在

　　http://code.google.com/p/jqtouch/下載。同時，在該網(wǎng)站上，也有很多豐富的視頻指導你的學習。

　　將下載后的jqTouch解壓，其中要特別留意的是javascript文件夾和CSS/images文件夾。jqTouch其實是jQuery 的插件，可以很靈活的配置，你可以更新這些文件，但在本文中，我們使用默認的設(shè)置。

　　現(xiàn)在，我們開始將之前寫好的HTML代碼移植到移動設(shè)備上。在頁面的head元素中添加兩個JavaScript庫，如下：

 
 
 
 

  
  
  
  
 script> 
  
  
  
  
 script> 
 
 
 
 

　　同時要引入兩個CSS文件，在每一個項目中都必須引入：

 
 
 
 

  
  
  
  
@import "jqtouch/jqtouch.min.css"; style> 
 
 
 
 

　　而第二個css文件，如下：

 
 
 
 

  
  
  
  
@import "themes/jqt/theme.min.css"; style> 
 
 
 
 

　　這個CSS是主題文件，主題文件是很重要的。默認的主題讓應(yīng)用看起來象一個iPhone應(yīng)用程序。當然也可以在jqTouch上下載其他主題，讓應(yīng)用程序看起來像一個Android風格的應(yīng)用。事實上，如果你愿意，你甚至可以開發(fā)自己的CSS主題，并將其提交給jqTouch項目。

　　保存修改后的頁面，再運行程序，你將看到如下圖的效果：

　　為了讓我們的應(yīng)用有動畫效果，有一個JavaScript函數(shù)，添加到網(wǎng)頁的HEAD部分：

 
 
 
 

  
  
  
  
 
  
  
  
  
            var jQT = new $.jQTouch({...}{  
  
  
  
  
             });  
  
  
  
  
                // Page animation callback events  
  
  
  
  
                $('#pageevents').  
  
  
  
  
                    bind('pageAnimationStart', function(e, info){...}{  
  
  
  
  
                         $(this).find('.info').append('Started animating ' + info.direction + '… ');  
  
  
  
  
                     }).  
  
  
  
  
                    bind('pageAnimationEnd', function(e, info){...}{  
  
  
  
  
                         $(this).find('.info').append(' finished animating ' + info.direction + '.');  
  
  
  
  
                     });  
  
  
  
  
 script> 
 
 
 
 

　　以上功能使動畫在網(wǎng)頁上正確地觸發(fā)。

　　分析代碼

　　如果使用編輯工具，把代碼折疊起來看，會十分方便，如下圖：

　　要注意的是，在上文中，使用

標簽，表明當頁面第一次加載時，默認顯示的首屏，記得要加上一個class為”current”的樣式。

　　接下來，我們觀察在home這個div中，有一個div，使用了樣式toolbar，如下：

  
 
 
 

   
  
  
  
 
   
  
  
  
 
   
  
  
  
Shakespeare h1> 
   
  
  
  
Quote Shakespeare a> 
   
  
  
  
 div> 
  
 
 
 

　　你將看到的是，只需要這樣一個簡單的樣式，就能在屏幕最上方產(chǎn)生一個iphone風格的工具欄。

　　接下來，你會注意到剩下的部分，都其實只是使用了HTML中的錨點進行跳轉(zhuǎn)連接的。例如，要添加一個iPhone風格的右箭頭，只需要添加一個樣式arrow就可以了，如下：

  
 
 
 

   
  
  
  
About Shakespeare a> li> 
  
 
 
 

　　要注意的是，如果你要連接到外部網(wǎng)頁，則需要添加目標指令“_WebApp“，如下所示：

  
 
 
 

   
  
  
  
InsideRIA.com a> li> 
   
  
  
  
對于iPhone，你也可以添加一個鏈接到你電話號碼：  
   
  
  
  
Call Me a> li> 
  
 
 
 

　　添加動畫

　　動畫在iphone中實在太重要了，你可以添加溶解，轉(zhuǎn)換，頁面翻轉(zhuǎn)等很眩的效果。

　　在下面的例子中，都是使用了錨點去指向同一個連接。其中每一個都使用了不同風格的動畫效果。

  
 
 
 

   
  
  
  
Slide a> li> 
   
  
  
  
Slide Up a> li> 
   
  
  
  
Dissolve a> li> 
   
  
  
  
Fade a> li> 
   
  
  
  
Flip a> li> 
   
  
  
  
Pop a> li> 
   
  
  
  
Swap a> li> 
   
  
  
  
Cube a> li> 
  
 
 
 

　　當然，你可以添加更多的效果進來，一個好的實踐是，你可以在按鈕中實踐下這些動畫效果，如：

  
 
 
 

   
  
  
  
class="button slideup" 
  
 
 
 

　　其他類似的解決方案

　　目前，也有兩個類似的解決方案，一個是Sencha Touch，在

　　(http://www.sencha.com/products/touch/)中可以下載。另外一個是iUI project,

　　下載地址是(http://code.google.com/p/iui/)，它是第一個支持iPad的框架。

　　小結(jié)

　　目前，jqTouch還是在不斷發(fā)展中，還有些不完善的地方，但這些相信不是問題，由于是開源項目，希望越來越多的愛好者加入到開發(fā)中來。