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
初始配置
在中按順序加入框架的引用，注意加載的順序:
- <link rel="stylesheet" type="text/css" href="jquery.mobile-1.0a2.min.css">
- <script src="jquery-1.4.4.min.js"></script>
- <!-- 這里加入項目中其他的引用 -->
- <script src="jquery.mobile-1.0a2.min.js"></script>
ps:建議在meta中加入'”charset=utf-8”的聲明，避免出現亂碼和響應方面的問題
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 或 者 <meta charset="utf-8" />
頁面聲明
建議在頁面中使用 HTML5 標準的頁面聲明和標簽，因為移動設備瀏覽器對 HTML5 標準的支持程度要遠遠優于 PC 設備，因此使用簡潔的 HTML5 標準可以更加高效的進行開發，免去了因為聲明錯誤出現的兼容性問題。
HTML5 頁面基礎元素：
- <!DOCTYPE HTML>
- <html lang="en-US">
- <head>
- <title>
- 標題
- </title>
- <meta charset="UTF-8">
- </head>
- <body>
- </body>
- </html>
#p#
技術理論
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)或請求此設備自動適應頁面。#p#
組件
頁面
jQuery Mobile 應用了 HTML5 標準的特性，在結構化的頁面中完整的頁面結構分為 header、content、footer 這三個主要區域。
在 body 中插入內容塊：
- <div data-role="page">
- <div data-role="header">...</div>
- <div data-role="content">...</div>
- <div data-role="footer">...</div>
- </div>
data-role="page”代表這個 div 是一個 Page，在一個屏幕中只會顯示一個 page； header 是標題，content 是內容塊，footer 是頁腳
data-role 參數表：
完整的頁面模版：
- <!DOCTYPE html>
- <html>
- <head>
- <title>Page Title</title>
- <link rel="stylesheet" href="jquery.mobile-1.0a3.min.css" />
- <script type="text/javascript" src="jquery-1.4.3.min.js"></script>
- <script type="text/javascript" src="jquery.mobile-1.0a3.min.js"></script>
- </head>
- <body>
- <div data-role="page">
- <div data-role="header">
- <h1>Page Title</h1>
- </div><!-- /header -->
- <div data-role="content">
- <p>Page content goes here.</p>
- </div><!-- /content -->
- <div data-role="footer">
- <h4>Page Footer</h4>
- </div><!-- /footer -->
- </div><!-- /page -->
- </body>
- </html>
以上是一個完整的頁面結構模版代碼，在使用過程中可以根據需要來組合。
頁面動畫： data-transition 屬性可以定義頁面切換是的動畫效果。
例如：
- <a href="index.html" data-transition="pop">I'll pop</a>
data-transition 參數表：
備注：如果想要在目標頁面中顯示后退按鈕，可以在鏈接中加入data-direction="reverse"屬性，這個屬性和原來的data-back="true"相同，不知道在正式版本中將會保留哪個屬性。
模態對話框
模態對話框是一種帶有圓角標題欄和關閉按鈕的偽浮動層，用于獨占事件的應用。任何結構化的頁面都可以用 data-rel="dialog"鏈接的方式實現模態對話框應用。
例如：
- <a href="foo.html" data-rel="dialog">Open dialog</a>
這個頁面切換效果同樣可以使用標準頁面的 data-transition 參數效果。建議使用"pop"、"slideup" 和"flip"參數以達到更好的效果。
這個模態對話框會默認生成關閉按鈕，用于回到父級頁面。在腳本能力較弱的設備上也可以添加一個帶有 data-rel="back"的鏈接來實現關閉按鈕。 針對支持腳本的設備可以直接使用 href=”#”或者 data-rel="back"來實現關閉。還可以使用內置的”close”方法來關閉模態對話框，例如：$('.ui-dialog').dialog('close')。
由于模態對話框是動態顯示的臨時頁面，所以這個頁面不會被保存在哈希表內，這就意味著我們講無法后退到這個頁面，例如你在 A 頁面中點擊一個鏈接打開 B 對話框,操作完成并關閉對話框,然后跳轉到 C 頁面,這時候你點擊瀏覽器的后退按鈕，這時候將回到 A 頁面，而不是 B 頁面。
工具條
工具條主要用于”header”,”footer”等區域，用來支撐和實現頁面中業務功能的應用。jQuery Mobile 提供了一個相對完整的解決方案.工具條分為:標題(header bar),頁腳(footer bar)和導航(nav bar)這三中應用。 其中標題和頁腳在頁面中有一些不同的應用方式，默認工具條是以嵌入(inline)的方式定位的，這種定位方式可以實現***限度的兼容性，包括在對腳本和 css 兼容性不佳的設備都有很好的優化。
另一種是浮動(fixed)定位的方式，也可以成為“靜態“定位，這種定位方式可以讓工具條始終保持在屏幕的頂部或者底部。并可以接受點擊事件來顯示/隱藏工具條，已達到***化利用屏幕空間的目的。
實現方式：在標題和頁腳區域加入 data-position="fixed"屬性。
標題容器
標題容器是頁面頁眉區域的顯示控件，主要用來顯示標題和主要操作的區域。
結構代碼：
- <div data-role="header">
- <h1>Page Title</h1>
- </div>
為了方便頁面的交互在頁面切換后會在標題容器的左側自動生成一個后退按鈕，這樣可以簡化我們的開發復雜程度，但是有些時候我們會因為應用的需求而不需要這個后退按鈕，可以在標題容器上添加 data-backbtn="false"屬性用來阻止后退按鈕的自動創建。
標題容器的左側和右側分別可以放置一個按鈕，在阻止自動生成的后退按鈕后，我們就可以在后退按鈕的位置來自定義按鈕了。
例如：
- <div data-role="header" data-position="inline" data-backbtn="false" >
- <a href="index.html" data-icon="delete">Cancel</a>
- <h1>Edit Contact</h1>
- <a href="index.html" data-icon="check">Save</a>
- </div>
如果需要自定義默認的后退按鈕中的文本，可以用 data-back-btn-text="previous"屬性來實現，或者通過擴展的方式實現：$.mobile.page.prototype.options.backBtnText = "previous"。
如果你沒有使用標準的結構來創建標題區域，那么框架將不會自動生成默認的按鈕。
頁腳容器
頁腳容器的結構和標題容器的結構基本相同，只要把 data-role 屬性的參數設置為”footer”。
例如：
- <div data-role="footer">
- <h4>Footer content</h4>
- </div>
與標題容器相比頁腳容器有更多的靈活度，它不會想標題容器一樣只允許放置兩個按鈕，并且也不會默認的把按鈕放置在左右的頂端，頁腳的按鈕默認是從左到右依次排列的，并且何以放置更多的按鈕。
在頁腳容器上只要添加一個 class="ui-bar"就可以將頁腳變成一個工具條，你可以不用設置任何的布局樣式就可以在其中添加整齊的按鈕。
例如：
- <div data-role="footer" class="ui-bar">
- <a href="index.html" data-role="button" data-icon="delete">Remove</a>
- <a href="index.html" data-role="button" data-icon="plus">Add</a>
- <a href="index.html" data-role="button" data-icon="arrow-u">Up</a>
- <a href="index.html" data-role="button" data-icon="arrow-d">Down</a>
- </div>
如果我們需要一組鏈接效果，我們可以這樣寫：
- <div data-role="footer" class="ui-bar" data-position="inline">
- <div data-role="controlgroup" data-type="horizontal">
- <a href="index.html" data-icon="delete">Remove</a>
- <a href="index.html" data-icon="plus">Add</a>
- <a href="index.html" data-icon="arrow-u">Up</a>
- <a href="index.html" data-icon="arrow-d">Down</a>
- </div>
- </div>
技巧：通過使用 data-id 屬性可以讓多個頁面使用相同的頁腳。 導航 導航容器是一個可以每行容納最多 5 個按鈕的按鈕組控件，用一個擁有 data-role="navbar"
屬性的 div 來容納這些按鈕。
例子：
- <div data-role="footer">
- <div data-role="navbar">
- <ul>
- <li><a href="a.html" class="ui-btn-active">One</a></li>
- <li><a href="b.html">Two</a></li>
- </ul>
- </div><!-- /navbar -->
- </div><!-- /footer -->
在默認的按鈕上添加class="ui-btn-active" 如果按鈕的數量超過 5 個，導航容器將會自動以合適的數量分配成多行顯示。
按鈕
你可以將頁面中的任何一個鏈接通過 data-role="button"來聲明成為按鈕的顯示風格。為了風格統一，框架會在頁面加載時自動將 form 類的按鈕格式化為 jQuery Mobile 風格的按鈕，不需要添加 data-role 屬性。
框架中包含了一組常用的圖標可以用于按鈕，用 data-icon 屬性中的參數來定義顯示不同的圖標效果。
例如：
- <a href="index.html" data-role="button" data-icon="delete">Delete</a>
data-icon 原生參數列表
除了可以默認顯示左側的圖標之外，還可以用 data-iconpos 屬性來定義圖標與文字的位置關系。
data-iconpos 參數列表：
data-iconpos="notext"屬性可以讓按鈕隱藏文字。
內聯樣式
在框架中默認情況下按鈕是橫向獨占根據屏幕寬度橫向自適應的，但是我們在應用的應用中經常需要在一行中顯示多個按鈕，這時候我們就需要知道一個新的叫做內聯模式的屬性了data-inline="true"。
例如：
- <div data-inline="true">
- <a href="index.html" data-role="button">Cancel</a>
- <a href="index.html" data-role="button" data-theme="b">Save</a>
- </div>
按鈕組
jQuery Mobile 框架可以將幾個按鈕以組的方式顯示，data-role="controlgroup"用以展示按鈕間的緊湊關系。例如：
- <div data-role="controlgroup">
- <a href="index.html" data-role="button">Yes</a>
- <a href="index.html" data-role="button">No</a>
- <a href="index.html" data-role="button">Maybe</a>
- </div>
如果需要按鈕橫向排列可以增加 data-type="horizontal"屬性。
表單應用
jQuery Mobile 框架為原生的 html 表單元素封裝了新的表現形式，對觸屏設備的操作進行了優化。在框架的頁面中會自動將 form 元素渲染成 jQuery Mobile 風格的元素。
form 元素的使用和默認的 html 方式使用相同，可以同樣使用 Post 和 get 方式提交數據，但是需要注意的是元素的 ID 命名問題，在常規的規范中同一個頁面中是不允許出現相同的 ID命名的，在 jQuery Mobile 中由于其允許在同一個 DOM 中存在多個頁面，所以建議 form 元素的 ID 命名在整個項目中是唯一的，防止由于 ID 問題引發的錯誤。
默認情況下框架會自動渲染在標準頁面中的 form 元素的風格，一旦成功渲染后，這個控件元素將可以使用 jQuery 中的函數進行操作。 在某些情況下，我們需要使用 html 原生的 form 元素，為了阻止 mobile 框架對該元素的自動渲染，在框架中我們在 data-role 屬性中引入了一個控制參數”none”。使用這個屬性參數就會讓該元素以 html 原生的狀態顯示。
例如：
- <select name="foo" id="foo" data-role="none">
- <option value="a" >A</option>
- <option value="b" >B</option>
- <option value="c" >C</option>
- </select>
列表應用
信息列表是開發應用中使用頻率相對比較高的控件，用于數據顯示、導航, 數據列表等。為了適應不同的信息內容，列表的表現形式也多種多樣。
列表的代碼結構是以有序和無序列表來實現的，只要在 ul 或 ol 上聲明 data-role="listview"就可以讓框架以列表的方式渲染了，例如：
- <ul data-role="listview" data-theme="g">
- <li><a href="acura.html">Acura</a></li>
- <li><a href="audi.html">Audi</a></li>
- <li><a href="bmw.html">BMW</a></li>
- </ul>
如果需要在列表里添加數據，則需要在數據加載后執行 refresh()方法對列表進行數據更新。 例如：$('ul').listview('refresh');
