jQuery Mobile中文手冊(cè)：開發(fā)入門
框架特性
jQuery Mobile 以“Write Less, Do More”作為目標(biāo)，為所有的主流移動(dòng)操作系統(tǒng)平臺(tái)提供了高度統(tǒng)一的 UI 框架：jQuery 的移動(dòng)框架可以讓你為所有流行的移動(dòng)平臺(tái)設(shè)計(jì)一個(gè)高度定制和品牌化的 Web 應(yīng)用程序，而不必為每個(gè)移動(dòng)設(shè)備編寫?yīng)毺氐膽?yīng)用程序或操作系統(tǒng)。
jQuery Mobile 目前支持的移動(dòng)平臺(tái)有蘋果公司的 iOS(iPhone，ipad，iPod Touch)，Android，BlackBerry OS 6.0，惠普 webOS，Mozilla的Fennec和Opera Mobile。今后，將增加包括Windows Mobile，Symbian 和 MeeGo 在內(nèi)的更多移動(dòng)平臺(tái)。
根據(jù) jQuery Mobile 項(xiàng)目網(wǎng)站，目前 jQuery Mobile 的特性包括：
- jQuery 核心——與 jQuery 桌面版一致的 jQuery 核心和語(yǔ)法，以及最小的學(xué)習(xí)曲線。
- 兼容所有主流的移動(dòng)平臺(tái)——iOS、Android、BlackBerry，Palm WebOS、Symbian、Windows Mobile、BaDa、MeeGo 以及所有支持 HTML 的移動(dòng)平臺(tái)。
- 輕量級(jí) alpha 版本的 jQuery Mobile 其 JavaScript 大小僅為 12KB ， CSS 文件也只有 6KB 大小。
- 標(biāo)記驅(qū)動(dòng)的配置 jQuery Mobile 采用完全的標(biāo)記驅(qū)動(dòng)而不需要 JavaScript 的配置。
- 漸進(jìn)增強(qiáng) jQuery Mobile 采用完全的漸進(jìn)增強(qiáng)原則：通過(guò)一個(gè)全功能的 HTML 網(wǎng)頁(yè)，和額外的 JavaScript 功能層，提供***的在線體驗(yàn)。這意味著即使移動(dòng)瀏覽器不支持 JavaScript，基于 jQuery Mobile 的移動(dòng)應(yīng)用程序仍能正常的使用。
- 自動(dòng)初始化通過(guò)使用 mobilize()函數(shù)自動(dòng)初始化頁(yè)面上的所有 jQuery 部件。
- 無(wú)障礙 包括 WAI-ARIA 在內(nèi)的無(wú)障礙功能以確保頁(yè)面能在類似于 VoiceOver 等語(yǔ)音輔助程序和其他輔助技術(shù)下正常使用。
- 簡(jiǎn)單的 API 為用戶提供鼠標(biāo)、觸摸和光標(biāo)焦點(diǎn)簡(jiǎn)單的輸入法支持。
- 強(qiáng)大的主題化框架 jQuery Mobile 提供強(qiáng)大的主題化框架和 UI 接口。
版本約定
為了避免由于版本不統(tǒng)一等引發(fā)的問(wèn)題，在此次撰寫中對(duì)框架的版本進(jìn)行了如下約定 ：
- 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>
- <!-- 這里加入項(xiàng)目中其他的引用 -->
- <script src="jquery.mobile-1.0a2.min.js"></script>
ps:建議在meta中加入'”charset=utf-8”的聲明，避免出現(xiàn)亂碼和響應(yīng)方面的問(wèn)題
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 或 者 <meta charset="utf-8" />
頁(yè)面聲明
建議在頁(yè)面中使用 HTML5 標(biāo)準(zhǔn)的頁(yè)面聲明和標(biāo)簽，因?yàn)橐苿?dòng)設(shè)備瀏覽器對(duì) HTML5 標(biāo)準(zhǔn)的支持程度要遠(yuǎn)遠(yuǎn)優(yōu)于 PC 設(shè)備，因此使用簡(jiǎn)潔的 HTML5 標(biāo)準(zhǔn)可以更加高效的進(jìn)行開發(fā)，免去了因?yàn)槁暶麇e(cuò)誤出現(xiàn)的兼容性問(wèn)題。
HTML5 頁(yè)面基礎(chǔ)元素：
- <!DOCTYPE HTML>
- <html lang="en-US">
- <head>
- <title>
- 標(biāo)題
- </title>
- <meta charset="UTF-8">
- </head>
- <body>
- </body>
- </html>
#p#
技術(shù)理論
WebKit 和 HTML5
WebKit 是一種瀏覽器引擎，支撐著 iPhone 內(nèi)的 Mobile Safari 瀏覽器以及 Android 內(nèi)的瀏覽器背后的技術(shù)。WebKit 也在其他的移動(dòng)環(huán)境內(nèi)有自己的用武之地，但是我們還是將我們的討論集中于 iPhone 和 Android 平臺(tái)。
WebKit 是一個(gè)開源項(xiàng)目，其起源可追溯到 K Desktop Environment (KDE)。WebKit 項(xiàng)目催生了面向移動(dòng)設(shè)備的現(xiàn)代 Web 應(yīng)用程序。雖然設(shè)備本身的能力和形態(tài)因素都相當(dāng)重要，但移動(dòng)用戶最熱衷的仍然是內(nèi)容。如果移動(dòng)用戶可用的內(nèi)容只是 Internet 用戶可用內(nèi)容的一個(gè)很小的子集，那么用戶體驗(yàn)充其量也只能劃分為二等。
我們當(dāng)中的大多數(shù)人都更希望生活是連貫的 — 如果我們?cè)诩抑械墓P記本上訪問(wèn)了一個(gè)網(wǎng)站，我們同樣希望在火車上旅行時(shí)仍然訪問(wèn)到同樣的內(nèi)容。內(nèi)容是***的應(yīng)用程序。不管我們身在何處、在做什么，我們都想要訪問(wèn)到我們的數(shù)據(jù)。WebKit 讓 iPhone 和 Android 平臺(tái)上可以有豐富的內(nèi)容。
有一點(diǎn)很值得注意，即 WebKit 還應(yīng)用在了桌面的 Safari 瀏覽器內(nèi)，該瀏覽器是 Mac OS X 平臺(tái)默認(rèn)的瀏覽器。不管我們討論的是桌面版本還是 iPhone 或 Android 上的瀏覽器引擎，WebKit 均優(yōu)先支持 HTML 和 CSS 特性。實(shí)際上，WebKit 還支持尚未被其他瀏覽器采納的一些 CSS 樣式 — 這些特性正在得到 HTML5 規(guī)范的考慮。
HTML5 規(guī)范是一個(gè)技術(shù)草案集，涵蓋了各種基于瀏覽器的技術(shù)，包括客戶端 SQL 存儲(chǔ)、轉(zhuǎn)變、轉(zhuǎn)型、轉(zhuǎn)換等。HTML5 的出現(xiàn)已經(jīng)有些時(shí)間了，雖然尚未完成，但是一旦其特性集因主要瀏覽器平臺(tái)支持的加入而逐漸穩(wěn)定后，Web 應(yīng)用程序的簡(jiǎn)陋開端將成為***的記憶。Web 應(yīng)用程序開發(fā)將成為主導(dǎo) — 并且不只是在傳統(tǒng)的桌面瀏覽器空間，還將在移動(dòng)領(lǐng)域。移動(dòng)將一躍成為首要考慮，而不再是后備之選。
移動(dòng) Web 應(yīng)用程序的考慮
為了訪問(wèn) Web 開發(fā)技術(shù)，如今，應(yīng)用程序開發(fā)人員有幾個(gè)選擇。***，應(yīng)用程序可嚴(yán)格編寫為服務(wù)器上的 HTML、CSS 和 JavaScript 文件。當(dāng)然，HTML 內(nèi)容可以產(chǎn)生自靜態(tài) HTML 文件，也可以從任何的服務(wù)器端技術(shù)(比如 PHP、 ASP.NET、Java Servlets 等)動(dòng)態(tài)生成。所有這些技術(shù)追根到底都可簡(jiǎn)單地用術(shù)語(yǔ) HTML 指代 — 這不是本文討論的重點(diǎn)所在 — 并且最為重要的是，受 WebKit-支撐的瀏覽器能夠在移動(dòng)設(shè)備上解析和呈現(xiàn) HTML。
用戶通過(guò)在移動(dòng)設(shè)備上(即 iPhone 或 Android)打開瀏覽器應(yīng)用程序并輸入目標(biāo)服務(wù)器對(duì)應(yīng)的 URL：http://yourcompanyname.com/applicationurl 來(lái)訪問(wèn) Web 應(yīng)用程序。
特定的某個(gè)移動(dòng) Web 應(yīng)用程序總是能找到自己的位置：從一般的 Web 站點(diǎn)到高度特定于平臺(tái)的移動(dòng) Web 應(yīng)用程序。
一般站點(diǎn)的呈現(xiàn)
WebKit 內(nèi)的呈現(xiàn)引擎，再配以 iPhone 和 Android 平臺(tái)上的高度直觀的 UI，實(shí)際上就使得幾乎任何一個(gè)基于 HTML 的 Web 站點(diǎn)都能呈現(xiàn)在此設(shè)備上。Web 頁(yè)能被正確呈現(xiàn)，不再像原來(lái)的移動(dòng)瀏覽器體驗(yàn)：內(nèi)容被包裹起來(lái)或是根本不顯示。當(dāng)頁(yè)面加載后，內(nèi)容通常被完全縮放以便整個(gè)頁(yè)面都可見，盡管內(nèi)容會(huì)被縮放得非常小，甚至不可讀，如圖 1 所示。不過(guò)，頁(yè)面是可滾動(dòng)、放大、縮小的，這就提供了對(duì)全部?jī)?nèi)容的訪問(wèn)。默認(rèn)地，瀏覽器使用 980 像素寬的視見區(qū)或邏輯尺寸。 要想使 Web 頁(yè)面從一般的頁(yè)面變成支持移動(dòng)設(shè)備的頁(yè)面，Web 應(yīng)用程序可以在幾個(gè)方面進(jìn)行修改。
雖然頁(yè)面可以在 WebKit 中正確呈現(xiàn)，但是，一個(gè)以鼠標(biāo)為中心的設(shè)備(比如筆記本或臺(tái)式機(jī))與一個(gè)以觸摸為中心的設(shè)備(比如一個(gè) iPhone 或 Android 智能手機(jī))還是有區(qū)別的。其中主要的一些差異包括 “可單擊” 區(qū)域的物理大小、“懸浮樣式” 的缺少以及完全不同的事件順序。如下所列的是在設(shè)計(jì)一個(gè)能被移動(dòng)用戶正常查看的 Web 站點(diǎn)時(shí)需要注意的一些事情：
- iPhone/Android 瀏覽器呈現(xiàn)的屏幕是可讀的 — 大大好于傳統(tǒng)的移動(dòng)瀏覽器 — 所以不要急于草草制作您網(wǎng)站的移動(dòng)版本。
- 手指要大過(guò)鼠標(biāo)指針。在設(shè)計(jì)可單擊的導(dǎo)航時(shí)要特別注意這一點(diǎn) — 不要把鏈接放得相互太靠近，因?yàn)橛脩舨惶赡軉螕袅艘粋€(gè)鏈接而不觸及相鄰的鏈接。
- 懸浮樣式將不再奏效，因?yàn)橛檬种覆荒苓M(jìn)行用鼠標(biāo)指針進(jìn)行的 “懸浮”。
- 諸如 mouse-down、mouse-move 等事件在基于觸摸的設(shè)備上自然大相徑庭。這類事件中有一些將被取消，不要指望移動(dòng)設(shè)備上的事件順序與桌面瀏覽器上的一樣。 讓我們來(lái)看看要使一個(gè) Web 站點(diǎn)對(duì) iPhone 或 Android 訪客具有友好性所面臨的最為明顯的一個(gè)挑戰(zhàn)：屏幕大小。我們今天使用的實(shí)際移動(dòng)屏幕尺寸是 320x480。請(qǐng)注意由于用戶可能會(huì)選擇橫向查看 Web 內(nèi)容，所以屏幕大小也可以是 480x320。正如我們?cè)趫D 1 中看到的，WebKit 將能很好地呈現(xiàn)面向桌面的 Web 頁(yè)面，但是文本可能會(huì)太小以至于若不進(jìn)行縮放或其他操作就無(wú)法有效閱讀內(nèi)容。那么，我們?cè)撊绾螒?yīng)對(duì)這個(gè)問(wèn)題呢?
最為直觀也是最不唐突的適合移動(dòng)用戶的方式是通過(guò)使用一個(gè)特殊的 metatag：viewport。
metatag 是一個(gè)放入 HTML 文檔的 head 元素內(nèi)的 HTML 標(biāo)記。如下是一個(gè)使用 viewport 標(biāo)記的簡(jiǎn)單例子： 。當(dāng)這個(gè) metatag 被添加到一個(gè) HTML 頁(yè)面后，我們看到此頁(yè)面被縮放到更為適合這個(gè)移動(dòng)設(shè)備的大小，如圖 2 所示。如果瀏覽器不支持此標(biāo)記，它會(huì)簡(jiǎn)單地忽略此標(biāo)記。 為了設(shè)置特定的值，將 viewport metatag 的 content 屬性設(shè)為一個(gè)顯式的值： 。通過(guò)改變初始值，屏幕就可以按要求被放大或縮小。將值分別設(shè)置在 1.0 和 1.3 之間對(duì)于 iPhone 和 Android 平臺(tái)是比較合適的。viewport metatag 還支持最小和***伸縮，可用來(lái)限制用戶對(duì)呈現(xiàn)頁(yè)面的控制力。
自具有 320x480 布局的 iPhone 面世以來(lái)，其形態(tài)系數(shù)就一直沒有改變過(guò)，而隨著來(lái)自不同制造商、針對(duì)不同用戶群的更多設(shè)備的出現(xiàn)，Android 則有望具備更多樣的物理特點(diǎn)。在開發(fā)應(yīng)用程序并以諸如 Android 這類移動(dòng)設(shè)備為目標(biāo)時(shí)，一定要考慮屏幕尺寸、形態(tài)系數(shù)以及分辨率方面的潛在多樣性。
除了 Android 設(shè)備與其他設(shè)備之間的這些物理差異之外，經(jīng)驗(yàn)還表明 Android 的軟件還通過(guò)設(shè)備內(nèi)置的(on-device)瀏覽器設(shè)置對(duì)頁(yè)面的呈現(xiàn)實(shí)施了更多控制。不僅穩(wěn)定，Android 平臺(tái)還很靈活。取決于 SDK 等級(jí)和制造商，某個(gè)設(shè)備上的設(shè)置很可能不同于您的開發(fā)環(huán)境。
圖 4 顯示了取自 Android Emulator V1.6 的瀏覽器應(yīng)用程序的設(shè)置頁(yè)面。這個(gè)設(shè)置屏幕允許用戶將一個(gè)設(shè)備設(shè)置為一個(gè)預(yù)先定義的縮放等級(jí)(far、near、medium)或請(qǐng)求此設(shè)備自動(dòng)適應(yīng)頁(yè)面。#p#
組件
頁(yè)面
jQuery Mobile 應(yīng)用了 HTML5 標(biāo)準(zhǔn)的特性，在結(jié)構(gòu)化的頁(yè)面中完整的頁(yè)面結(jié)構(gòu)分為 header、content、footer 這三個(gè)主要區(qū)域。
在 body 中插入內(nèi)容塊：
- <div data-role="page">
- <div data-role="header">...</div>
- <div data-role="content">...</div>
- <div data-role="footer">...</div>
- </div>
data-role="page”代表這個(gè) div 是一個(gè) Page，在一個(gè)屏幕中只會(huì)顯示一個(gè) page； header 是標(biāo)題，content 是內(nèi)容塊，footer 是頁(yè)腳
data-role 參數(shù)表：
完整的頁(yè)面模版：
- <!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>
以上是一個(gè)完整的頁(yè)面結(jié)構(gòu)模版代碼，在使用過(guò)程中可以根據(jù)需要來(lái)組合。
頁(yè)面動(dòng)畫： data-transition 屬性可以定義頁(yè)面切換是的動(dòng)畫效果。
例如：
- <a href="index.html" data-transition="pop">I'll pop</a>
data-transition 參數(shù)表：
備注：如果想要在目標(biāo)頁(yè)面中顯示后退按鈕，可以在鏈接中加入data-direction="reverse"屬性，這個(gè)屬性和原來(lái)的data-back="true"相同，不知道在正式版本中將會(huì)保留哪個(gè)屬性。
模態(tài)對(duì)話框
模態(tài)對(duì)話框是一種帶有圓角標(biāo)題欄和關(guān)閉按鈕的偽浮動(dòng)層，用于獨(dú)占事件的應(yīng)用。任何結(jié)構(gòu)化的頁(yè)面都可以用 data-rel="dialog"鏈接的方式實(shí)現(xiàn)模態(tài)對(duì)話框應(yīng)用。
例如：
- <a href="foo.html" data-rel="dialog">Open dialog</a>
這個(gè)頁(yè)面切換效果同樣可以使用標(biāo)準(zhǔn)頁(yè)面的 data-transition 參數(shù)效果。建議使用"pop"、"slideup" 和"flip"參數(shù)以達(dá)到更好的效果。
這個(gè)模態(tài)對(duì)話框會(huì)默認(rèn)生成關(guān)閉按鈕，用于回到父級(jí)頁(yè)面。在腳本能力較弱的設(shè)備上也可以添加一個(gè)帶有 data-rel="back"的鏈接來(lái)實(shí)現(xiàn)關(guān)閉按鈕。 針對(duì)支持腳本的設(shè)備可以直接使用 href=”#”或者 data-rel="back"來(lái)實(shí)現(xiàn)關(guān)閉。還可以使用內(nèi)置的”close”方法來(lái)關(guān)閉模態(tài)對(duì)話框，例如：$('.ui-dialog').dialog('close')。
由于模態(tài)對(duì)話框是動(dòng)態(tài)顯示的臨時(shí)頁(yè)面，所以這個(gè)頁(yè)面不會(huì)被保存在哈希表內(nèi)，這就意味著我們講無(wú)法后退到這個(gè)頁(yè)面，例如你在 A 頁(yè)面中點(diǎn)擊一個(gè)鏈接打開 B 對(duì)話框,操作完成并關(guān)閉對(duì)話框,然后跳轉(zhuǎn)到 C 頁(yè)面,這時(shí)候你點(diǎn)擊瀏覽器的后退按鈕，這時(shí)候?qū)⒒氐?A 頁(yè)面，而不是 B 頁(yè)面。
工具條
工具條主要用于”header”,”footer”等區(qū)域，用來(lái)支撐和實(shí)現(xiàn)頁(yè)面中業(yè)務(wù)功能的應(yīng)用。jQuery Mobile 提供了一個(gè)相對(duì)完整的解決方案.工具條分為:標(biāo)題(header bar),頁(yè)腳(footer bar)和導(dǎo)航(nav bar)這三中應(yīng)用。 其中標(biāo)題和頁(yè)腳在頁(yè)面中有一些不同的應(yīng)用方式，默認(rèn)工具條是以嵌入(inline)的方式定位的，這種定位方式可以實(shí)現(xiàn)***限度的兼容性，包括在對(duì)腳本和 css 兼容性不佳的設(shè)備都有很好的優(yōu)化。
另一種是浮動(dòng)(fixed)定位的方式，也可以成為“靜態(tài)“定位，這種定位方式可以讓工具條始終保持在屏幕的頂部或者底部。并可以接受點(diǎn)擊事件來(lái)顯示/隱藏工具條，已達(dá)到***化利用屏幕空間的目的。
實(shí)現(xiàn)方式：在標(biāo)題和頁(yè)腳區(qū)域加入 data-position="fixed"屬性。
標(biāo)題容器
標(biāo)題容器是頁(yè)面頁(yè)眉區(qū)域的顯示控件，主要用來(lái)顯示標(biāo)題和主要操作的區(qū)域。
結(jié)構(gòu)代碼：
- <div data-role="header">
- <h1>Page Title</h1>
- </div>
為了方便頁(yè)面的交互在頁(yè)面切換后會(huì)在標(biāo)題容器的左側(cè)自動(dòng)生成一個(gè)后退按鈕，這樣可以簡(jiǎn)化我們的開發(fā)復(fù)雜程度，但是有些時(shí)候我們會(huì)因?yàn)閼?yīng)用的需求而不需要這個(gè)后退按鈕，可以在標(biāo)題容器上添加 data-backbtn="false"屬性用來(lái)阻止后退按鈕的自動(dòng)創(chuàng)建。
標(biāo)題容器的左側(cè)和右側(cè)分別可以放置一個(gè)按鈕，在阻止自動(dòng)生成的后退按鈕后，我們就可以在后退按鈕的位置來(lái)自定義按鈕了。
例如：
- <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>
如果需要自定義默認(rèn)的后退按鈕中的文本，可以用 data-back-btn-text="previous"屬性來(lái)實(shí)現(xiàn)，或者通過(guò)擴(kuò)展的方式實(shí)現(xiàn)：$.mobile.page.prototype.options.backBtnText = "previous"。
如果你沒有使用標(biāo)準(zhǔn)的結(jié)構(gòu)來(lái)創(chuàng)建標(biāo)題區(qū)域，那么框架將不會(huì)自動(dòng)生成默認(rèn)的按鈕。
頁(yè)腳容器
頁(yè)腳容器的結(jié)構(gòu)和標(biāo)題容器的結(jié)構(gòu)基本相同，只要把 data-role 屬性的參數(shù)設(shè)置為”footer”。
例如：
- <div data-role="footer">
- <h4>Footer content</h4>
- </div>
與標(biāo)題容器相比頁(yè)腳容器有更多的靈活度，它不會(huì)想標(biāo)題容器一樣只允許放置兩個(gè)按鈕，并且也不會(huì)默認(rèn)的把按鈕放置在左右的頂端，頁(yè)腳的按鈕默認(rèn)是從左到右依次排列的，并且何以放置更多的按鈕。
在頁(yè)腳容器上只要添加一個(gè) class="ui-bar"就可以將頁(yè)腳變成一個(gè)工具條，你可以不用設(shè)置任何的布局樣式就可以在其中添加整齊的按鈕。
例如：
- <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>
技巧：通過(guò)使用 data-id 屬性可以讓多個(gè)頁(yè)面使用相同的頁(yè)腳。 導(dǎo)航 導(dǎo)航容器是一個(gè)可以每行容納最多 5 個(gè)按鈕的按鈕組控件，用一個(gè)擁有 data-role="navbar"
屬性的 div 來(lái)容納這些按鈕。
例子：
- <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 -->
在默認(rèn)的按鈕上添加class="ui-btn-active" 如果按鈕的數(shù)量超過(guò) 5 個(gè)，導(dǎo)航容器將會(huì)自動(dòng)以合適的數(shù)量分配成多行顯示。
按鈕
你可以將頁(yè)面中的任何一個(gè)鏈接通過(guò) data-role="button"來(lái)聲明成為按鈕的顯示風(fēng)格。為了風(fēng)格統(tǒng)一，框架會(huì)在頁(yè)面加載時(shí)自動(dòng)將 form 類的按鈕格式化為 jQuery Mobile 風(fēng)格的按鈕，不需要添加 data-role 屬性。
框架中包含了一組常用的圖標(biāo)可以用于按鈕，用 data-icon 屬性中的參數(shù)來(lái)定義顯示不同的圖標(biāo)效果。
例如：
- <a href="index.html" data-role="button" data-icon="delete">Delete</a>
data-icon 原生參數(shù)列表
除了可以默認(rèn)顯示左側(cè)的圖標(biāo)之外，還可以用 data-iconpos 屬性來(lái)定義圖標(biāo)與文字的位置關(guān)系。
data-iconpos 參數(shù)列表：
data-iconpos="notext"屬性可以讓按鈕隱藏文字。
內(nèi)聯(lián)樣式
在框架中默認(rèn)情況下按鈕是橫向獨(dú)占根據(jù)屏幕寬度橫向自適應(yīng)的，但是我們?cè)趹?yīng)用的應(yīng)用中經(jīng)常需要在一行中顯示多個(gè)按鈕，這時(shí)候我們就需要知道一個(gè)新的叫做內(nèi)聯(lián)模式的屬性了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 框架可以將幾個(gè)按鈕以組的方式顯示，data-role="controlgroup"用以展示按鈕間的緊湊關(guān)系。例如：
- <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"屬性。
表單應(yīng)用
jQuery Mobile 框架為原生的 html 表單元素封裝了新的表現(xiàn)形式，對(duì)觸屏設(shè)備的操作進(jìn)行了優(yōu)化。在框架的頁(yè)面中會(huì)自動(dòng)將 form 元素渲染成 jQuery Mobile 風(fēng)格的元素。
form 元素的使用和默認(rèn)的 html 方式使用相同，可以同樣使用 Post 和 get 方式提交數(shù)據(jù)，但是需要注意的是元素的 ID 命名問(wèn)題，在常規(guī)的規(guī)范中同一個(gè)頁(yè)面中是不允許出現(xiàn)相同的 ID命名的，在 jQuery Mobile 中由于其允許在同一個(gè) DOM 中存在多個(gè)頁(yè)面，所以建議 form 元素的 ID 命名在整個(gè)項(xiàng)目中是唯一的，防止由于 ID 問(wèn)題引發(fā)的錯(cuò)誤。
默認(rèn)情況下框架會(huì)自動(dòng)渲染在標(biāo)準(zhǔn)頁(yè)面中的 form 元素的風(fēng)格，一旦成功渲染后，這個(gè)控件元素將可以使用 jQuery 中的函數(shù)進(jìn)行操作。 在某些情況下，我們需要使用 html 原生的 form 元素，為了阻止 mobile 框架對(duì)該元素的自動(dòng)渲染，在框架中我們?cè)?data-role 屬性中引入了一個(gè)控制參數(shù)”none”。使用這個(gè)屬性參數(shù)就會(huì)讓該元素以 html 原生的狀態(tài)顯示。
例如：
- <select name="foo" id="foo" data-role="none">
- <option value="a" >A</option>
- <option value="b" >B</option>
- <option value="c" >C</option>
- </select>
列表應(yīng)用
信息列表是開發(fā)應(yīng)用中使用頻率相對(duì)比較高的控件，用于數(shù)據(jù)顯示、導(dǎo)航, 數(shù)據(jù)列表等。為了適應(yīng)不同的信息內(nèi)容，列表的表現(xiàn)形式也多種多樣。
列表的代碼結(jié)構(gòu)是以有序和無(wú)序列表來(lái)實(shí)現(xiàn)的，只要在 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>
如果需要在列表里添加數(shù)據(jù)，則需要在數(shù)據(jù)加載后執(zhí)行 refresh()方法對(duì)列表進(jìn)行數(shù)據(jù)更新。 例如：$('ul').listview('refresh');
