jQuery Mobile中文手冊：開發入門

jQuery Mobile 以「Write Less, Do More」做爲目標，爲全部的主流移動操做系統平臺提供了高度統一的 UI 框架：jQuery 的移動框架可讓你爲全部流行的移動平臺設計一個高度定製和品牌化的 Web 應用程序，而沒必要爲每一個移動設備編寫獨特的應用程序或操做系統。

　　框架特性

　 　jQuery Mobile 目前支持的移動平臺有蘋果公司的 iOS(iPhone，ipad，iPod Touch)，Android，BlackBerry OS 6.0，惠普 webOS，Mozilla的Fennec和Opera Mobile。從此，將增長包括Windows Mobile，Symbian 和 MeeGo 在內的更多移動平臺。

　　根據 jQuery Mobile 項目網站，目前 jQuery Mobile 的特性包括：

　　jQuery 核心——與 jQuery 桌面版一致的 jQuery 核心和語法，以及最小的學習曲線。

　　兼容全部主流的移動平臺——iOS、Android、BlackBerry，Palm WebOS、Symbian、Windows Mobile、BaDa、MeeGo 以及全部支持 HTML 的移動平臺。

　　輕量級 alpha 版本的 jQuery Mobile 其 JavaScript 大小僅爲 12KB ， CSS 文件也只有 6KB 大小。

　　標記驅動的配置 jQuery Mobile 採用徹底的標記驅動而不須要 JavaScript 的配置。

　 　漸進加強 jQuery Mobile 採用徹底的漸進加強原則：經過一個全功能的 HTML 網頁，和額外的 JavaScript 功能層，提供頂級的在線體驗。這意味着即便移動瀏覽器不支持 JavaScript，基於 jQuery Mobile 的移動應用程序仍能正常的使用。

　　自動初始化經過使用 mobilize()函數自動初始化頁面上的全部 jQuery 部件。

　　無障礙 包括 WAI-ARIA 在內的無障礙功能以確保頁面能在相似於 VoiceOver 等語音輔助程序和其餘輔助技術下正常使用。

　　簡單的 API 爲用戶提供鼠標、觸摸和光標焦點簡單的輸入法支持。

　　強大的主題化框架 jQuery Mobile 提供強大的主題化框架和 UI 接口。

　　版本約定

　　爲了不因爲版本不統一等引起的問題，在這次撰寫中對框架的版本進行了以下約定 ：

　　jQuery 核心：V 1.50

　　Mobile 核心：V 1.0 ALPHA 3

　　初始配置

　　在中按順序加入框架的引用，注意加載的順序:

1 .     < link rel = " stylesheet " type = " text/css " href = " jquery.mobile-1.0a2.min.css " >    2 .     < script src = " jquery-1.4.4.min.js " ></ script >    3 .     < ! -- 這裏加入項目中其餘的引用 -->    4 .     < script src = " jquery.mobile-1.0a2.min.js " ></ script >

　　ps:建議在meta中加入'」charset=utf-8」的聲明，避免出現亂碼和響應方面的問題

1 .     < meta  http - equiv = " Content-Type "   content = " text/html;  charset=utf-8 "    /> 或 者 < meta charset = " utf-8 " />

　　頁面聲明

　　建議在頁面中使用 HTML5 標準的頁面聲明和標籤，由於移動設備瀏覽器對 HTML5 標準的支持程度要遠遠優於 PC 設備，所以使用簡潔的 HTML5 標準能夠更加高效的進行開發，免去了由於聲明錯誤出現的兼容性問題。

　　HTML5 頁面基礎元素：

1 .     < !DOCTYPE HTML >    2 .     < html lang = " en-US " >    3 .     < head >    4 .     < title > 5 .    標題 6 .       </ title >    7 .     < meta charset = " UTF-8 " >    8 .       9 .     </ head >    10 .     < body >    11 .     </ body >    12 .     </ html >

