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

　jqTouch是一個(gè)開放源碼的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)用普通的瀏覽器無法正常瀏覽其中的不少功能，這是因?yàn)檠菔臼褂胘qTouch其實(shí)是為iPhone等設(shè)備進(jìn)行過優(yōu)化和改造的，其中不少觸摸事件和動(dòng)畫效果在普通的IE瀏覽器中無法實(shí)現(xiàn)(甚至在FireFox4中),但你可以在Mac上或者Safari瀏覽器上看到其效果。

　　開始使用jqTouch

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

<div id="about" class="selectable"> 
   <ul> 
   <p><strong>William Shakespearestrong><br />p> 
   <p><em>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". <br />em>p> 
   ul> 
   <br /><a href="#">Closea> 
div> 
 
<div id="quotes"> 
  <div class="toolbar"> 
    <h1>Quotesh1> 
    <a href="#">Homea> 
  div> 
<ul > 
    <li><a href="#quote">Slidea>li> 
    <li><a href="#quote">Slide Upa>li> 
    <li><a href="#quote">Dissolvea>li> 
    <li><a href="#quote">Fadea>li> 
    <li><a href="#quote">Flipa>li> 
    <li><a href="#quote">Popa>li> 
    <li><a href="#quote">Swapa>li> 
    <li><a href="#quote">Cubea>li> 
ul> 
div>       
<div id="quote"> 
<div class="toolbar"> 
    <h1>Quoteh1> 
    <a href="#">Homea> 
div> 
<div class="info"> 
    Better a witty fool than a foolish wit.   
div> 
div> 
 
<div id="forms"> 
<div > 
    <h1>Contact Ush1> 
    <a href="#" >Backa> 
div> 
<form> 
  <ul> 
  <li><input type="text" name="search" placeholder="Name" id="some_name" />li> 
  <li><input type="text" name="phone" placeholder="Phone" id="some_name"  />li> 
  <li><textarea placeholder="Comments" >textarea>li> 
  <li>Do you want us to contact you?<span class="toggle"><input type="checkbox" />span>li> 
  <li>What is your favorite playli> 
<select id="lol"> 
  <optgroup label="Comedies"> 
  <option value ="Much Ado About Nothing">Much Ado About Nothingoption> 
  <option value ="As You Like It">As You Like Itoption> 
    optgroup> 
    <optgroup label="Tragedies"> 
  <option value ="Hamlet">Hamletoption> 
  <option value ="Othello">Othellooption> 
    optgroup> 
select> 
  li> 
  ul> 
form> 
div> 
 
<div id="home"> 
<div> 
    <h1>Shakespeareh1> 
    <a id="infoButton" href="#about">Quote Shakespearea> 
div> 
<ul > 
    <li><a href="#about">About Shakespearea>li> 
    <li><a href="#quotes">Quotesa>li> 
    <li><a href="#forms">Contact Usa>li> 
ul> 
<h2>External Linksh2> 
<ul > 
    <li><a href="http://www.insideria.com/" target="_blank">InsideRIA.coma>li> 
ul> 
<ul> 
    <li><a href="mailto:mdavid@matthewdavid.ws" target="_blank">Email Mea>li> 
    <li><a href="tel:920-389-1212" target="_blank">Call Mea>li> 
ul> 
 
<div> 
    <p>Add this page to your home screen to view the custom icon, startup screen, and full screen mode.p> 
div> 
div> 

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

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

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

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

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

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

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

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

<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> 

　　同時(shí)要引入兩個(gè)CSS文件，在每一個(gè)項(xiàng)目中都必須引入：

<style type="text/css" media="screen">@import "jqtouch/jqtouch.min.css";style> 

　　而第二個(gè)css文件，如下：

<style type="text/css" media="screen">@import "themes/jqt/theme.min.css";style> 

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

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

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

<script type="text/javascript" charset="utf-8"> 
            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 + '.<br /><br />');  
                     });  
script> 

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

　　分析代碼

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

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

<div id="home" class="current"> 
<div class="toolbar"> 
<h1>Shakespeareh1> 
<a class="button slideup" id="infoButton" href="#about">Quote Shakespearea> 
div> 

<li class="arrow"><a href="#about">About Shakespearea>li> 

<li class="forward"><a href="http://www.insideria.com/" target="_WebApp">InsideRIA.coma>li> 
對于iPhone，你也可以添加一個(gè)鏈接到你電話號碼：  
<li><a href="tel:920-389-1212" target="_blank">Call Mea>li> 

<li><a href="#quote">Slidea>li> 
<li><a class="slideup" href="#quote">Slide Upa>li> 
<li><a class="dissolve" href="#quote">Dissolvea>li> 
<li><a class="fade" href="#quote">Fadea>li> 
<li><a class="flip" href="#quote">Flipa>li> 
<li><a class="pop" href="#quote">Popa>li> 
<li><a class="swap" href="#quote">Swapa>li> 
<li><a class="cube" href="#quote">Cubea>li> 

class="button slideup"