使用jQTouch增強(qiáng)您的下一個(gè)移動(dòng)web應(yīng)用程序
對 web 開發(fā)的興趣，包括移動(dòng) web 應(yīng)用程序，從未像現(xiàn)在這般高漲。一些開發(fā)桌面或者服務(wù)器端應(yīng)用的開發(fā)人員也開始對移動(dòng) web 感興趣。然而，許多人想要將他們目前的 web 開發(fā)技巧應(yīng)用到移動(dòng) web 開發(fā)中，這樣他們就不用學(xué)習(xí)完全不同的事物了，只為移動(dòng)用戶進(jìn)行開發(fā)。這是他們尋求移動(dòng) web 而非本地移動(dòng)開發(fā)的部分原因。在 web 開發(fā)的世界中，有很多客戶端框架，但是 jQuery 是最流行的。那么，理所當(dāng)然有很多對 jQuery 非常了解的開發(fā)人員對移動(dòng) web 開發(fā)感興趣。這些開發(fā)人員將會很樂意學(xué)習(xí) jQTouch — 一個(gè)基于 jQuery 的 web 框架，專為移動(dòng) web 開發(fā)而設(shè)計(jì)的。本文將從移動(dòng) web 開發(fā)人員的角度關(guān)注 jQTouch。
先決條件
本文對 jQTouch 作一簡要概述。正如之前所提到的，這個(gè)框架是基于 jQuery 的。如果您對 jQuery 有一定了解，那么 jQTouch 對您將并不陌生。雖然本文并不需要熟知 jQTouch 知識，但是 JavaScript、HTML 和 CSS 方面的知識一定要熟悉。這里所有的代碼都是純客戶端的，可以被部署到任何 web 服務(wù)器上。本文中一起使用 jQTouch 1.0-beta2 和 jQuery 1.3.2。參見 參考資料 獲取這些工具的鏈接。
jQTouch 簡介
迄今為止，本系列已經(jīng)介紹了兩個(gè) web 應(yīng)用程序框架，借鑒了大量 Apple 的 Cocoa 應(yīng)用程序框架。這些框架抽象出 HTML 和 CSS — web 的關(guān)鍵表示技術(shù)。Cappuccino 框架甚至提取出許多 JavaScript，使用自己的編程語言 Objective-J 對其進(jìn)行替換。jQTouch 框架采用一個(gè)非常不同的方法。它包括核心 web 技術(shù)，使普通的 Web 開發(fā)任務(wù)更容易、更直觀。
jQTouch 之所以受歡迎是因?yàn)樗鼧?gòu)建于 jQuery 之上。從技術(shù)上來說它是一個(gè) jQuery 插件，添加特定移動(dòng)功能和樣式到應(yīng)用程序。具體來說，它添加樣式和可視效果，旨在利用 iPhone 的功能優(yōu)勢。盡管它的很多特性在其他移動(dòng)設(shè)備上也能很好地工作，jQTouch 設(shè)計(jì)時(shí)無疑參考了 iPhone。我們來看一個(gè)構(gòu)建于 jQTouch 之上的一個(gè)簡單的移動(dòng) web 應(yīng)用程序。
jQTouch 應(yīng)用程序開發(fā)：利用 web 技巧
正如前面所提到的，和其他框架（比如 SproutCore 和 Cappuccino）相比，jQTouch 框架采取了一個(gè)截然不同的方法來進(jìn)行 web 應(yīng)用程序開發(fā)。jQTouch 框架和這些框架也有很多共同之處；它同樣允許您從您的服務(wù)器上檢索數(shù)據(jù)以及在客戶端創(chuàng)建整個(gè)用戶接口。但是，不像這些框架，它不要求 您使用此方法。事實(shí)上，它不僅僅建立在 JavaScript 上，也建立在 HTML 和 CSS 上。要了解這一點(diǎn)，從基礎(chǔ)開始。
jQTouch 基礎(chǔ)
如果您閱讀了本系列的前兩篇文章，您對這個(gè)將要使用 jQTouch 構(gòu)建的應(yīng)用程序應(yīng)該比較熟悉。它是針對內(nèi)部 web 應(yīng)用程序的一個(gè)員工通訊錄。您需要加載您在本系列上兩期中所使用的數(shù)據(jù)。然而，jQTouch 提供更移動(dòng)友好的用戶界面元素，因?yàn)樗幸粋€(gè)更好的 UI。您將需要以表格形式和清單形式顯示數(shù)據(jù)。從一個(gè)主界面開始，如 清單 1 所示，該界面允許用戶選擇表格格式或清單格式的數(shù)據(jù)。
清單 1. 應(yīng)用程序要點(diǎn)和主屏幕代碼
- >
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>Intranet Employee Directorytitle>
- <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="text/javascript"
- charset="utf-8">script>
- <script type="text/javascript">
- var jQT = $.jQTouch({
- icon : 'icon.png'
- });
- script>
- head>
- <body>
- <div class="home">
- <div class="toolbar">
- <h1>Employeesh1>
- div>
- <ul class="edgetoedge">
- <li class="arrow"><a href="#list-style">Lista>
- li>
- <li class="arrow"><a href="#table-style">Tablea>
- li>
- ul>
- div>
- body>
- html>
#p#
清單 1 中的代碼包含一個(gè) jQTouch 應(yīng)用程序的基本要點(diǎn)。兩個(gè) CSS 文件和兩個(gè) JavaScript 文件也包含在內(nèi)。要使用 jQTouch，這兩個(gè) JavaScript 文件您都需要。這些包含 jQuery 庫和 jQTouch 插件庫。您也需要第一個(gè) CSS 文件（jqtouch.min.css），另一個(gè) CSS 文件是一個(gè)可選主題。jQTouch 包括兩個(gè)主題，一個(gè)用來匹配 iPhone (Cocoa Touch) UI，另一個(gè)（jqt）較為中性。在清單 1 中，jqt 主題 CSS 文件也包括在其中。最后，您需要初始化 jQTouch 對象。許多選項(xiàng)可以被傳送到這個(gè)構(gòu)造函數(shù)。在這里，您只要指定一個(gè)應(yīng)用程序圖標(biāo)，如果用戶‘安裝’ 該應(yīng)用程序，將會使用這個(gè)圖標(biāo)，如 圖 1 所示。
圖 1. 安裝到 iPhone 主屏幕的移動(dòng) web 應(yīng)用程序
回到清單 1，余下的代碼是基礎(chǔ) HTML。您有一個(gè)含有 home 類的 div。這個(gè)類沒什么特別之處。然而，如果您熟悉 jQuery，那么您將會認(rèn)出這是 jQuery 中的一個(gè)頁面。您應(yīng)用程序中的每個(gè)頁面（屏幕）在單個(gè) HTML 頁面上是一個(gè) div。所以這種情況下，您的頁面在頂層有一個(gè) div，含有 toolbar 類。 這個(gè)特別的類是在核心 jQTouch CSS 文件中定義的幾個(gè)樣式中的一個(gè)。接著，您有一個(gè)含有 edgetoedge 類的無序列表 — 另一個(gè) jQTouch 樣式。這個(gè)列表中的每個(gè)條目都是鏈接到 HTML 頁面其他部分的鏈接。此外，它也是另一個(gè)常用 jQuery 范式，用于鏈接一個(gè) web 應(yīng)用程序中的不同頁面。圖 2 展示了在清單 1 中創(chuàng)建的應(yīng)用程序在 iPhone 中的樣子。
圖 2. iPhone 上的主屏幕
圖 2 顯示一個(gè)相對簡單的用戶界面；創(chuàng)建它需要的所有代碼在清單 1 中，此時(shí)您所用是一些 HTML。您清單中的元素也是可點(diǎn)擊的，而且它們將導(dǎo)向您應(yīng)用程序的其他頁面。然而，這些頁面需要一些加載 Ajax 的數(shù)據(jù)以正常工作。正如您所看到的，Ajax 是 jQuery 與眾不同的另一個(gè)方面。
使用 jQuery 生成動(dòng)態(tài)數(shù)據(jù)
迄今為止，您已經(jīng)利用了 jQTouch 為移動(dòng)設(shè)備優(yōu)化的樣式來生成簡單的 HTML，并將其變成一個(gè)引人注目的移動(dòng)用戶界面?，F(xiàn)在生成一個(gè)動(dòng)態(tài)清單和一個(gè)動(dòng)態(tài)表格。首先檢索這些界面的數(shù)據(jù)，如 清單 2 所示。
清單 2. 使用 Ajax 檢索數(shù)據(jù)
- $(document).ready(function(){
- $.getJSON('employees.json', function(data){
- data.forEach(addEmployee);
- });
- ...
- });
- function addEmployee(e){
- addEmployeeToList(e);
- addEmployeeToTable(e);
- }
在清單 2 中，您只用了基本的 jQuery 功能。初始頁面加載完成后立即使用 Ajax 從服務(wù)器加載數(shù)據(jù)。這是 Web 開發(fā)中的一個(gè)常用范式，jQuery 使用 $(document).ready 函數(shù)輕松地就可以生成。該函數(shù)接受一個(gè)函數(shù)作為它的輸入?yún)?shù)。在這個(gè)案例中您使用一個(gè)匿名內(nèi)聯(lián)函數(shù)，也稱為一個(gè)閉包。這個(gè)閉包在在初始頁面加載完成后立即 執(zhí)行。jQuery 提供很多方便的函數(shù)來處理 Ajax 請求和響應(yīng)。在這種情況下，數(shù)據(jù)將被格式化為 JSON，因此，使用 jQuery 的 getJSON 函數(shù)，采用一個(gè)字符串來表示請求的 URL 端點(diǎn)。這個(gè)函數(shù)在后臺使用一個(gè) XMLHttpRequest 對象生成一個(gè) HTTP GET 來請求這個(gè) URL。
當(dāng) Ajax 請求從服務(wù)器成功返回時(shí)，該函數(shù)也采用另一函數(shù)作為一個(gè)回調(diào)。（也可以利用另一個(gè)可選 callback 函數(shù)來處理錯(cuò)誤，但是為了保持示例的簡潔，我們放棄了使用它。）您再一次傳遞一個(gè)閉包作為 callback 函數(shù)；此函數(shù)預(yù)期接收一個(gè) employee 對象數(shù)組 — 在本系列之前的文章中您曾使用過的數(shù)據(jù)。該回調(diào)函數(shù)然后使用 Array 對象的 forEach 方法。您可能對這個(gè)函數(shù)不是很熟悉，因?yàn)樗谂f版本中沒有提供。但是在您鎖定的這些更現(xiàn)代的瀏覽器上，它都是 可用的。它使用一個(gè)函數(shù)作為它的參數(shù)，然后依次將這個(gè)函數(shù)應(yīng)用到 Array 中的每個(gè)對象中。盡管您可以傳遞另一個(gè)閉包給它，而不是將其作為一個(gè)引用傳遞給另一個(gè)名為 addEmployee 的函數(shù)。該函數(shù)授權(quán)分離函數(shù)，將員工對象添加到列表以及添加到表格?？纯催@些函數(shù)如何使用 jQTouch 動(dòng)態(tài)創(chuàng)建 UI。
使用 jQTouch 創(chuàng)建動(dòng)態(tài) UI
回到清單 1 ，您將注意到您的主屏幕已經(jīng)連接到其他兩個(gè)頁面了，一個(gè)是數(shù)據(jù)的列表視圖，另一個(gè)是數(shù)據(jù)的表格視圖。我們之前提到過，它利用 jQuery 在頁面上使用 div 的約定來代表您的應(yīng)用程序的各個(gè)頁面。這些頁面的 HTML 如 清單 3 所示。
清單 3. 列表和表格的 HTML
- <div id="list-style">
- <div class="toolbar">
- <h1>Listh1>
- <a class="button back" href="#">Backa>
- div>
- <ul class="edgetoedge" id="eList">ul>
- div>
- <div id="table-style">
- <div class="toolbar">
- <h1>Tableh1>
- <a class="button back" href="#">Backa>
- <a class="button flip" href="#new">+a>
- div>
- <table>
- <thead>
- <tr>
- <td>Nametd>
- <td>Phonetd>
- <td>Emailtd>
- tr>
- thead>
- <tbody id="eTable">tbody>
- table>
- div>
再一次強(qiáng)調(diào)，上面只是一個(gè)簡單的 HTML。一次只研究一個(gè)頁面，在列表頁中，您再次有一個(gè)使用工具欄樣式的嵌套 div。它是一個(gè)簡單標(biāo)題，含有鏈接錨文本。注意到錨點(diǎn)有返回類按鈕。再一次說明，這是 jQTouch 提供的一種樣式，它將為頁面創(chuàng)建一個(gè)返回按鈕，看起來像源自移動(dòng)平臺的。圖 3 顯示了這個(gè)工具欄在 iPhone 中的效果。
圖 3. 列表頁面工具欄
正如您所看到的，jQTouch 允許您使用少量代碼輕松地創(chuàng)建高質(zhì)量的界面。返回到清單 3 ，您可以看到您也有一個(gè)空的無序列表。注意，它使用 jQTouch 提供的 edgetoedge 風(fēng)格，如果您想水平拉伸整個(gè)屏幕，這是一個(gè)很合適的條目。使用您在清單中從服務(wù)器檢索到的數(shù)據(jù)來填充這個(gè)列表，如 清單 4 所示。
清單 4. 創(chuàng)建一個(gè)列表
- function addEmployeeToList(e){
- var list = $("#eList");
- var text = e.firstName + " " + e.lastName +
- ", " + e.phone + ", " + e.email;
- var li = $("<li>").html(text);
- list.append(li);
- }
#p#
在典型 web 開發(fā)中動(dòng)態(tài)創(chuàng)建 HTML 元素是一個(gè)比較繁瑣的任務(wù)；這再一次成為 jQuery 炫目的地方。清單 4 中的代碼是純 jQuery 代碼。您首先可以通過向 jQuery 傳遞一個(gè) CSS 選擇器從清單 3 中獲取這個(gè)無序列表的一個(gè)引用。創(chuàng)建您想要放入列表中的文本，然后使用 jQuery 提供的便捷方法來創(chuàng)建 DOM 元素，并向其中添加一個(gè)文本節(jié)點(diǎn)。最后，將這個(gè) DOM 元素添加到無序列表中。圖 4 使用模擬數(shù)據(jù)顯示了這個(gè)列表的樣子。
圖 4. 列表視圖
要?jiǎng)?chuàng)建您的列表，使用一些基本的 jQuery 代碼來從服務(wù)器檢索數(shù)據(jù)，然后創(chuàng)建一些標(biāo)準(zhǔn) HTML 元素（以及一個(gè)引用 jQTouch 樣式的 HTML 框架），這也是創(chuàng)建上述 UI 所必需的。如果您在一個(gè)移動(dòng)設(shè)備上測試它，您將注意到它的加載速度很快而且屏幕滾動(dòng)很流暢?，F(xiàn)在看看您如何創(chuàng)建一個(gè)表格來顯示同樣的數(shù)據(jù)。
回到清單 3 ，注意您的表格頁面類似于列表頁面。它有一個(gè)類似的工具欄，只有一個(gè)額外按鈕。（不久您就會看到這個(gè)按鈕的功能。）它也有一個(gè)綱要表格 — 即，有表頭但沒有數(shù)據(jù)。數(shù)據(jù)和列表中的一樣。您只需要為您的表格創(chuàng)建行即可，如 清單 5 所示。
清單 5. 創(chuàng)建表行
- function addEmployeeToTable(e){
- var table = $("#eTable");
- var tr = $("<tr>")
- .append($("<td>").html(e.firstName + " " + e.lastName))
- .append($("<td>").html(e.phone))
- .append($("<td>").html(e.email));
- table.append(tr);
- }
清單 5 中的代碼類似清單 4 中的。您可以依賴 jQuery 的便捷方法來創(chuàng)建 HTML DOM 元素，然后一起添加。注意，便利的附加函數(shù)允許您使用一個(gè)構(gòu)建器模式來快速創(chuàng)建表行，其中有 3 個(gè)單元格。圖 5 使用模擬數(shù)據(jù)顯示了表格的樣子。
圖 5. 表格視圖
清單 5 顯示了預(yù)期的用戶界面。您可以使用標(biāo)準(zhǔn) CSS 使這個(gè)表格更漂亮。您可能會注意到在頂部工具欄的右端有一個(gè)加號（+）按鈕?；氐角鍐?3 ，注意到這個(gè)鏈接連接到另一個(gè)名為 New 的頁面，也注意一下這鏈接上的類是按鈕翻轉(zhuǎn)。這將再次創(chuàng)建一個(gè)本機(jī)外觀按鈕，起鏈接到新頁面的作用。該類的翻轉(zhuǎn)指明 jQTouch 應(yīng)該使用一個(gè)翻轉(zhuǎn)轉(zhuǎn)換。這是一個(gè)專有 WebKit CSS 3D 動(dòng)畫，目前僅在 iPhone 中支持，是 jQTouch 易于利用的 2D 和 3D 動(dòng)畫其中的一種。當(dāng)您點(diǎn)擊加號按鈕時(shí)，將顯示一個(gè)用于創(chuàng)建新員工表單的頁面。清單 6 顯示了該頁面的代碼。
清單 6. 新員工對話框
- <div id="new">
- <div class="toolbar">
- <h1>Add Employeeh1>
- <a class="button cancel" href="#">Cancela>
- div>
- <form id="addEmp" method="post">
- <ul>
- <li><input type="text" placeholder="First Name" id="fn"
- name="firstName" />
- li>
- <li><input type="text" placeholder="Last Name" id="ln"
- name="lastName" />
- li>
- <li><input type="email" placeholder="Email"
- autocapitalize="off" id="email" name="email" />
- li>
- <li><input type="tel" placeholder="Phone" id="phone"
- name="phone" />
- li>
- ul>
- <input type="submit" class="submit" value="Submit"/>
- form>
- div>
清單 6 中的代碼是一個(gè)簡單的 HTML，工具欄是使用一個(gè)應(yīng)用 toolbar 類的 div 創(chuàng)建的。此時(shí)，您有一個(gè) Cancel 鏈接，是使用 button cancel 類設(shè)計(jì)的。當(dāng)然 button 類是將這個(gè)鏈接放進(jìn)一個(gè)按鈕中的。cancel 類會使鏈接返回到之前的頁面，類似于 back 類。然而，和 back 類有所不同，它將自動(dòng)使用與轉(zhuǎn)換到該頁面效果相反的效果。
有了工具欄之后，您就有一個(gè)封裝在無序列表之內(nèi)的簡單 HTML 表單。您可能會注意到一些不同尋常的事。首先，所有字段都使用占位符屬性，這是一個(gè) HTML5 特性，因此會一直顯示占位符文本，直至該字段獲得焦點(diǎn)。這可以方便地替換對標(biāo)簽的使用，特別是當(dāng)一個(gè)移動(dòng)屏幕非常小的時(shí)候。注意電子郵件輸入框有一個(gè)設(shè)置 為 false 的 autocapitalize 屬性。這是另一個(gè) iPhone 特有的特性，通知瀏覽器臨時(shí)禁用輸入該框的文本的 OS 級自動(dòng)大寫。同時(shí)我們還注意到，郵件和電話輸入類型都是不尋常的（email 和 tel），這是在 iPhone 和 Android 瀏覽器上都支持的一個(gè)特性，當(dāng)焦點(diǎn)集中在輸入字段時(shí)，通知瀏覽器彈出不同的鍵盤。圖 6 顯示了每個(gè)字段的樣子。
#p#
圖 6. Android 和 iPhone 瀏覽器，焦點(diǎn)在 tel 和 email 輸入框
最后一點(diǎn)值得注意的是，清單 6 中的表單是 Submit 按鈕，注意它的類是 submit。這是另一個(gè)使按鈕（至少在 iPhone 上）更具吸引力的 jQTouch 類。清單 7 顯示了當(dāng)表單提交后，如何使用 jQTouch 建立一個(gè)事件處理程序。
清單 7. 處理表單提交
- $(document).ready(function(){
- // Ajax call can be found in Listing 2
- $("#addEmp").submit(function(){
- var e = {
- firstName : $("#fn")[0].value,
- lastName : $("#ln")[0].value,
- email : $("#email")[0].value,
- phone : $("#phone")[0].value
- };
- addEmployee(e);
- jQT.goBack();
- return false;
- });
- });
注意，這是您在清單 2 中所見到的初始化代碼的一部分。在這里您使用另一個(gè) jQuery 選擇器來獲取表單（清單 6 中顯示的）的一個(gè)引用。jQuery 提供一種簡便的方法來劫持表單的 submit 事件。再一次傳遞一個(gè)閉包來處理該事件。在閉包中，創(chuàng)建一個(gè) JavaScript employee 對象，但是從表單中檢索值。然后使用您在清單 2 中看到的 addEmployee 函數(shù)來將新員工信息添加到列表和記錄視圖中。接著，使用一個(gè) jQTouch 函數(shù) goBack。 其工作方式類似于您之前看到的 Cancel 按鈕，轉(zhuǎn)回到上一頁。最后，返回 false 來阻止表單提交。顯然，該代碼只能將員工信息添加到本機(jī)屏幕。您可以想像一個(gè)可將員工信息添加到共享數(shù)據(jù)庫的服務(wù)端 API，而且您可以使用 jQuery 卓越的 Ajax 和表單功能來將數(shù)據(jù)序列化，然后發(fā)送回服務(wù)器。這樣，在樣例應(yīng)用程序中就完成了所有功能?，F(xiàn)在，您已經(jīng)使用 jQTouch 構(gòu)建了一個(gè)移動(dòng) web 應(yīng)用程序，看看其結(jié)果如何。
使用 jQTouch 的移動(dòng) web 應(yīng)用程序
盡管 jQTouch 框架可能是 jQuery 之上的一個(gè)簡單插件，它的確通過接受核心 web 技術(shù)以及使開發(fā)更為容易擴(kuò)展了 jQuery 框架的理念。它添加大量移動(dòng)優(yōu)化的用戶界面元素，使您可以輕松地將簡單的 CSS 樣式應(yīng)用于 HTML，并獲取較為成熟的結(jié)果。此外，這些主題和特性（比如頁面轉(zhuǎn)換）也為應(yīng)用程序帶來了一種原生感覺。
提到處理應(yīng)用程序邏輯，jQTouch 不像其他架構(gòu)那樣試圖提取出工作流。相反地，它依賴功能強(qiáng)大的 jQuery 工具使得表單處理、Ajax、頁面轉(zhuǎn)換這類任務(wù)變得更為容易。如果您是一名經(jīng)驗(yàn)豐富的、且習(xí)慣于使用 web 應(yīng)用程序的 web 開發(fā)人員 — 使用 web 功能強(qiáng)大的 HTML、JavaScript 和 CSS 組合— 那么，jQTouch 也會非常適合您。您可以快速生成具有吸引力、易于使用的移動(dòng) web 應(yīng)用程序。然而，如果您想采用一個(gè)更結(jié)構(gòu)化的方法，那么您將不得不自己添加結(jié)構(gòu)。這極大地改變了通常由一個(gè)開發(fā)團(tuán)隊(duì)來處理的巨大且復(fù)雜的應(yīng)用程序。此 外，jQTouch 不改變創(chuàng)建 web 應(yīng)用程序所涉及到的標(biāo)準(zhǔn)工作流 — 它只是試圖讓每個(gè)工作流步驟更容易。其他框架進(jìn)一步提取大量步驟，并使用較少的樣板文件提供一個(gè)更有邏輯的工作流。
最后，另一個(gè) jQuery 項(xiàng)目值得一提。這個(gè)項(xiàng)目就是 jQuery Mobile 項(xiàng)目（見 參考資料）， 恰如其名。和 jQTouch 不一樣，它不是一個(gè)插件；它和 jQTouch 一樣有很多共同的特性，但是它有更為遠(yuǎn)大的目標(biāo)。它的目標(biāo)是提供更多 UI 小部件，并使它們可以跨平臺工作。例如，您構(gòu)建的應(yīng)用程序在 Android 手機(jī)上運(yùn)行良好，但是很顯然它是用于 iPhone 的。jQuery Mobile 應(yīng)用程序的設(shè)計(jì)目的是在 Androids 和 iPhones、以及其他平臺上都能良好運(yùn)行。它不僅僅是一個(gè) jQuery 插件；相反地，它從根本上是為移動(dòng)電話構(gòu)建的，轉(zhuǎn)換成更簡潔、更靈活的代碼：jQTouch 有 69 KB 的 JavaScript 和 8KB 的 CSS，而 jQuery Mobile 只有 12KB 的 JavaScript 和 6KB 的 CSS。寫這篇文章時(shí)，發(fā)布的是該項(xiàng)目的第一個(gè) α 版本，顯然還是比較粗糙。然而，如果您對 jQTouch 很感興趣，及時(shí)了解 jQuery Mobile 的最新信息。
結(jié)束語
本文證實(shí)了可以應(yīng)用您的 web 開發(fā)技巧來構(gòu)建一個(gè)移動(dòng)應(yīng)用程序，只需 jQTouch 提供少量幫助。對于很多開發(fā)人員來說，這可能是進(jìn)行移動(dòng)開發(fā)最直接的方法。如果您是一名 web 開發(fā)人員，可能早對 jQuery 有過了解，這使得 jQTouch 更具吸引力。深入挖掘卓越的 jQTouch 文檔并探究它的更多的特性。這使得您可以在移動(dòng) web 應(yīng)用程序中更加輕松地使用 iPhone 和 Android 瀏覽器上可用的很多高級 HTML5 功能。
下載源碼：intradir-jqtouch.zip
文章出處：IBM developerWorks