　　技術理論

　　WebKit 和 HTML5

　 　WebKit 是一種瀏覽器引擎，支撐着 iPhone 內的 Mobile Safari 瀏覽器以及 Android 內的瀏覽器背後的技術。WebKit 也在其餘的移動環境內有本身的用武之地，可是咱們仍是將咱們的討論集中於 iPhone 和 Android 平臺。

　　WebKit 是一個開源項目，其起源可追溯到 K Desktop Environment (KDE)。WebKit 項目催生了面向移動設備的現代 Web 應用程序。雖然設備自己的能力和形態因素都至關重要，但移動用戶最熱衷的仍然是內容。若是移動用戶可用的內容只是 Internet 用戶可用內容的一個很小的子集，那麼用戶體驗充其量也只能劃分爲二等。

　　咱們當中的大多數人都更但願生活是連貫的 — 若是咱們在家中的筆記本上訪問了一個網站，咱們一樣但願在火車上旅行時仍然訪問到一樣的內容。內容是最好的應用程序。無論咱們身在何處、在作什麼，咱們都想要訪問到咱們的數據。WebKit 讓 iPhone 和 Android 平臺上能夠有豐富的內容。

　 　有一點很值得注意，即 WebKit 還應用在了桌面的 Safari 瀏覽器內，該瀏覽器是 Mac OS X 平臺默認的瀏覽器。無論咱們討論的是桌面版本仍是 iPhone 或 Android 上的瀏覽器引擎，WebKit 均優先支持 HTML 和 CSS 特性。實際上，WebKit 還支持還沒有被其餘瀏覽器採納的一些 CSS 樣式 — 這些特性正在獲得 HTML5 規範的考慮。

　　 HTML5 規範是一個技術草案集，涵蓋了各類基於瀏覽器的技術，包括客戶端 SQL 存儲、轉變、轉型、轉換等。HTML5 的出現已經有些時間了，雖然還沒有完成，可是一旦其特性集因主要瀏覽器平臺支持的加入而逐漸穩定後，Web 應用程序的簡陋開端將成爲永久的記憶。Web 應用程序開發將成爲主導 — 而且不僅是在傳統的桌面瀏覽器空間，還將在移動領域。移動將一躍成爲首要考慮，而再也不是後備之選。

　　移動 Web 應用程序的考慮

　　爲了訪問 Web 開發技術，現在，應用程序開發人員有幾個選擇。第一，應用程序可嚴格編寫爲服務器上的 HTML、CSS 和 JavaScript 文件。固然，HTML 內容能夠產生自靜態 HTML 文件，也能夠從任何的服務器端技術(好比 PHP、 ASP.NET、Java Servlets 等)動態生成。全部這些技術追根到底均可簡單地用術語 HTML 指代 — 這不是本文討論的重點所在 — 而且最爲重要的是，受 WebKit-支撐的瀏覽器可以在移動設備上解析和呈現 HTML。

　　用戶經過在移動設備上(即 iPhone 或 Android)打開瀏覽器應用程序並輸入目標服務器對應的 URL：http://yourcompanyname.com/applicationurl 來訪問 Web 應用程序。

　　特定的某個移動 Web 應用程序老是能找到本身的位置：從通常的 Web 站點到高度特定於平臺的移動 Web 應用程序。

　　通常站點的呈現

　 　WebKit 內的呈現引擎，再配以 iPhone 和 Android 平臺上的高度直觀的 UI，實際上就使得幾乎任何一個基於 HTML 的 Web 站點都能呈如今此設備上。Web 頁能被正確呈現，再也不像原來的移動瀏覽器體驗：內容被包裹起來或是根本不顯示。當頁面加載後，內容一般被徹底縮放以便整個頁面均可見，儘管內容會被縮放得 很是小，甚至不可讀，如圖 1 所示。不過，頁面是可滾動、放大、縮小的，這就提供了對所有內容的訪問。默認地，瀏覽器使用 980 像素寬的視見區或邏輯尺寸。 要想使 Web 頁面從通常的頁面變成支持移動設備的頁面，Web 應用程序能夠在幾個方面進行修改。

　　雖然頁面能夠在 WebKit 中正確呈現，可是，一個以鼠標爲中心的設備(好比筆記本或臺式機)與一個以觸摸爲中心的設備(好比一個 iPhone 或 Android 智能手機)仍是有區別的。其中主要的一些差別包括 「可單擊」 區域的物理大小、「懸浮樣式」 的缺乏以及徹底不一樣的事件順序。以下所列的是在設計一個能被移動用戶正常查看的 Web 站點時須要注意的一些事情：

　　iPhone/Android 瀏覽器呈現的屏幕是可讀的 — 大大好於傳統的移動瀏覽器 — 因此不要急於草草製做您網站的移動版本。

　　手指要大過鼠標指針。在設計可單擊的導航時要特別注意這一點 — 不要把連接放得相互太靠近，由於用戶不太可能單擊了一個連接而不觸及相鄰的連接。

　　懸浮樣式將再也不奏效，由於用手指不能進行用鼠標指針進行的 「懸浮」。

　 　諸如 mouse-down、mouse-move 等事件在基於觸摸的設備上天然截然不同。這類事件中有一些將被取消，不要期望移動設備上的事件順序與桌面瀏覽器上的同樣。 讓咱們來看看要使一個 Web 站點對 iPhone 或 Android 訪客具備友好性所面臨的最爲明顯的一個挑戰：屏幕大小。咱們今天使用的實際移動屏幕尺寸是 320x480。請注意因爲用戶可能會選擇橫向查看 Web 內容，因此屏幕大小也能夠是 480x320。正如咱們在圖 1 中看到的，WebKit 將能很好地呈現面向桌面的 Web 頁面，可是文本可能會過小以致於若不進行縮放或其餘操做就沒法有效閱讀內容。那麼，咱們該如何應對這個問題呢?

　　最爲直觀也是最不唐突的適合移動用戶的方式是經過使用一個特殊的 metatag：viewport。

　 　metatag 是一個放入 HTML 文檔的 head 元素內的 HTML 標記。以下是一個使用 viewport 標記的簡單例子： 。當這個 metatag 被添加到一個 HTML 頁面後，咱們看到此頁面被縮放到更爲適合這個移動設備的大小，如圖 2 所示。若是瀏覽器不支持此標記，它會簡單地忽略此標記。 爲了設置特定的值，將 viewport metatag 的 content 屬性設爲一個顯式的值： 。經過改變初始值，屏幕就能夠按要求被放大或縮小。將值分別設置在 1.0 和 1.3 之間對於 iPhone 和 Android 平臺是比較合適的。viewport metatag 還支持最小和最大伸縮，可用來限制用戶對呈現頁面的控制力。

　　自 具備 320x480 佈局的 iPhone 面世以來，其形態係數就一直沒有改變過，而隨着來自不一樣製造商、針對不一樣用戶羣的更多設備的出現，Android 則有望具有更多樣的物理特色。在開發應用程序並以諸如 Android 這類移動設備爲目標時，必定要考慮屏幕尺寸、形態係數以及分辨率方面的潛在多樣性。

　　除了 Android 設備與其餘設備之間的這些物理差別以外，經驗還代表 Android 的軟件還經過設備內置的(on-device)瀏覽器設置對頁面的呈現實施了更多控制。不只穩定，Android 平臺還很靈活。取決於 SDK 等級和製造商，某個設備上的設置極可能不一樣於您的開發環境。

　　圖 4 顯示了取自 Android Emulator V1.6 的瀏覽器應用程序的設置頁面。這個設置屏幕容許用戶將一個設備設置爲一個預先定義的縮放等級(far、near、medium)或請求此設備自動適應頁面。