jQuery的mobile开发
生活随笔
收集整理的這篇文章主要介紹了
jQuery的mobile开发
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
jQuery Mobile 簡介
??? jQuery Mobile 教程
??? jQuery Mobile 安裝
jQuery Mobile 是一種 web 框架，用于創(chuàng)建移動 web 應(yīng)用程序。
您應(yīng)該具備的基礎(chǔ)知識
在您開始學(xué)習(xí) jQuery Mobile 之前，您應(yīng)該對以下知識有基本的了解：
??? HTML
??? CSS
??? jQuery
如果您需要首先學(xué)習(xí)這些項(xiàng)目，請?jiān)谖覀兊氖醉撛L問這些教程。
什么是 jQuery Mobile？
jQuery Mobile 是一個為觸控優(yōu)化的框架，用于創(chuàng)建移動 web 應(yīng)用程序。
jQuery 適用于所有流行的智能手機(jī)和平板電腦：
jQuery Mobile 構(gòu)建于 jQuery 庫之上，這使其更易學(xué)習(xí)，如果您通曉 jQuery 的話。
它使用 HTML5、CSS3、JavaScript 和 AJAX 通過盡可能少的代碼來完成對頁面的布局。
為什么使用 jQuery Mobile？
jQuery Mobile 將“寫得更少、做得更多”這一理念提升到了新的層次：它會自動為網(wǎng)頁設(shè)計(jì)交互的易用外觀，并在所有移動設(shè)計(jì)上保持一致。
提示：您不需要為每種移動設(shè)備或 OS 編寫一個應(yīng)用程序：
??? Android 和 Blackberry 用 Java 編寫
??? iOS 用 Objective C 編寫
??? Windows Phone 用 C# 和 .net 編寫
jQuery Mobile 解決了這個問題，因?yàn)樗挥?HTML、CSS 和 JavaScript，這些技術(shù)都是所有移動 web 瀏覽器的標(biāo)準(zhǔn)。
最佳閱讀體驗(yàn)
盡管 jQuery Mobile 工作于所有移動設(shè)備，它可能在桌面計(jì)算機(jī)上存在兼容性問題（“歸功于”有限的 CSS3 支持）。
因此在本教程中，我們推薦您使用谷歌的 Chrome 瀏覽器，以獲得最好的閱讀體驗(yàn)。
jQuery Mobile 安裝
??? jQuery Mobile 簡介
??? jQuery Mobile 頁面
向您的網(wǎng)頁添加 jQuery Mobile
有多個辦法可供您在網(wǎng)站上開始使用 jQuery Mobile。您可以：
??? 從 CDN 引用 jQuery Mobile（推薦）
??? 從 jQuerymobile.com 下載 jQuery Mobile 庫
從 CDN 引用 jQuery Mobile
提示：CDN (Content Delivery Network) 用于通過 web 來分發(fā)常用的文件，以此加快用戶的下載速度。
與 jQuery 類似，無需在您的計(jì)算機(jī)上安裝任何程序；您只需直接在 HTML 頁面中引用以下樣式表和 JavaScript 庫，這樣 jQuery Mobile 就可以工作了：
jQuery Mobile CDN:
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
親自試一試
下載 jQuery Mobile
如果您希望在服務(wù)器上存放 jQuery Mobile，您可以從 jQuerymobile.com 下載文件。
<head>
<link rel=stylesheet href=jquery.mobile-1.3.2.css>
<script src=jquery.js></script>
<script src=jquery.mobile-1.3.2.js></script>
</head>
提示：請將下載的文件放到您希望使用的文件夾中。
提示：您是不是奇怪為什么 <script> 標(biāo)簽中沒有 type="text/javascript" 屬性？
在 HTML5 中該屬性不是必需的。JavaScript 是 HTML5 以及所有現(xiàn)代瀏覽器中的默認(rèn)腳本語言！
jQuery Mobile 頁面
??? jQuery Mobile 安裝
??? jQuery Mobile 過渡
使用 jQuery Mobile 入門
提示：盡管 jQuery Mobile 適用于所有移動設(shè)備，它在臺式計(jì)算機(jī)上仍然可能存在兼容性問題（由于有限的 CSS3 支持）。
因此在本教程中，我們推薦您使用谷歌的 Chrome 瀏覽器，以獲得最好的閱讀體驗(yàn)。
實(shí)例
<body>
<div data-role="page">
? <div data-role="header">
??? <h1>歡迎訪問我的主頁</h1>
? </div>
? <div data-role="content">
??? <p>我是一名移動開發(fā)者！</p>
? </div>
? <div data-role="footer">
??? <h1>頁腳文本</h1>
? </div>
</div>
</body>
親自試一試
例子解釋：
??? data-role="page" 是顯示在瀏覽器中的頁面
??? data-role="header" 創(chuàng)建頁面上方的工具欄（常用于標(biāo)題和搜索按鈕）
??? data-role="content" 定義頁面的內(nèi)容，比如文本、圖像、表單和按鈕，等等
??? data-role="footer" 創(chuàng)建頁面底部的工具欄
在這些容器中，您可以添加任意 HTML 元素 - 段落、圖像、標(biāo)題、列表等等。
提示：HTML5 data-* 屬性用于通過 jQuery Mobile 為移動設(shè)備創(chuàng)建“對觸控友好的”交互外觀。
在 jQuery Mobile 中添加頁面
在 jQuery Mobile，您可以在單一 HTML 文件中創(chuàng)建多個頁面。
請通過唯一的 id 來分隔每張頁面，并使用 href 屬性來連接彼此：
實(shí)例
<div data-role="page" id="pageone">
? <div data-role="content">
??? <a href="#pagetwo">轉(zhuǎn)到頁面二</a>
? </div>
</div>
<div data-role="page" id="pagetwo">
? <div data-role="content">
??? <a href="#pageone">轉(zhuǎn)到頁面一</a>
? </div>
</div>
親自試一試
注釋：包含大量內(nèi)容的 web 應(yīng)用程序會影響加載時間（比如文本、鏈接、圖像和腳本等等）。如果您不希望在內(nèi)部鏈接頁面，請使用外部文件：
<a href="externalfile.html">轉(zhuǎn)到外部頁面</a>
將頁面用作對話框
對話框是用來顯示信息或請求輸入的視窗類型。
如需在用戶點(diǎn)擊（輕觸）鏈接時創(chuàng)建一個對話框，請向該鏈接添加 data-rel="dialog"：
實(shí)例
<div data-role="page" id="pageone">
? <div data-role="content">
??? <a href="#pagetwo" data-rel="dialog">轉(zhuǎn)到頁面二</a>
? </div>
</div>
<div data-role="page" id="pagetwo">
? <div data-role="content">
??? <a href="#pageone">轉(zhuǎn)到頁面一</a>
? </div>
</div>
親自試一試
jQuery Mobile 過渡
??? jQuery Mobile 頁面
??? jQuery Mobile 按鈕
jQuery Mobile 包含了允許您選擇頁面打開方式的 CSS 效果。
jQuery Mobile 過渡效果
jQuery Mobile 擁有一系列關(guān)于如何從一頁過渡到下一頁的效果。
注釋：如需實(shí)現(xiàn)過渡效果，瀏覽器必須支持 CSS3 3D 轉(zhuǎn)換：
瀏覽器支持
??? Internet Explorer 10 支持 3D 轉(zhuǎn)換（更早的版本不支持）
??? Opera 仍然不支持 3D 轉(zhuǎn)換
過渡效果可應(yīng)用于任意鏈接或通過使用 data-transition 屬性進(jìn)行的表單提交：
<a href="#anylink" data-transition="slide">滑動到頁面二</a>
下面的表格展示了可與 data-transition 屬性一同使用的可用過渡：
過渡 ?? ?描述 ?? ?測試
fade ?? ?默認(rèn)。淡入淡出到下一頁。 ?? ?測試
flip ?? ?從后向前翻動到下一頁。 ?? ?測試
flow ?? ?拋出當(dāng)前頁面，引入下一頁。 ?? ?測試
pop ?? ?像彈出窗口那樣轉(zhuǎn)到下一頁。 ?? ?測試
slide ?? ?從右向左滑動到下一頁。 ?? ?測試
slidefade ?? ?從右向左滑動并淡入到下一頁。 ?? ?測試
slideup ?? ?從下到上滑動到下一頁。 ?? ?測試
slidedown ?? ?從上到下滑動到下一頁。 ?? ?測試
turn ?? ?轉(zhuǎn)向下一頁。 ?? ?測試
none ?? ?無過渡效果。 ?? ?測試
提示：在 jQuery Mobile 中，淡入淡出效果在所有鏈接上都是默認(rèn)的（如果瀏覽器支持）。
提示：以上所有效果同時支持反向動作，例如，如果您希望頁面從左向右滑動，而不是從右向左，請使用值為 "reverse" 的 data-direction 屬性。在后退按鈕上是默認(rèn)的。
實(shí)例
<a href="#pagetwo" data-transition="slide" data-direction="reverse">滑動</a>
親自試一試
jQuery Mobile 按鈕
??? jQuery Mobile 過渡
??? jQuery Mobile 圖標(biāo)
移動應(yīng)用程序構(gòu)建于觸控操作的便利性之上。
在 jQuery Mobile 中創(chuàng)建按鈕
jQuery Mobile 中的按鈕可通過三種方法創(chuàng)建：
??? 使用 <button> 元素
??? 使用 <input> 元素
??? 使用 data-role="button" 的 <a> 元素
<button>
<button>按鈕</button>
親自試一試
<input>
<input type="button" value="按鈕">
親自試一試
<a>
<a href="#" data-role="button">按鈕</a>
親自試一試
提示：jQuery Mobile 中的按鈕會自動獲得樣式，這增強(qiáng)了他們在移動設(shè)備上的交互性和可用性。我們推薦您使用 data-role="button" 的 <a> 元素來創(chuàng)建頁面之間的鏈接，而 <input> 或 <button> 元素用于表單提交。
導(dǎo)航按鈕
如需通過按鈕來鏈接頁面，請使用 data-role="button" 的 <a> 元素：
實(shí)例
<a href="#pagetwo" data-role="button">轉(zhuǎn)到頁面二</a>
親自試一試
行內(nèi)按鈕
默認(rèn)情況下，按鈕會占據(jù)屏幕的全部寬度。如果您需要按鈕適應(yīng)其內(nèi)容，或者如果您需要兩個或多個按鈕并排顯示，請?zhí)砑?data-inline="true"：
實(shí)例
<a href="#pagetwo" data-role="button" data-inline="true">轉(zhuǎn)到頁面二</a>
親自試一試
組合按鈕
jQuery Mobile 提供了對按鈕進(jìn)行組合的簡單方法。
請將 data-role="controlgroup" 屬性與 data-type="horizontal|vertical" 一同使用，以規(guī)定水平或垂直地組合按鈕：
實(shí)例
<div data-role="controlgroup" data-type="horizontal">
? <a href="#anylink" data-role="button">按鈕 1</a>
? <a href="#anylink" data-role="button">按鈕 2</a>
? <a href="#anylink" data-role="button">按鈕 3</a>
</div>
親自試一試
提示：默認(rèn)情況下，組合按鈕是垂直分組的，彼此間沒有外邊距和空白。并且只有第一個和最后一個按鈕擁有圓角，在組合后就創(chuàng)造出了漂亮的外觀。
后退按鈕
如需創(chuàng)建后退按鈕，請使用 data-rel="back" 屬性（會忽略錨的 href 值）：
實(shí)例
<a href="#" data-role="button" data-rel="back">返回</a>
親自試一試
更多用于按鈕的 data-* 屬性
屬性 ?? ?值 ?? ?描述 ?? ?實(shí)例
data-corners ?? ?true | false ?? ?規(guī)定按鈕是否有圓角。 ?? ?測試
data-mini ?? ?true | false ?? ?規(guī)定是否是小型按鈕。 ?? ?測試
data-shadow ?? ?true | false ?? ?規(guī)定按鈕是否有陰影。 ?? ?測試
如需有關(guān) jQuery Mobile data-* 屬性的完整信息，請?jiān)L問我們的 jQuery Mobile Data 屬性參考手冊。
下一節(jié)演示如何為按鈕添加圖標(biāo)。
jQuery Mobile 按鈕圖標(biāo)
??? jQuery Mobile 按鈕
??? jQuery Mobile 工具欄
jQuery Mobile 提供的一套圖標(biāo)可令您的按鈕更具吸引力。
為 jQuery Mobile 按鈕添加圖標(biāo)
如需向您的按鈕添加圖標(biāo)，請使用 data-icon 屬性：
<a href="#anylink" data-role="button" data-icon="search">搜索</a>
提示：您也可以在 <button> 或 <input> 元素中使用 data-icon 屬性。
下面我們列出了 jQuery Mobile 提供的一些可用圖標(biāo)：
屬性值 ?? ?描述 ?? ?圖標(biāo) ?? ?實(shí)例
data-icon="arrow-l" ?? ?左箭頭 ?? ??? ?測試
data-icon="arrow-r" ?? ?右箭頭 ?? ??? ?測試
data-icon="delete" ?? ?刪除 ?? ??? ?測試
data-icon="info" ?? ?信息 ?? ??? ?測試
data-icon="home" ?? ?首頁 ?? ??? ?測試
data-icon="back" ?? ?返回 ?? ??? ?測試
data-icon="search" ?? ?搜索 ?? ??? ?測試
data-icon="grid" ?? ?網(wǎng)格 ?? ??? ?測試
如需關(guān)于 jQuery Mobile 按鈕圖標(biāo)的完整信息，請?jiān)L問我們的 jQuery Mobile 圖標(biāo)參考手冊。
定位圖標(biāo)
您也能夠規(guī)定圖標(biāo)被放置的位置：上、右、下或左。
請使用 data-iconpos 屬性來規(guī)定位置：
圖標(biāo)位置：
<a href="#link" data-role="button" data-icon="search" data-iconpos="top">上</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="right">右</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="bottom">下</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="left">左</a>
親自試一試
提示：默認(rèn)地，所有按鈕中的圖標(biāo)靠左放置。
只顯示圖標(biāo)
如果只需顯示圖標(biāo)，請將 data-iconpos 設(shè)置為 "notext"：
Back:
<a href="#link" data-role="button" data-icon="search" data-iconpos="notext">搜索</a>
親自試一試
jQuery Mobile 工具欄
??? jQuery Mobile 圖標(biāo)
??? jQuery Mobile 導(dǎo)航欄
jQuery Mobile 工具欄
工具欄元素常被放置于頁眉和頁腳中 - 以實(shí)現(xiàn)“已訪問”的導(dǎo)航：
標(biāo)題欄
頁眉通常會包含頁眉標(biāo)題/LOGO 或一到兩個按鈕（通常是首頁、選項(xiàng)或搜索按鈕）。
您可以在頁眉中向左側(cè)或/以及右側(cè)添加按鈕。
下面的代碼，將向頁眉標(biāo)題文本的左側(cè)添加一個按鈕，并向右側(cè)添加一個按鈕：
實(shí)例
<div data-role="header">
? <a href="#" data-role="button">首頁</a>
? <h1>歡迎來到我的主頁</h1>
? <a href="#" data-role="button">搜索</a>
</div>
親自試一試
下面的代碼將向頁眉標(biāo)題的左側(cè)添加一個按鈕：
<div data-role="header">
? <a href="#" data-role="button">首頁</a>
? <h1>歡迎來到我的主頁</h1>
</div>
不過，如果您在 <h1> 元素之后放置按鈕鏈接，那么它不會顯示在文本右側(cè)。如需向頁眉標(biāo)題的右側(cè)添加按鈕，請規(guī)定類名 "ui-btn-right"：
實(shí)例
<div data-role="header">
? <h1>歡迎來到我的主頁</h1>
? <a href="#" data-role="button" class="ui-btn-right">搜索</a>
</div>
親自試一試
提示：頁眉可包含一個或兩個按鈕，然而頁腳沒有限制。
頁腳欄
與頁眉相比，頁腳更具伸縮性 - 它們更實(shí)用且多變，所以能夠包含所需數(shù)量的按鈕：
實(shí)例
<div data-role="footer">
? <a href="#" data-role="button">轉(zhuǎn)播到新浪微博</a>
? <a href="#" data-role="button">轉(zhuǎn)播到騰訊微博</a>
? <a href="#" data-role="button">轉(zhuǎn)播到 QQ 空間</a>
</div>
親自試一試
注釋：頁腳與頁眉的樣式不同（它會減去一些內(nèi)邊距和空白，并且按鈕不會居中）。如果要修正該問題，請?jiān)陧撃_設(shè)置類名 "ui-btn"：
實(shí)例
<div data-role="footer" class="ui-btn">
親自試一試
您也能夠選擇在頁腳中水平還是垂直地組合按鈕：
實(shí)例
<div data-role="footer" class="ui-btn">
? <div data-role="controlgroup" data-type="horizontal">
??? <a href="#" data-role="button" data-icon="plus">轉(zhuǎn)播到新浪微博</a>
??? <a href="#" data-role="button" data-icon="plus">轉(zhuǎn)播到騰訊微博</a>
??? <a href="#" data-role="button" data-icon="plus">轉(zhuǎn)播到 QQ 空間</a>
? </div>
</div>
親自試一試
定位頁眉和頁腳
放置頁眉和頁腳的方式有三種：
??? Inline - 默認(rèn)。頁眉和頁腳與頁面內(nèi)容位于行內(nèi)。
??? Fixed - 頁面和頁腳會留在頁面頂部和底部。
??? Fullscreen - 與 fixed 類似;頁面和頁腳會留在頁面頂部和底部，but also over the page content. It is also slightly see-through
請使用 data-position 屬性來定位頁眉和頁腳：
Inline 定位（默認(rèn)）
<div data-role="header" data-position="inline"></div>
<div data-role="footer" data-position="inline"></div>
親自試一試
Fixed 定位
<div data-role="header" data-position="fixed"></div>
<div data-role="footer" data-position="fixed"></div>
親自試一試
如果需要啟用全面定位，請使用 data-position="fixed"，并向該元素添加 data-fullscreen 屬性：
Fullscreen 定位
<div data-role="header" data-position="fixed" data-fullscreen="true"></div>
<div data-role="footer" data-position="fixed" data-fullscreen="true"></div>
親自試一試
提示：fullscreen 對于照片、圖像和視頻非常理想。
提示：對于 fixed 和 fullscreen 定位，觸摸屏幕將隱藏和顯示頁眉及頁腳。
jQuery Mobile 導(dǎo)航欄
??? jQuery Mobile 工具欄
??? jQuery Mobile 可折疊
jQuery Mobile 導(dǎo)航欄
導(dǎo)航欄由一組水平排列的鏈接構(gòu)成，通常位于頁眉或頁腳內(nèi)部。
默認(rèn)地，導(dǎo)航欄中的鏈接會自動轉(zhuǎn)換為按鈕（無需 data-role="button"）。
請使用 data-role="navbar" 屬性來定義導(dǎo)航欄：
實(shí)例
<div data-role="header">
? <div data-role="navbar">
??? <ul>
????? <li><a href="#anylink">首頁</a></li>
????? <li><a href="#anylink">頁面二</a></li>
????? <li><a href="#anylink">搜索</a></li>
??? </ul>
? </div>
</div>
親自試一試
提示：按鈕的寬度，默認(rèn)地，與其內(nèi)容一致。使用無序列表來均等地劃分按鈕：一個按鈕占據(jù) 100% 的寬度，兩個按鈕各分享 50% 的寬度，三個按鈕 33.3%，以此類推。不過，如果您在導(dǎo)航欄中規(guī)定了五個以上的按鈕，那么它會彎折為多行（參加頁面底部的“更多實(shí)例”）。
活動按鈕
當(dāng)導(dǎo)航欄中的鏈接被敲擊時，會獲得選取外觀（按下）。
如需在不敲擊鏈接時實(shí)現(xiàn)此外觀，請使用 class="ui-btn-active"：
實(shí)例
<li><a href="#anylink" class="ui-btn-active">首頁</a></li>
親自試一試
對于多個頁面，您也許需要為每個按鈕設(shè)置“被選”外觀，以表示用戶正在瀏覽該頁面。如果要這么做，請向鏈接添加 "ui-state-persist" 類，以及 "ui-btn-active" 類：
實(shí)例
<li><a href="#anylink" class="ui-btn-active ui-state-persist">首頁</a></li>
親自試一試
更多實(shí)例
內(nèi)容中的導(dǎo)航欄
??? 如何在 data-role="content" 中添加導(dǎo)航欄。
頁腳中的導(dǎo)航欄
??? 如何在頁腳中添加導(dǎo)航欄。
在導(dǎo)航欄中定位圖標(biāo)
??? 如何在頁腳內(nèi)部的導(dǎo)航欄中放置圖標(biāo)。
五個以上的按鈕
??? 演示在導(dǎo)航欄中的十個按鈕。
jQuery Mobile 可折疊
??? jQuery Mobile 導(dǎo)航欄
??? jQuery Mobile 網(wǎng)格
可折疊的內(nèi)容塊
可折疊（Collapsibles）允許您隱藏或顯示內(nèi)容 - 對于存儲部分信息很有用。
如需創(chuàng)建可折疊的內(nèi)容塊，請向某個容器分配 data-role="collapsible" 屬性。在容器（div）中，添加一個標(biāo)題元素（h1-h6），其后是您需要擴(kuò)展的任意 HTML 標(biāo)記：
實(shí)例
<div data-role="collapsible">
? <h1>點(diǎn)擊我 - 我可以折疊！</h1>
? <p>我是可折疊的內(nèi)容。</p>
</div>
親自試一試
默認(rèn)地，該內(nèi)容是關(guān)閉的。如需在頁面加載時擴(kuò)展內(nèi)容，請使用 data-collapsed="false"：
實(shí)例
<div data-role="collapsible" data-collapsed="false">
? <h1>點(diǎn)擊我 - 我可以折疊！</h1>
? <p>現(xiàn)在我默認(rèn)是展開的。</p>
</div>
親自試一試
嵌套的可折疊塊
可以嵌套可折疊內(nèi)容塊：
實(shí)例
<div data-role="collapsible">
? <h1>點(diǎn)擊我 - 我可以折疊！</h1>
? <p>我是被展開的內(nèi)容。</p>
? <div data-role="collapsible">
??? <h1>點(diǎn)擊我 - 我是嵌套的可折疊塊！</h1>
??? <p>我是嵌套的可折疊塊中被展開的內(nèi)容。</p>
? </div>
</div>
親自試一試
提示：可折疊內(nèi)容塊可以被嵌套您希望的任意次數(shù)。
可折疊集合
可折疊集合（Collapsible sets）指的是被組合在一起的可折疊塊（常被稱為手風(fēng)琴）。當(dāng)新塊被打開時，所有其他塊會關(guān)閉。
創(chuàng)建若干內(nèi)容塊，然后通過 data-role="collapsible-set" 用新容器包裝這個可折疊塊：
實(shí)例
<div data-role="collapsible-set">
? <div data-role="collapsible">
??? <h1>點(diǎn)擊我 - 我可以折疊！</h1>
??? <p>我是被展開的內(nèi)容。</p>
? </div>
? <div data-role="collapsible">
??? <h1>點(diǎn)擊我 - 我可以折疊！</h1>
??? <p>我是被展開的內(nèi)容。</p>
? </div>
</div>
親自試一試
更多實(shí)例
通過 data-inset 屬性來刪除圓角
??? 如何移除 collapsibles 上的圓角。
通過 data-mini 最小化 collapsibles
??? 如何使 collapsibles 更小巧。
通過 data-collapsed-icon 和 data-expanded-icon 改變圖標(biāo)
??? 如何改變 collapsibles 的圖標(biāo)（默認(rèn)是 + 和 -）。
jQuery Mobile 網(wǎng)格
??? jQuery Mobile 可折疊
??? jQuery Mobile 列表視圖
jQuery Mobile 布局網(wǎng)格
jQuery Mobile 提供了一套基于 CSS 的列布局方案。不過，一般不推薦在移動設(shè)備上使用列布局，這是由于移動設(shè)備的屏幕寬度所限。
但是有時您需要定位更小的元素，比如按鈕或?qū)Ш綑?#xff0c;就像在表格中那樣并排。這時，列布局就恰如其分。
網(wǎng)格中的列是等寬的（總寬是 100%），無邊框、背景、外邊距或內(nèi)邊距。
可使用的布局網(wǎng)格有四種：
網(wǎng)格類 ?? ?列 ?? ?列寬度 ?? ?對應(yīng) ?? ?實(shí)例
ui-grid-a ?? ?2 ?? ?50% / 50% ?? ?ui-block-a|b ?? ?測試
ui-grid-b ?? ?3 ?? ?33% / 33% / 33% ?? ?ui-block-a|b|c ?? ?測試
ui-grid-c ?? ?4 ?? ?25% / 25% / 25% / 25% ?? ?ui-block-a|b|c|d ?? ?測試
ui-grid-d ?? ?5 ?? ?20% / 20% / 20% / 20% / 20% ?? ?ui-block-a|b|c|d|e ?? ?測試
提示：在列容器中，根據(jù)不同的列數(shù)，子元素可設(shè)置類 ui-block-a|b|c|d|e。這些列將依次并排浮動。
實(shí)例 1: 對于 ui-grid-a 類（兩列布局），您必須規(guī)定兩個子元素 ui-block-a 和 ui-block-b。
實(shí)例 2: 對于 ui-grid-b 類（三列布局），請?zhí)砑尤齻€子元素 ui-block-a、ui-block-b 和 ui-block-c。
定制網(wǎng)格
您可以通過使用 CSS 來定制列塊：
實(shí)例
<style>
.ui-block-a,
.ui-block-b,
.ui-block-c
{
background-color: lightgray;
border: 1px solid black;
height: 100px;
font-weight: bold;
text-align: center;
padding: 30px;
}
</style>
親自試一試
您也可以通過使用行內(nèi)樣式來定制塊：
<div class="ui-block-a" style="border: 1px solid black;"><span>Text..</span></div>
多行
在列中包含多個行也是可能的。
注釋：ui-block-a-class 將始終創(chuàng)建新行：
實(shí)例
<div class="ui-grid-b">
? <div class="ui-block-a"><span>Some Text</span></div>
? <div class="ui-block-b"><span>Some Text</span></div>
? <div class="ui-block-c"><span>Some Text</span></div>
? <div class="ui-block-a"><span>Some Text</span></div>
? <div class="ui-block-b"><span>Some Text</span></div>
? <div class="ui-block-a"><span>Some Text</span></div>
</div>
親自試一試
jQuery Mobile 列表視圖
??? jQuery Mobile 網(wǎng)格
??? jQuery Mobile 列表內(nèi)容
jQuery Mobile 列表視圖
jQuery Mobile 中的列表視圖是標(biāo)準(zhǔn)的 HTML 列表：有序列表 (<ol>) 和無序列表 (<ul>)。
如需創(chuàng)建列表，請向 <ol> 或 <ul> 元素添加 data-role="listview"。如需使這些項(xiàng)目可點(diǎn)擊，請?jiān)诿總€列表項(xiàng)（<li>）中規(guī)定鏈接：
實(shí)例
<ol data-role="listview">
? <li><a href="#">列表項(xiàng)</a></li>
</ol>
<ul data-role="listview">
? <li><a href="#">列表項(xiàng)</a></li>
</ul>
親自試一試
如需為列表添加圓角和外邊距，請使用 data-inset="true" 屬性：
實(shí)例
<ul data-role="listview" data-inset="true">
親自試一試
提示：默認(rèn)地，列表中的列表項(xiàng)會自動轉(zhuǎn)換為按鈕（無需 data-role="button"）。
列表分隔符
列表分隔符（List Dividers）用于把項(xiàng)目組織和組合為分類/節(jié)。
如需規(guī)定列表分隔符，請向 <li> 元素添加 data-role="list-divider" 屬性：
實(shí)例
<ul data-role="listview">
?<li data-role="list-divider">歐洲</li>
? <li><a href="#">法國</a></li>
? <li><a href="#">德國</a></li>
</ul>
親自試一試
如果您的列表是字母順序的（比如通訊錄），jQuery Mobile 自動添加恰當(dāng)?shù)姆指舴?#xff0c;通過在 <ol> 或 <ul> 元素上設(shè)置 data-autodividers="true" 屬性：
實(shí)例
<ul data-role="listview" data-autodividers="true">
? <li><a href="#">Adam</a></li>
? <li><a href="#">Angela</a></li>
? <li><a href="#">Bill</a></li>
? <li><a href="#">Calvin</a></li>
? ...
</ul>
親自試一試
提示：data-autodividers="true" 屬性通過對列表項(xiàng)文本的首字母進(jìn)行大寫來創(chuàng)建分隔符。
搜索過濾器
如需在列表中添加搜索框，請使用 data-filter="true" 屬性：
實(shí)例
<ul data-role="listview" data-filter="true"></ul>
親自試一試
默認(rèn)地，搜索框中的文本是 "Filter items..."。
如需修改默認(rèn)文本，請使用 data-filter-placeholder 屬性：
實(shí)例
<ul data-role="listview" data-filter="true" data-filter-placeholder="搜索姓名">
親自試一試
更多實(shí)例
只讀列表
??? 如何創(chuàng)建沒有鏈接的列表（不是按鈕，不可點(diǎn)擊）。
jQuery Mobile 列表內(nèi)容
??? jQuery Mobile 列表視圖
??? jQuery Mobile 表單基礎(chǔ)
jQuery Mobile 列表縮略圖
對于大于 16x16px 的圖像，請?jiān)阪溄又刑砑?<img> 元素。
jQuery Mobile 將自動把圖像調(diào)整至 80x80px：
實(shí)例
<ul data-role="listview">
? <li><a href="#"><img src="chrome.png"></a></li>
</ul>
親自試一試
請使用標(biāo)準(zhǔn) HTML 來填充帶有信息的列表：
實(shí)例
<ul data-role="listview">
? <li>
??? <a href="#">
??? <img src="chrome.png">
??? <h2>Google Chrome</h2>
??? <p>Google Chrome 免費(fèi)的開源 web 瀏覽器。發(fā)布于 2008 年。</p>
??? </a>
? </li>
</ul>
親自試一試
jQuery Mobile 列表圖標(biāo)
如需向您的列表添加 16x16px 的圖標(biāo)，請向 <img> 元素添加 class="ui-li-icon" 屬性：
實(shí)例
<li><a href="#"><img src="us.png" alt="USA" class="ui-li-icon">USA</a></li>
親自試一試
拆分按鈕
如需創(chuàng)建帶有垂直分隔欄的拆分列表，請?jiān)?<li> 元素內(nèi)放置兩個鏈接。
jQuery Mobile 會自動為第二個鏈接添加藍(lán)色箭頭圖標(biāo)的樣式，鏈接中的文本（如有）將在用戶劃過該圖標(biāo)時顯示：
實(shí)例
<ul data-role="listview">
? <li>
??? <a href="#"><img src="chrome.png"></a>
??? <a href="#">Some Text</a>
? </li>
</ul>
親自試一試
通過添加頁面和對話框，可使鏈接的功能更強(qiáng)：
實(shí)例
<ul data-role="listview">
? <li>
??? <a href="#"><img src="chrome.png"></a>
??? <a href="#download" data-rel="dialog">下載瀏覽器</a>
? </li>
</ul>
親自試一試
計(jì)數(shù)泡沫
計(jì)數(shù)泡沫用于顯示與列表項(xiàng)相關(guān)的數(shù)目，例如郵箱中的消息：
如需添加計(jì)數(shù)泡沫，請使用行內(nèi)元素，比如 <span>，設(shè)置 class "ui-li-count" 屬性并添加數(shù)字：
實(shí)例
<ul data-role="listview">
? <li><a href="#">Inbox<span class="ui-li-count">335</span></a></li>
? <li><a href="#">Sent<span class="ui-li-count">123</span></a></li>
? <li><a href="#">Trash<span class="ui-li-count">7</span></a></li>
</ul>
親自試一試
注釋：如需在計(jì)數(shù)泡泡中顯示正確的數(shù)字，就必須進(jìn)行程序化更新。我們將在下一章種講解。
更多實(shí)例
更改列表項(xiàng)的默認(rèn)鏈接圖標(biāo)
??? 如何為列表項(xiàng)設(shè)置不同的鏈接圖標(biāo)（右箭頭是默認(rèn)的）。
可折疊列表
??? 如何創(chuàng)建隱藏和顯示內(nèi)容的列表。
更多內(nèi)容格式
??? 如何制作日歷。
jQuery Mobile 表單
??? jQuery Mobile 列表內(nèi)容
??? jQuery Mobile 表單輸入
jQuery Mobile 會自動為 HTML 表單添加優(yōu)異的便于觸控的外觀。
jQuery Mobile 表單結(jié)構(gòu)
jQuery Mobile 使用 CSS 來設(shè)置 HTML 表單元素的樣式，以使其更有吸引力更易用。
在 jQuery Mobile 中，您可以使用以下表單控件：
??? 文本框
??? 搜索框
??? 單選框
??? 復(fù)選框
??? 選擇菜單
??? 滑動條
??? 翻轉(zhuǎn)切換開關(guān)
當(dāng)您與 jQuery Mobile 表單打交道時，應(yīng)該了解以下信息：
??? <form> 元素必須設(shè)置 method 和 action 屬性
??? 每個表單元素必須設(shè)置唯一的 "id" 屬性。該 id 在站點(diǎn)的頁面中必須是唯一的。這是因?yàn)?jQuery Mobile 的單頁面導(dǎo)航模型允許許多不同的“頁面”同時呈現(xiàn)。
??? 每個表單元素必須有一個標(biāo)記（label）。請?jiān)O(shè)置 label 的 for 屬性來匹配元素的 id。
實(shí)例
<form method="post" action="demoform.asp">
? <label for="fname">First name:</label>
? <input type="text" name="fname" id="fname">
</form>
親自試一試
如需隱藏 label，請使用類 ui-hidden-accessible。這很常用，當(dāng)您需要元素的 placeholder 屬性充當(dāng) label 時：
實(shí)例
<form method="post" action="demoform.asp">
? <label for="fname" class="ui-hidden-accessible">姓名：</label>
? <input type="text" name="fname" id="fname" placeholder="姓名...">
</form>
親自試一試
域容器
如果需要 label 和表單元素在寬屏幕上顯示正常，請用帶有 data-role="fieldcontain" 屬性的 <div> 或 <fieldset> 元素來包裝 label 或表單元素：
實(shí)例
<form method="post" action="demoform.asp">
? <div data-role="fieldcontain">
??? <label for="fname">First name:</label>
??? <input type="text" name="fname" id="fname">
??? <label for="lname">Last name:</label>
??? <input type="text" name="lname" id="lname">
? </div>
</form>
親自試一試
提示：fieldcontain 屬性基于頁面寬度來設(shè)置 label 和表單控件的樣式。當(dāng)頁面寬度大于 480px 時，它會自動將 label 與表單控件放置于同一行。當(dāng)小于 480px 時，label 會被放置于表單元素之上。
提示：如需避免 jQuery Mobile 自動為可點(diǎn)擊元素設(shè)置樣式，請使用 data-role="none" 屬性：
實(shí)例
<label for="fname">First name:</label>
<input type="text" name="fname" id="fname" data-role="none">
親自試一試
在 jQuery Mobile 中提交表單
提示：jQuery Mobile 會自動通過 AJAX 進(jìn)行表單提交，并會嘗試將服務(wù)器響應(yīng)整合入應(yīng)用程序的 DOM 中。
jQuery Mobile 表單輸入元素
??? jQuery Mobile 表單基礎(chǔ)
??? jQuery Mobile 表單選擇
jQuery Mobile 文本輸入
輸入字段是通過標(biāo)準(zhǔn)的 HTML 元素編寫的，jQuery Mobile 會為它們設(shè)置專門針對移動設(shè)備的美觀易用的樣式。您還可以使用新的 HTML5 <input> 類型：
實(shí)例
<form method="post" action="demoform.asp">
? <div data-role="fieldcontain">
??? <label for="fullname">全名：</label>
??? <input type="text" name="fullname" id="fullname">
??? <label for="bday">生日：</label>
??? <input type="date" name="bday" id="bday">
??? <label for="email">電郵：</label>
??? <input type="email" name="email" id="email" placeholder="您的郵件地址..">
? </div>
</form>
親自試一試
提示：請使用 placeholder 來規(guī)定簡短的提示，以描述輸入字段的預(yù)期值：
<input placeholder="sometext">
文本框
請使用 <textarea> 來實(shí)現(xiàn)多行文本輸入。
注釋：文本框會自動擴(kuò)大，以適應(yīng)您輸入的文本行。
實(shí)例
<form method="post" action="demoform.asp">
? <div data-role="fieldcontain">
??? <label for="info">Additional Information:</label>
??? <textarea name="addinfo" id="info"></textarea>
? </div>
</form>
親自試一試
搜索框
輸入類型 type="search" 是 HTML5 中的新類型，用于定義供輸入搜索詞的文本字段：
實(shí)例
<form method="post" action="demoform.asp">
? <div data-role="fieldcontain">
??? <label for="search">Search:</label>
??? <input type="search" name="search" id="search">
? </div>
</form>
親自試一試
單選按鈕
當(dāng)用戶只選擇有限數(shù)量選項(xiàng)中的一個時，會用到單選按鈕。
如需創(chuàng)建一套單選按鈕，請?zhí)砑?type="radio" 的 input 元素以及相應(yīng)的 label。在 <fieldset> 元素中包裝單選按鈕。您也可以增加一個 <legend> 元素來定義 <fieldset> 的標(biāo)題。
提示：請用 data-role="controlgroup" 屬性來組合這些按鈕：
實(shí)例
<form method="post" action="demoform.asp">
? <fieldset data-role="controlgroup">
??? <legend>Choose your gender:</legend>
????? <label for="male">Male</label>
????? <input type="radio" name="gender" id="male" value="male">
????? <label for="female">Female</label>
????? <input type="radio" name="gender" id="female" value="female">
? </fieldset>
</form>
親自試一試
復(fù)選框
當(dāng)用戶選擇有限數(shù)量選項(xiàng)中的一個或多個選項(xiàng)時，會用到復(fù)選框：
實(shí)例
<form method="post" action="demoform.asp">
? <fieldset data-role="controlgroup">
??? <legend>Choose as many favorite colors as you'd like:</legend>
????? <label for="red">Red</label>
????? <input type="checkbox" name="favcolor" id="red" value="red">
????? <label for="green">Green</label>
????? <input type="checkbox" name="favcolor" id="green" value="green">
????? <label for="blue">Blue</label>
????? <input type="checkbox" name="favcolor" id="blue" value="blue">
? </fieldset>
</form>
親自試一試
更多實(shí)例
如需對單選框或復(fù)選框進(jìn)行水平分組，請使用 data-type="horizontal" 屬性：
實(shí)例
<fieldset data-role="controlgroup" data-type="horizontal">
親自試一試
您也可以使用域容器來包裝 <fieldset>：
實(shí)例
<div data-role="fieldcontain">
? <fieldset data-role="controlgroup">
??? <legend>Choose your gender:</legend>
? </fieldset>
</div>
親自試一試
如果您希望“預(yù)選”其中一個按鈕，請使用 HTML <input> 標(biāo)簽的 checked 屬性：
實(shí)例
<input type="radio" checked>
<input type="checkbox" checked>
親自試一試
jQuery Mobile 表單選擇菜單
??? jQuery Mobile 表單輸入
??? jQuery Mobile 表單滑塊
jQuery Mobile 選擇菜單
iPhone 上的選擇菜單：
Android 設(shè)備上的選擇菜單：
<select> 元素創(chuàng)建帶有若干選項(xiàng)的下拉菜單。
<select> 元素中的 <option> 元素定義列表中的可用選項(xiàng)：
實(shí)例
<form method="post" action="demoform.asp">
? <fieldset data-role="fieldcontain">
??? <label for="day">選擇日期</label>
??? <select name="day" id="day">
????? <option value="mon">星期一</option>
????? <option value="tue">星期二</option>
????? <option value="wed">星期三</option>
??? </select>
? </fieldset>
</form>
親自試一試
提示：如果列表中包含了一長列相關(guān)的選項(xiàng)，請?jiān)?<select> 中使用 <optgroup> 元素：
實(shí)例
<select name="day" id="day">
?? <optgroup label="Weekdays">
??? <option value="mon">Monday</option>
??? <option value="tue">Tuesday</option>
??? <option value="wed">Wednesday</option>
?? </optgroup>
?? <optgroup label="Weekends">
??? <option value="sat">Saturday</option>
??? <option value="sun">Sunday</option>
?? </optgroup>
</select>
親自試一試
自定義選擇菜單
本頁上方的圖片，展示了移動平臺顯示選擇菜單的獨(dú)特方式。
如果您希望在所有移動設(shè)備上顯示一致外觀的選擇菜單，請使用 jQuery 的自定義選擇菜單，data-native-menu="false" 屬性：
實(shí)例
<select name="day" id="day" data-native-menu="false">
親自試一試
Multiple Selections
如需在選擇菜單中選取多個選項(xiàng)，請?jiān)?<select> 元素中使用 multiple 屬性：
實(shí)例
<select name="day" id="day" multiple data-native-menu="false">
親自試一試
更多實(shí)例
使用 data-role="controlgroup"
??? 如何組合一個或多個選擇菜單。
使用 data-type="horizontal"
??? 如何水平地組合選擇菜單。
預(yù)選選項(xiàng)
??? 如何預(yù)選擇一個選項(xiàng)。
可折疊表單
??? 如何創(chuàng)建可折疊表單。
jQuery Mobile 表單 - 滑塊
??? jQuery Mobile 表單選擇
??? jQuery Mobile 主題
jQuery Mobile 滑塊控件
滑塊允許您從一定范圍內(nèi)的數(shù)字中選取值：
如需創(chuàng)建滑塊，請使用 <input type="range">：
實(shí)例
<form method="post" action="demoform.asp">
? <div data-role="fieldcontain">
??? <label for="points">Points:</label>
??? <input type="range" name="points" id="points" value="50" min="0" max="100">
? </div>
</form>
親自試一試
使用下列屬性來規(guī)定限定：
??? max - 規(guī)定允許的最大值
??? min - 規(guī)定允許的最小值
??? step - 規(guī)定合法的數(shù)字間隔
??? value - 規(guī)定默認(rèn)值
提示：如果您希望突出顯示截止滑塊值的這段軌道，請?zhí)砑?data-highlight="true"：
實(shí)例
<input type="range" data-hightlight="true">
親自試一試
切換開關(guān)
切換開關(guān)常用于開/關(guān)或?qū)?錯按鈕：
如需創(chuàng)建切換，請使用 data-role="slider" 的 <select> 元素，并添加兩個 <option> 元素：
實(shí)例
<form method="post" action="demoform.asp">
? <div data-role="fieldcontain">
??? <label for="switch">Toggle Switch:</label>
??? <select name="switch" id="switch" data-role="slider">
????? <option value="on">On</option>
????? <option value="off">Off</option>
??? </select>
? </div>
</form>
親自試一試
提示：請使用 "selected" 屬性來把選項(xiàng)之一設(shè)置為預(yù)選（突出顯示）：
實(shí)例
<option value="off" selected>Off</option>
親自試一試
jQuery Mobile 主題
??? jQuery Mobile 表單滑塊
??? jQuery Mobile 事件
jQuery Mobile 主題
jQuery Mobile 提供了五種不同的樣式主題，從 "a" 到 "e" - 每種主題帶有不同顏色的按鈕、欄、內(nèi)容塊，等等。jQuery Mobile 中的一種主題由多種可見的效果和顏色構(gòu)成。
如需定制應(yīng)用程序的外觀，請使用 data-theme 屬性，并為該屬性分配一個字母：
<div data-role="page" data-theme="a|b|c|d|e">
值 ?? ?描述 ?? ?例子
a ?? ?默認(rèn)。黑色背景上的白色文本。 ?? ?測試
b ?? ?藍(lán)色背景上的白色文本 / 灰色背景上的黑色文本 ?? ?測試
c ?? ?亮灰色背景上的黑色文本 ?? ?測試
d ?? ?白色背景上的黑色文本 ?? ?測試
e ?? ?橙色背景上的黑色文本 ?? ?測試
提示：混合您喜歡的主題！
默認(rèn)地，jQuery Mobile 為頁眉和頁腳使用 "a" 主題，為頁眉內(nèi)容使用 "c" 主題（亮灰）。不過，您能夠自如地對主題進(jìn)行混合。
主題化的頁面、內(nèi)容和頁腳
實(shí)例
<div data-role="header" data-theme="b"></div>
<div data-role="content" data-theme="a"></div>
<div data-role="footer" data-theme="e"></div>
親自試一試
主題化的對話框
實(shí)例
<a href="#pagetwo" data-rel="dialog">Go To The Themed Dialog Page</a>
<div data-role="page" id="pagetwo" data-overlay-theme="e">
? <div data-role="header" data-theme="b"></div>
? <div data-role="content" data-theme="a"></div>
? <div data-role="footer" data-theme="c"></div>
</div>
親自試一試
主題化的按鈕
實(shí)例
<a href="#" data-role="button" data-theme="a">Button</a>
<a href="#" data-role="button" data-theme="b">Button</a>
<a href="#" data-role="button" data-theme="c">Button</a>
親自試一試
主題化的圖標(biāo)
實(shí)例
<a href="#" data-role="button" data-icon="plus" data-theme="e">Plus</a>
親自試一試
頁眉和頁腳中的主題化按鈕
實(shí)例
<div data-role="header">
? <a href="#" data-role="button" data-icon="home" data-theme="b">Home</a>
? <h1>Welcome To My Homepage</h1>
? <a href="#" data-role="button" data-icon="search" data-theme="e">Search</a>
</div>
<div data-role="footer">
? <a href="#" data-role="button" data-theme="b" data-icon="plus">Button 1</a>
? <a href="#" data-role="button" data-theme="c" data-icon="plus">Button 2</a>
? <a href="#" data-role="button" data-theme="e" data-icon="plus">Button 3</a>
</div>
親自試一試
主題化的導(dǎo)航欄
實(shí)例
<div data-role="footer" data-theme="e">
? <h1>Insert Footer Text Here</h1>
? <div data-role="navbar">
??? <ul>
????? <li><a href="#" data-icon="home" data-theme="b">Button 1</a></li>
????? <li><a href="#" data-icon="arrow-r">Button 2</a></li>
????? <li><a href="#" data-icon="arrow-r">Button 3</a></li>
????? <li><a href="#" data-icon="search" data-theme="a" >Button 4</a></li>
??? </ul>
? </div>
</div>
親自試一試
主題化的可折疊按鈕和內(nèi)容
實(shí)例
<div data-role="collapsible" data-theme="b" data-content-theme="e">
? <h1>Click me - I'm collapsible!</h1>
? <p>I'm the expanded content.</p>
</div>
親自試一試
主題化列表
實(shí)例
<ul data-role="listview" data-theme="e">
? <li><a href="#">List Item</a></li>
? <li data-theme="a"><a href="#">List Item</a></li>
? <li data-theme="b"><a href="#">List Item</a></li>
? <li><a href="#">List Item</a></li>
</ul>
親自試一試
主題化劃分按鈕
實(shí)例
<ul data-role="listview" data-split-theme="e">
親自試一試
主題化的可折疊列表
實(shí)例
<div data-role="collapsible" data-theme="b" data-content-theme="e">
? <ul data-role="listview">
??? <li><a href="#">Agnes</a></li>
? </ul>
</div>
親自試一試
主題化表單
實(shí)例
<label for="name">Full Name:</label>
<input type="text" name="text" id="name" data-theme="a">
<label for="colors">Choose Favorite Color:</label>
<select id="colors" name="colors" data-theme="b">
? <option value="red">Red</option>
? <option value="green">Green</option>
? <option value="blue">Blue</option>
</select>
親自試一試
主題化的可折疊表單
實(shí)例
<fieldset data-role="collapsible" data-theme="b" data-content-theme="e">
<legend>Click me - I'm collapsible!</legend>
親自試一試
添加新主題
jQuery Mobile 同時允許您向移動頁面添加新主題。
請通過編輯 CSS 文件（如已下載 jQuery Mobile）來添加或編輯新主題。只需拷貝一段樣式，并用字母名（f-z）來對類進(jìn)行重命名，然后調(diào)整為您喜歡的顏色和字體即可。
您也可以通過在 HTML 文檔中使用主題類來添加新樣式 - 為工具條添加類 ui-bar-(a-z)，并為內(nèi)容添加類 ui-body-(a-z)：
實(shí)例
<style>
.ui-bar-f
{
color:green;
background-color:yellow;
}
.ui-body-f
{
font-weight:bold;
color:purple;
}
</style>
親自試一試
jQuery Mobile 事件
??? jQuery Mobile 主題
??? jQuery Mobile 觸控
事件 = 網(wǎng)頁能夠響應(yīng)的所有不同訪客的動作。
jQuery Mobile 事件
您能夠在 jQuery Mobile 中使用任何標(biāo)準(zhǔn)的 jQuery 事件。
此外，jQuery Mobile 還提供若干種為移動瀏覽定制的事件：
??? 觸摸事件 - 當(dāng)用戶觸摸屏幕時觸發(fā)（敲擊和滑動）
??? 滾動事件 - 當(dāng)上下滾動時觸發(fā)
??? 方向事件 - 當(dāng)設(shè)備垂直或水平旋轉(zhuǎn)時觸發(fā)
??? 頁面事件 - 當(dāng)頁面被顯示、隱藏、創(chuàng)建、加載以及/或卸載時觸發(fā)
如需關(guān)于所有 jQuery Mobile 事件的完整信息，請?jiān)L問我們的 jQuery Mobile 事件參考手冊。
初始化 jQuery Mobile 事件
在 jQuery 中，您已經(jīng)學(xué)到使用文檔 ready 事件來阻止 jQuery 代碼在文檔結(jié)束加載 (is ready) 前運(yùn)行：
jQuery document ready 事件
<script>
$(document).ready(function(){
?? // 此處是 jQuery 事件...
});
</script>
親自試一試
然而，在 jQuery Mobile 中，我們使用 pageinit 事件，該事件在頁面已初始化并完善樣式設(shè)置后發(fā)生。
第二個參數(shù)指向 ("#pageone") 指向頁面的 idpoints to the id of the page to specify the events for:
jQuery Mobile pageinit 事件
<script>
$(document).on("pageinit","#pageone",function(){
?? // 此處是 jQuery 事件...
});
</script>
親自試一試
注釋：jQuery on() 方法用于添加事件處理程序。
下幾章將詳解每個 jQuery Mobile 事件。
jQuery Mobile Touch 事件
??? jQuery Mobile 事件
??? jQuery Mobile 滾動
Touch 事件在用戶觸摸屏幕（頁面）時觸發(fā)。
提示：Touch 事件同樣適用于桌面電腦：點(diǎn)擊鼠標(biāo)！
jQuery Mobile Tap
tap 事件在用戶敲擊某個元素時觸發(fā)。
下面的例子當(dāng) <p> 元素上觸發(fā) tap 事件時，隱藏當(dāng)前 <p> 元素：
實(shí)例
$("p").on("tap",function(){
? $(this).hide();
});
親自試一試
jQuery Mobile Taphold
taphold 事件在用戶敲擊某個元素并保持一秒時被觸發(fā)：
實(shí)例
$("p").on("taphold",function(){
? $(this).hide();
});
親自試一試
jQuery Mobile Swipe
swipe 事件在用戶在某個元素上水平滑動超過 30px 時被觸發(fā)：
實(shí)例
$("p").on("swipe",function(){
? $("span").text("Swipe detected!");
});
親自試一試
jQuery Mobile Swipeleft
swipeleft 事件在用戶在某個元素上從左滑動超過 30px 時被觸發(fā)：
實(shí)例
$("p").on("swipeleft",function(){
? alert("You swiped left!");
});
親自試一試
jQuery Mobile Swiperight
swiperight 事件在用戶在某個元素上從右滑動超過 30px 時被觸發(fā)：
實(shí)例
$("p").on("swiperight",function(){
? alert("You swiped right!");
});
親自試一試
jQuery Mobile 滾動事件
??? jQuery Mobile 觸控
??? jQuery Mobile 方向
jQuery Mobile 提供兩種滾動事件：在滾動開始和當(dāng)滾動結(jié)束。
jQuery Mobile Scrollstart
scrollstart 事件在用戶開始滾動頁面時被觸發(fā)：
實(shí)例
$(document).on("scrollstart",function(){
? alert("開始滾動！");
});
親自試一試
注釋：iOS 設(shè)備會在滾動事件發(fā)生時凍結(jié) DOM 操作，這意味著當(dāng)用戶滾動時無法改變?nèi)魏问挛铩２贿^ jQuery 團(tuán)隊(duì)正致力于解決該問題。
jQuery Mobile Scrollstop
scrollstop 事件在用戶停止?jié)L動頁面時被觸發(fā)：
實(shí)例
$(document).on("scrollstop",function(){
? alert("結(jié)束滾動！");
});
親自試一試
jQuery Mobile 方向事件
??? jQuery Mobile 滾動
??? jQuery Mobile 頁面事件
jQuery Mobile orientationchange 事件
orientationchange 事件在用戶垂直或水平旋轉(zhuǎn)移動設(shè)備時被觸發(fā)。
Mobile
Mobile
如需使用 orientationchange 事件，請把它添加到 window 對象：
$(window).on("orientationchange",function(){
? alert("方向已改變！");
});
callback 函數(shù)可以設(shè)置一個參數(shù)，即 event 對象，它會返回移動設(shè)備的方向："portrait" （設(shè)備被握持的方向是垂直的）或 "landscape" （設(shè)備被握持的方向是水平的）：
實(shí)例
$(window).on("orientationchange",function(event){
? alert("方向是：" + event.orientation);
});
親自試一試
由于 orientationchange 事件與 window 對象綁定，我們能夠使用 window.orientation 屬性來，例如，設(shè)置不同樣式以區(qū)分 portrait 和 landscape 視圖：
實(shí)例
$(window).on("orientationchange",function(){
? if(window.orientation == 0) // Portrait
? {
??? $("p").css({"background-color":"yellow","font-size":"300%"});
? }
? else // Landscape
? {
??? $("p").css({"background-color":"pink","font-size":"200%"});
? }
});
親自試一試
提示：window.orientation 屬性對 portrait 視圖返回 0，對 landscape 視圖返回 90 或 -90。
jQuery Mobile 頁面事件
??? jQuery Mobile 方向
??? jQuery Mobile 實(shí)例
jQuery Mobile 頁面事件
在 jQuery Mobile 中與頁面打交道的事件被分為四類：
??? Page Initialization - 在頁面創(chuàng)建前，當(dāng)頁面創(chuàng)建時，以及在頁面初始化之后
??? Page Load/Unload - 當(dāng)外部頁面加載時、卸載時或遭遇失敗時
??? Page Transition - 在頁面過渡之前和之后
??? Page Change - 當(dāng)頁面被更改，或遭遇失敗時
如需關(guān)于所有 jQuery Mobile 事件的完整信息，請?jiān)L問我們的 jQuery Mobile 事件參考手冊。
jQuery Mobile Initialization 事件
當(dāng) jQuery Mobile 中的一張典型頁面進(jìn)行初始化時，它會經(jīng)歷三個階段：
??? 在頁面創(chuàng)建前
??? 頁面創(chuàng)建
??? 頁面初始化
每個階段觸發(fā)的事件都可用于插入或操作代碼。
事件 ?? ?描述
pagebeforecreate ?? ?當(dāng)頁面即將初始化，并且在 jQuery Mobile 已開始增強(qiáng)頁面之前，觸發(fā)該事件。
pagecreate ?? ?當(dāng)頁面已創(chuàng)建，但增強(qiáng)完成之前，觸發(fā)該事件。
pageinit ?? ?當(dāng)頁面已初始化，并且在 jQuery Mobile 已完成頁面增強(qiáng)之后，觸發(fā)該事件。
下面的例子演示在 jQuery Mobile 中創(chuàng)建頁面時，何時觸發(fā)每種事件：
實(shí)例
$(document).on("pagebeforecreate",function(event){
? alert("觸發(fā) pagebeforecreate 事件！");
});
$(document).on("pagecreate",function(event){
? alert("觸發(fā) pagecreate 事件！");
});
$(document).on("pageinit",function(event){
? alert("觸發(fā) pageinit 事件！")
});
親自試一試
jQuery Mobile Load 事件
頁面加載事件屬于外部頁面。
無論外部頁面何時載入 DOM，將觸發(fā)兩個事件。第一個是 pagebeforeload，第二個是 pageload （成功）或 pageloadfailed（失敗）。
下表中解釋了這些事件：
事件 ?? ?描述
pagebeforeload ?? ?在任何頁面加載請求作出之前觸發(fā)。
pageload ?? ?在頁面已成功加載并插入 DOM 后觸發(fā)。
pageloadfailed ?? ?如果頁面加載請求失敗，則觸發(fā)該事件。默認(rèn)地，將顯示 "Error Loading Page" 消息。
下列演示 pageload 和 pagloadfailed 事件的工作原理：
實(shí)例
$(document).on("pageload",function(event,data){
? alert("觸發(fā) pageload 事件！\nURL: " + data.url);
});
$(document).on("pageloadfailed",function(event,data){
? alert("抱歉，被請求頁面不存在。");
});
親自試一試
jQuery Mobile 過渡事件
我們還可以在從一頁過渡到下一頁時使用事件。
頁面過渡涉及兩個頁面：一張“來”的頁面和一張“去”的頁面 - 這些過渡使當(dāng)前活動頁面（“來的”頁面）到新頁面（“去的”頁面的改變過程變得更加動感。
事件 ?? ?描述
pagebeforeshow ?? ?在“去的”頁面觸發(fā)，在過渡動畫開始前。
pageshow ?? ?在“去的”頁面觸發(fā)，在過渡動畫完成后。
pagebeforehide ?? ?在“來的”頁面觸發(fā)，在過渡動畫開始前。
pagehide ?? ?在“來的”頁面觸發(fā)，在過渡動畫完成后。
下列演示了過渡時間的工作原理：
實(shí)例
$(document).on("pagebeforeshow","#pagetwo",function(){ // 當(dāng)進(jìn)入頁面二時
? alert("頁面二即將顯示");
});
$(document).on("pageshow","#pagetwo",function(){ // 當(dāng)進(jìn)入頁面二時
? alert("現(xiàn)在顯示頁面二");
});
$(document).on("pagebeforehide","#pagetwo",function(){ // 當(dāng)離開頁面二時
? alert("頁面二即將隱藏");
});
$(document).on("pagehide","#pagetwo",function(){ // 當(dāng)離開頁面二時
? alert("現(xiàn)在隱藏頁面二");
});
親自試一試
jQuery Mobile 實(shí)例
??? jQuery Mobile 頁面事件
??? jQuery Mobile Data
jQuery Mobile 頁面
基礎(chǔ)的移動網(wǎng)頁
多頁面
對話框
例子解釋
jQuery Mobile 過渡
淡入淡出效果
翻頁效果
流效果
彈窗效果
滑動效果
滑動淡出效果
上滑動效果
下滑動效果
翻頁效果
無過渡效果
逆轉(zhuǎn)效果
例子解釋
jQuery Mobile 按鈕
創(chuàng)建按鈕
行內(nèi)按鈕
分組按鈕
后退按鈕
帶有和不帶有圓角的按鈕
小型和常規(guī)尺寸的按鈕
帶有和不帶有陰影的按鈕
例子解釋
jQuery Mobile 按鈕圖標(biāo)
向按鈕添加圖標(biāo)
定位圖標(biāo)
只顯示圖標(biāo)
例子解釋
jQuery Mobile 工具欄
創(chuàng)建頁眉和頁腳
在頁眉中添加按鈕
在頁眉中向左側(cè)添加按鈕
在頁眉中向右側(cè)添加按鈕
帶有按鈕的頁腳
帶有居中對齊按鈕的頁腳
帶有分組按鈕的頁腳
帶有水平分組按鈕的頁腳
行內(nèi)定位 - 頁眉和頁腳與頁面內(nèi)容行內(nèi)定位
固定定位 - 頁眉和頁腳將保留在頁面的頂部和底部
全屏定位 - 頁面和頁腳分班位于頂部和底部，但仍然在頁面內(nèi)容上
例子解釋
jQuery Mobile 導(dǎo)航欄
創(chuàng)建導(dǎo)航欄
在內(nèi)容中的導(dǎo)航欄
在頁腳中導(dǎo)航欄
在導(dǎo)航欄中為按鈕添加被選外觀（被按下）
添加被選外觀（被按下）
在導(dǎo)航欄中定位圖標(biāo)
演示在導(dǎo)航欄中的十個按鈕
例子解釋
jQuery Mobile 可折疊
創(chuàng)建內(nèi)容可折疊塊
當(dāng)頁面加載時展開內(nèi)容
嵌套的可折疊塊
可折疊集合（手風(fēng)琴）
刪除可折疊塊上的圓角
使可折疊塊更小
改變可折疊塊的圖標(biāo)
可折疊列表
可折疊表單
例子解釋
jQuery Mobile 網(wǎng)格
兩列布局
三列布局
四列布局
五列布局
自定義網(wǎng)格
列中的多行
例子解釋
jQuery Mobile 列表
創(chuàng)建列表視圖
帶有圓角的列表視圖
列表分隔符
自動分隔符
創(chuàng)建搜索過濾器
改變搜索框中的文本
創(chuàng)建只讀列表
向列表項(xiàng)添加縮略圖
使用標(biāo)準(zhǔn) HTML 來填充帶有信息的列表
向列表項(xiàng)添加圖標(biāo)
創(chuàng)建帶有分隔按鈕的列表
增強(qiáng)列表項(xiàng)的功能性
創(chuàng)建計(jì)數(shù)泡泡
改變列表項(xiàng)的默認(rèn)鏈接圖標(biāo)
可折疊列表
創(chuàng)建日歷
例子解釋
jQuery Mobile 表單
文本輸入
文本框
搜索輸入
單選按鈕
復(fù)選框
對單選按鈕和復(fù)選框進(jìn)行水平組合
帶有單選按鈕和復(fù)選框的域包含器
預(yù)選的單選按鈕和復(fù)選框
創(chuàng)建選擇菜單
創(chuàng)建帶有分隔符的選擇菜單 (optgroup)
自定義選擇菜單
在選擇菜單中選取多個選項(xiàng)
組合選擇菜單
水平組合選擇菜單
預(yù)選一個選項(xiàng)
可折疊表單
創(chuàng)建滑塊控件
突出顯示截至滑塊值的軌道
范圍滑塊（雙重的）
創(chuàng)建切換開關(guān)
預(yù)選一個切換開關(guān)
例子解釋
jQuery Mobile 主題
主題 "a"
主題 "b"
主題 "c"
主題 "d"
主題 "e"
主題化的頁眉、內(nèi)容和頁腳
主題化的對話框
主題化的按鈕
主題化的圖標(biāo)
頁眉和頁腳中的主題化按鈕
主題化的導(dǎo)航欄
主題化的可折疊按鈕和內(nèi)容
主題化的列表
主題化的劃分按鈕
主題化的可折疊列表
主題化的表單
主題化的可折疊表單
定制主題
例子解釋
jQuery Mobile 事件
Tap 事件
Taphold 事件
Swipe 事件
Swipeleft 事件
Swiperight 事件
Scrollstart 事件
Scrollstop 事件
Orientationchange 事件 - 提示方向
Orientationchange 事件 - 為水平和垂直方向設(shè)置不同的樣式
Page initialization 事件
Page load 事件
Page transition 事件
例子解釋
jQuery Mobile Data 屬性
??? jQuery Mobile 實(shí)例
??? jQuery Mobile 事件
jQuery Data 屬性
jQuery Mobile 使用 HTML5 data-* 屬性為移動設(shè)備創(chuàng)建“對觸摸友好的”美觀的外觀。
在下面的參考列表中，粗體值規(guī)定默認(rèn)值。
Button
帶有 data-role="button" 的超鏈接。工具欄中的按鈕元素和鏈接以及輸入字段會被自動設(shè)置按鈕的樣式，無需 data-role="button"。
Data 屬性 ?? ?值 ?? ?描述
data-corners ?? ?true | false ?? ?規(guī)定按鈕是否有圓角。
data-icon ?? ?Icons Reference ?? ?規(guī)定按鈕的圖標(biāo)。默認(rèn)是沒有圖標(biāo)。
data-iconpos ?? ?left | right | top | bottom | notext ?? ?規(guī)定圖標(biāo)的位置。
data-iconshadow ?? ?true | false ?? ?規(guī)定按鈕圖標(biāo)是否有陰影。
data-inline ?? ?true | false ?? ?規(guī)定按鈕是否是行內(nèi)的。
data-mini ?? ?true | false ?? ?規(guī)定按鈕是小型的還是常規(guī)尺寸的。
data-shadow ?? ?true | false ?? ?規(guī)定按鈕是否有陰影。
data-theme ?? ?letter (a-z) ?? ?規(guī)定按鈕的主題顏色。
提示：如需組合多個按鈕，請使用帶有 data-role="controlgroup" 以及 data-type="horizontal|vertical" 屬性的容器，來規(guī)定水平還是垂直組合按鈕。
Checkbox
label 和 type="checkbox" 的 input 是成對的。會被自動設(shè)置為按鈕的樣式，無需 data-role。
Data 屬性 ?? ?值 ?? ?描述
data-mini ?? ?true | false ?? ?規(guī)定復(fù)選框是小型的還是常規(guī)尺寸的。
data-role ?? ?none ?? ?防止 jQuery Mobile 將復(fù)選框設(shè)置為按鈕的樣式。
data-theme ?? ?letter (a-z) ?? ?規(guī)定復(fù)選框的主題顏色。
提示：如需組合多個復(fù)選框，請使用 data-role="controlgroup" 以及 data-type="horizontal|vertical"，來規(guī)定水平還是垂直組合復(fù)選框。
Collapsible
標(biāo)題元素，其后是位于帶有 data-role="collapsible" 屬性的容器中的任意 HTML 標(biāo)記。
Data 屬性 ?? ?值 ?? ?描述
data-collapsed ?? ?true | false ?? ?規(guī)定內(nèi)容是否應(yīng)該關(guān)閉或展開。
data-collapsed-icon ?? ?Icons Reference ?? ?規(guī)定可折疊按鈕的圖標(biāo)。默認(rèn)是 "plus"。
data-content-theme ?? ?letter (a-z) ?? ?規(guī)定可折疊內(nèi)容的主題顏色。同時會向可折疊內(nèi)容添加圓角。
data-expanded-icon ?? ?Icons Reference ?? ?規(guī)定內(nèi)容被展開時的可折疊按鈕的圖標(biāo)。默認(rèn)是“減號”。
data-iconpos ?? ?left | right | top | bottom ?? ?規(guī)定圖標(biāo)的位置。
data-inset ?? ?true | false ?? ?規(guī)定可折疊按鈕是否擁有圓角和外邊距的樣式。
data-mini ?? ?true | false ?? ?規(guī)定可折疊按鈕是小型的還是常規(guī)尺寸的。
data-theme ?? ?letter (a-z) ?? ?規(guī)定可折疊按鈕的主題顏色。
Collapsible Set
帶有 data-role="collapsible-set" 屬性的容器中的可折疊內(nèi)容塊。
Data 屬性 ?? ?值 ?? ?描述
data-collapsed-icon ?? ?Icons Reference ?? ?規(guī)定可折疊按鈕的圖標(biāo)。默認(rèn)是“加號”。
data-content-theme ?? ?letter (a-z) ?? ?規(guī)定可折疊內(nèi)容的主題顏色。
data-expanded-icon ?? ?Icons Reference ?? ?規(guī)定內(nèi)容被展開時的可折疊按鈕的圖標(biāo)。默認(rèn)是“減號”。
data-iconpos ?? ?left | right | top | bottom | notext ?? ?規(guī)定圖標(biāo)的位置。
data-inset ?? ?true | false ?? ?規(guī)定 collapsibles 是否擁有圓角和外邊距的樣式。
data-mini ?? ?true | false ?? ?規(guī)定可折疊按鈕是小型的還是常規(guī)尺寸的。
data-theme ?? ?letter (a-z) ?? ?規(guī)定可折疊集合的主題顏色。
Content
帶有 data-role="content" 屬性的容器。
Data 屬性 ?? ?值 ?? ?描述
data-theme ?? ?letter (a-z) ?? ?規(guī)定內(nèi)容的主題顏色。默認(rèn)是 "c"。
Controlgroup
帶有 data-role="controlgroup" 屬性的 <div> or <fieldset> 容器。組合多個按鈕樣式的單一類型 input（基于鏈接的按鈕、單選按鈕、復(fù)選框、選擇菜單）。
Data 屬性 ?? ?值 ?? ?描述
data-mini ?? ?true | false ?? ?規(guī)定組合是小型的還是常規(guī)尺寸的。
data-type ?? ?horizontal | vertical ?? ?規(guī)定組合水平還是垂直顯示。
Dialog
data-role="dialog" 的容器或者 data-rel="dialog" 的鏈接。
Data 屬性 ?? ?值 ?? ?描述
data-close-btn-text ?? ?sometext ?? ?規(guī)定僅用于對話框的關(guān)閉按鈕的文本。
data-dom-cache ?? ?true | false ?? ?規(guī)定是否為個別頁面清除 jQuery DOM 緩存（如果設(shè)置 true，則需要注意對 DOM 的管理，并全面測試所有移動設(shè)備）。
data-overlay-theme ?? ?letter (a-z) ?? ?規(guī)定對話頁面的疊加（背景）色。
data-theme ?? ?letter (a-z) ?? ?規(guī)定對話頁的主題顏色。
data-title ?? ?sometext ?? ?規(guī)定對話頁的標(biāo)題。
Enhancement
帶有 data-enhance="false" 或 data-ajax="false" 屬性的容器。
Data 屬性 ?? ?值 ?? ?描述
data-enhance ?? ?true | false ?? ?如果設(shè)置為 "true"，, (default) jQuery Mobile 會自動為頁面添加樣式，使其更適合移動設(shè)備。如果設(shè)置為 "false"，則框架不會設(shè)置頁面的樣式。
data-ajax ?? ?true | false ?? ?規(guī)定是否通過 AJAX 來加載頁面。
注釋：data-enhance="false" 比如結(jié)合 $.mobile.ignoreContentEnabled=true" 使用，以阻止 jQuery Mobile 自動添加頁面樣式。
當(dāng) $.mobile.ignoreContentEnabled 設(shè)置為 true 時，data-ajax="false" 的容器中的任何鏈接或表單元素，將被框架的導(dǎo)航功能忽略。
Fieldcontainer
包裝 label/form 元素對的 data-role="fieldcontain" 的容器。
Fixed Toolbar
帶有 data-role="header" 或 data-role="footer" 屬性以及 data-position="fixed" 屬性的容器。
Data 屬性 ?? ?值 ?? ?描述
data-disable-page-zoom ?? ?true | false ?? ?規(guī)定用戶是否有能力縮放頁面。
data-fullscreen ?? ?true | false ?? ?規(guī)定工具欄始終位于頂部以及/或者底部。
data-tap-toggle ?? ?true | false ?? ?規(guī)定用戶是否有能力通過點(diǎn)擊/敲擊來切換工具欄的可見性。
data-transition ?? ?slide | fade | none ?? ?規(guī)定當(dāng)敲擊/點(diǎn)擊發(fā)生時的過渡效果。
data-update-page-padding ?? ?true | false ?? ?規(guī)定當(dāng)發(fā)生 resize、transition 以及 "updatelayout" 事件時更新頁面上下內(nèi)邊距（jQuery Mobile 總是在 "pageshow" 事件發(fā)生時更新內(nèi)邊距）
data-visible-on-page-show ?? ?true | false ?? ?規(guī)定在顯示父頁面時的工具欄可見性。
Flip Toggle Switch
帶有 data-role="slider" 屬性的一個 <select> 元素以及兩個 <option> 元素。
Data 屬性 ?? ?值 ?? ?描述
data-mini ?? ?true | false ?? ?規(guī)定開關(guān)是小型的還是常規(guī)尺寸的。
data-role ?? ?none ?? ?防止 jQuery Mobile 將切換開關(guān)設(shè)置為按鈕樣式。
data-theme ?? ?letter (a-z) ?? ?規(guī)定切換開關(guān)的主題顏色。
data-track-theme ?? ?letter (a-z) ?? ?規(guī)定軌道的主題顏色。
Footer
帶有 data-role="footer" 屬性的容器。
Data 屬性 ?? ?值 ?? ?描述
data-id ?? ?sometext ?? ?規(guī)定唯一 ID。對于 persistent footers 是必需的。
data-position ?? ?inline | fixed ?? ?規(guī)定頁腳與頁面內(nèi)容是行內(nèi)關(guān)系，還是保留在底部。
data-fullscreen ?? ?true | false ?? ?規(guī)定頁面是否始終位于底部并覆蓋頁面內(nèi)容 (slightly see-through)。
data-theme ?? ?letter (a-z) ?? ?規(guī)定頁腳的主題顏色。默認(rèn)是 "a"。
注釋：如需啟用 fullscreen 定位，請使用 data-position="fixed"，然后為該元素添加 data-fullscreen 屬性。
Header
data-role="header" 的容器。
Data 屬性 ?? ?值 ?? ?描述
data-id ?? ?sometext ?? ?規(guī)定唯一 ID。對于 persistent headers 是必需的。
data-position ?? ?inline | fixed ?? ?規(guī)定頁眉與頁面內(nèi)容是行內(nèi)關(guān)系，還是保留在頂部。
data-fullscreen ?? ?true | false ?? ?規(guī)定頁面是否始終位于頂部并覆蓋頁面內(nèi)容 (slightly see-through)。
data-theme ?? ?letter (a-z) ?? ?規(guī)定頁眉的主題顏色。默認(rèn)是 "a"。
注釋：如需啟用 fullscreen 定位，請使用 data-position="fixed"，然后為該元素添加 data-fullscreen 屬性。
Link
所有鏈接，包括 data-role="button" 的鏈接以及表單提交按鈕。
Data 屬性 ?? ?值 ?? ?描述
data-ajax ?? ?true | false ?? ?規(guī)定是否通過 AJAX 來加載頁面，以改進(jìn)用戶體驗(yàn)和過渡。如果設(shè)置為 false，則 jQuery Mobile 將進(jìn)行普通的頁面請求。
data-direction ?? ?reverse ?? ?反轉(zhuǎn)過渡動畫（僅用于頁面或?qū)υ?#xff09;
data-dom-cache ?? ?true | false ?? ?規(guī)定是否清除個別頁面的 jQuery DOM 緩存（如果設(shè)置為 true，則您需要注意對 DOM 的管理，并全面測試所有移動設(shè)備）。
data-prefetch ?? ?true | false ?? ?規(guī)定是否把頁面預(yù)取到 DOM 中，以使其在用戶訪問時可用。
data-rel ?? ?back | dialog | external | popup ?? ?規(guī)定有關(guān)鏈接如何行為的選項(xiàng)。 Back - 在歷史記錄中向后移動一步。 Dialog - 將頁面作為對話來打開，不在歷史中記錄。 External - 鏈接到另一域。 opens - 打開彈出窗口。
data-transition ?? ?fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none ?? ?規(guī)定如何從一頁過渡到下一頁。參加 jQuery Mobile 過渡。
data-position-to ?? ?origin | jQuery selector | window ?? ?規(guī)定彈出框的位置。 Origin - 默認(rèn)。在打開它的鏈接上彈出。 jQuery selector - 在指定元素上彈出。 Window - 在窗口屏幕中間彈出。
List
帶有 data-role="listview" 屬性的 <ol> 或 <ul>。
Data 屬性 ?? ?值 ?? ?描述
data-autodividers ?? ?true | false ?? ?規(guī)定是否自動分隔列表項(xiàng)。
data-count-theme ?? ?letter (a-z) ?? ?規(guī)定計(jì)數(shù)泡沫的主題顏色。默認(rèn)是 "c"。
data-divider-theme ?? ?letter (a-z) ?? ?規(guī)定列表分隔符的主題顏色。默認(rèn)是 "b"。
data-filter ?? ?true | false ?? ?規(guī)定是否在列表中添加搜索框。
data-filter-placeholder ?? ?sometext ?? ?規(guī)定搜索框中的文本。默認(rèn)是 "Filter items..."。
data-filter-theme ?? ?letter (a-z) ?? ?規(guī)定搜索過濾程序的主題顏色。默認(rèn)是 "c"。
data-icon ?? ?Icons Reference ?? ?規(guī)定列表的圖標(biāo)。
data-inset ?? ?true | false ?? ?規(guī)定是否為列表添加圓角和外邊距樣式。
data-split-icon ?? ?Icons Reference ?? ?規(guī)定劃分按鈕的圖標(biāo)。默認(rèn)是 "arrow-r"。
data-split-theme ?? ?letter (a-z) ?? ?規(guī)定劃分按鈕的主題顏色。默認(rèn)是 "b"。
data-theme ?? ?letter (a-z) ?? ?規(guī)定列表的主題顏色。
List item
帶有 data-role="listview" 屬性的 <ol> 或 <ul> 中的 <li>。
Data 屬性 ?? ?值 ?? ?描述
data-filtertext ?? ?sometext ?? ?規(guī)定在過濾元素時搜索的文本。該文本而不是實(shí)際的列表項(xiàng)文本將會被搜索。
data-icon ?? ?Icons Reference ?? ?規(guī)定列表項(xiàng)的圖標(biāo)。
data-role ?? ?list-divider ?? ?規(guī)定列表項(xiàng)的分隔符。
data-theme ?? ?letter (a-z) ?? ?規(guī)定列表項(xiàng)的主題顏色。
注釋：data-icon 屬性僅適用于含有鏈接的列表項(xiàng)。
Navbar
帶有 data-role="navbar" 屬性的容器內(nèi)部的 <li> 元素。
Data 屬性 ?? ?值 ?? ?描述
data-icon ?? ?Icons Reference ?? ?規(guī)定列表項(xiàng)的圖標(biāo)。
data-iconpos ?? ?left | right | top | bottom | notext ?? ?規(guī)定圖標(biāo)的位置。
提示：導(dǎo)航欄從其父容器繼承 theme-swatch。向?qū)Ш綑谠O(shè)置 data-theme 屬性是不可行的。可以單獨(dú)向 navbar 中的每個鏈接設(shè)置 data-theme 屬性。
Page
帶有 data-role="page" 屬性的容器。
Data 屬性 ?? ?值 ?? ?描述
data-add-back-btn ?? ?true | false ?? ?自動添加后退按鈕，僅用于頁眉。
data-back-btn-text ?? ?sometext ?? ?規(guī)定后退按鈕的文本。
data-back-btn-theme ?? ?letter (a-z) ?? ?規(guī)定后退按鈕的主題顏色。
data-close-btn-text ?? ?letter (a-z) ?? ?規(guī)定對話上的關(guān)閉按鈕的文本。
data-dom-cache ?? ?true | false ?? ?規(guī)定是否清除個別頁面的 jQuery DOM 緩存（如果設(shè)置為 true，則您需要注意對 DOM 的管理，并全面測試所有移動設(shè)備）。
data-overlay-theme ?? ?letter (a-z) ?? ?規(guī)定對話頁面的疊加（背景）色。
data-theme ?? ?letter (a-z) ?? ?規(guī)定頁面的主題顏色。默認(rèn)是 "c"。
data-title ?? ?sometext ?? ?規(guī)定頁面的標(biāo)題。
data-url ?? ?url ?? ?該值用于更新 URL，而不是用于請求頁面。
Popup
帶有 data-role="popup" 屬性的容器。
Data 屬性 ?? ?值 ?? ?描述
data-corners ?? ?true | false ?? ?規(guī)定彈出框是否有圓角。
data-overlay-theme ?? ?letter (a-z) ?? ?規(guī)定彈出框的疊加（背景）色。默認(rèn)是透明背景（none）。
data-shadow ?? ?true | false ?? ?規(guī)定彈出框是否有陰影。
data-theme ?? ?letter (a-z) ?? ?規(guī)定彈出框的主題顏色。默認(rèn)是繼承，"none" 設(shè)置為透明。
data-tolerance ?? ?30, 15, 30, 15 ?? ?規(guī)定距離窗口邊緣 (top, right, bottom, left) 的距離。
帶有 data-rel="popup" 屬性的錨：
Data 屬性 ?? ?值 ?? ?描述
data-position-to ?? ?origin | jQuery selector | window ?? ?規(guī)定彈出框的位置。 Origin - 默認(rèn)。彈出框位于打開它的鏈接上。 jQuery selector - 彈出框位于指定元素上。 Window - 彈出框位于窗口屏幕中央。
data-rel ?? ?popup ?? ?用于打開的彈出框。
data-transition ?? ?fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none ?? ?規(guī)定如何從一頁過渡到下一頁。參加 jQuery Mobile 過渡。
Radio Button
label 與 type="radio" 的 input 對。會被自動設(shè)置為按鈕樣式，無需 data-role。
Data 屬性 ?? ?值 ?? ?描述
data-mini ?? ?true | false ?? ?規(guī)定按鈕是否小型的或者是常規(guī)尺寸的。
data-role ?? ?none ?? ?放置 jQuery Mobile 將單選按鈕設(shè)置為 enhanced buttons 的樣式。
data-theme ?? ?letter (a-z) ?? ?規(guī)定單選按鈕的主題顏色。
提示：如需組合多個單選按鈕，請使用 data-role="controlgroup" 以及 data-type="horizontal|vertical" 來規(guī)定水平還是垂直地組合按鈕。
Select
所有 <select> 元素。會被自動設(shè)置按鈕的樣式，無需 date-role。
Data 屬性 ?? ?值 ?? ?描述
data-icon ?? ?Icons Reference ?? ?規(guī)定 select 元素的圖標(biāo)。默認(rèn)是 "arrow-d"。
data-iconpos ?? ?left | right | top | bottom | notext ?? ?規(guī)定圖標(biāo)的位置。
data-inline ?? ?true | false ?? ?規(guī)定 select 元素是否是行內(nèi)。
data-mini ?? ?true | false ?? ?規(guī)定 select 元素是小型的還是常規(guī)尺寸的。
data-native-menu ?? ?true | false ?? ?如果設(shè)置為 false，則使用 jQuery 自己的自定義選擇菜單（如果您希望選擇菜單在所有移動設(shè)備上擁有一致的外觀，則推薦使用）。
data-overlay-theme ?? ?letter (a-z) ?? ?規(guī)定 jQuery 自定義選擇菜單的主題顏色（與 data-native-menu="false" 一起使用）。
data-placeholder ?? ?true | false ?? ?可以在非原生 select 的 <option> 元素上設(shè)置。
data-role ?? ?none ?? ?放置 jQuery Mobile 將 select 元素設(shè)置為按鈕樣式。
data-theme ?? ?letter (a-z) ?? ?規(guī)定 select 元素的主題顏色。
提示：如需組合多個 select 元素，請使用 data-role="controlgroup" 以及 data-type="horizontal|vertical" 來規(guī)定把該元素水平還是垂直地進(jìn)行組合。
Slider
type="range" 的 input 元素。會被自動設(shè)置為按鈕樣式，無需 data-role。
Data 屬性 ?? ?值 ?? ?描述
data-highlight ?? ?true | false ?? ?規(guī)定是否突出顯示滑塊軌道。
data-mini ?? ?true | false ?? ?規(guī)定滑塊是小型的還是常規(guī)尺寸的。
data-role ?? ?none ?? ?放置 jQuery Mobile 將滑塊設(shè)置按鈕的樣式。
data-theme ?? ?letter (a-z) ?? ?規(guī)定滑塊控件（input、handle 和 track）的主題顏色。
data-track-theme ?? ?letter (a-z) ?? ?規(guī)定滑塊軌道的主題顏色。
Text input & Textarea
type="text|search|etc." 的 input 元素或 textarea 元素。會被自動設(shè)置樣式，無需 data-role。
Data 屬性 ?? ?值 ?? ?描述
data-mini ?? ?true | false ?? ?規(guī)定是否 input 元素是小型的還是常規(guī)尺寸的。
data-role ?? ?none ?? ?放置 jQuery Mobile 將 input/textarea 設(shè)置問按鈕的樣式。
data-theme ?? ?letter (a-z) ?? ?規(guī)定輸入字段的主題顏色。
jQuery Mobile 事件
??? jQuery Mobile Data
??? jQuery Mobile 圖標(biāo)
jQuery Mobile 事件參考手冊
下表列出了所有的 jQuery Mobile 事件。
注釋：請通過使用 on() 方法來綁定事件。
事件 ?? ?描述
hashchange ?? ?啟用 bookmarkable #hash 歷史記錄。
navigate ?? ?針對 hashchange 和 popstate 的 wrapper 事件。
orientationchange ?? ?當(dāng)用戶垂直或水平旋轉(zhuǎn)其移動設(shè)備時觸發(fā)。
pagebeforechange ?? ?在頁面變化周期內(nèi)觸發(fā)兩次：任意頁面加載或過渡之前觸發(fā)一次，接下來在頁面成功完成加載后，但是在瀏覽器歷史記錄被導(dǎo)航進(jìn)程修改之前觸發(fā)。
pagebeforecreate ?? ?當(dāng)頁面即將被初始化，但是在增強(qiáng)開始之前觸發(fā)。
pagebeforehide ?? ?在過渡動畫開始前，在“來源”頁面上觸發(fā)。
pagebeforeload ?? ?在作出任何加載請求之前觸發(fā)。
pagebeforeshow ?? ?在過渡動畫開始前，在“到達(dá)”頁面上觸發(fā)。
pagechange ?? ?在 changePage() 請求已完成將頁面載入 DOM 并且所有頁面過渡動畫已完成后觸發(fā)。
pagechangefailed ?? ?當(dāng) changePage() 請求對頁面的加載失敗時觸發(fā)。
pagecreate ?? ?當(dāng)頁面已創(chuàng)建，但是增強(qiáng)完成之前觸發(fā)。
pagehide ?? ?在過渡動畫完成后，在“來源”頁面觸發(fā)。
pageinit ?? ?當(dāng)頁面已經(jīng)初始化并且完成增強(qiáng)時觸發(fā)。
pageload ?? ?在頁面成功加載并插入 DOM 后觸發(fā)。
pageloadfailed ?? ?如果頁面加載請求失敗，則觸發(fā)。
pageremove ?? ?在窗口視圖從 DOM 中移除外部頁面之前觸發(fā)。
pageshow ?? ?在過渡動畫完成后，在“到達(dá)”頁面觸發(fā)。
scrollstart ?? ?當(dāng)用戶開始滾動頁面時觸發(fā)。
scrollstop ?? ?當(dāng)用戶停止?jié)L動頁面時觸發(fā)。
swipe ?? ?當(dāng)用戶在元素上水平滑動時觸發(fā)。
swipeleft ?? ?當(dāng)用戶從左劃過元素超過 30px 時觸發(fā)。
swiperight ?? ?當(dāng)用戶從右劃過元素超過 30px 時觸發(fā)。
tap ?? ?當(dāng)用戶敲擊某元素時觸發(fā)。
taphold ?? ?當(dāng)元素敲擊某元素并保持一秒時觸發(fā)。
throttledresize ?? ?啟用 bookmarkable #hash 歷史記錄
updatelayout ?? ?由動態(tài)顯示/隱藏內(nèi)容的 jQuery Mobile 組件觸發(fā)。
vclick ?? ?虛擬化的 click 事件處理器
vmousecancel ?? ?虛擬化的 mousecancel 事件處理器
vmousedown ?? ?虛擬化的 mousedown 事件處理器
vmousemove ?? ?虛擬化的 mousemove 事件處理器
vmouseout ?? ?虛擬化的 mouseout 事件處理器
vmouseover ?? ?虛擬化的 mouseover 事件處理器
vmouseup ?? ?虛擬化的 mouseup 事件處理器
jQuery Mobile 圖標(biāo)
??? jQuery Mobile 事件
??? jQuery Mobile 教程
jQuery 圖標(biāo)
如需在 jQuery Mobile 中向按鈕添加圖標(biāo)，請使用 data-icon 屬性：
<a href="#anylink" data-role="button" data-icon="refresh">Refresh Page</a>
提示：您也可以在 <button> 或 <input> 元素中使用 data-icon 屬性。
下面我們已列出 jQuery Mobile 提供的所有可用圖標(biāo)：
屬性值 ?? ?描述 ?? ?圖標(biāo) ?? ?例子
data-icon="arrow-l" ?? ?左箭頭 ?? ??? ?測試
data-icon="arrow-r" ?? ?右箭頭 ?? ??? ?測試
data-icon="arrow-u" ?? ?上箭頭 ?? ??? ?測試
data-icon="arrow-d" ?? ?下箭頭 ?? ??? ?測試
data-icon="plus" ?? ?加 ?? ??? ?測試
data-icon="minus" ?? ?減 ?? ??? ?測試
data-icon="delete" ?? ?刪除 ?? ??? ?測試
data-icon="check" ?? ?檢查 ?? ??? ?測試
data-icon="home" ?? ?首頁 ?? ??? ?測試
data-icon="info" ?? ?信息 ?? ??? ?測試
data-icon="grid" ?? ?網(wǎng)格 ?? ??? ?測試
data-icon="gear" ?? ?齒輪 ?? ??? ?測試
data-icon="search" ?? ?搜索 ?? ??? ?測試
data-icon="back" ?? ?后退 ?? ??? ?測試
data-icon="forward" ?? ?向前 ?? ??? ?測試
data-icon="refresh" ?? ?刷新 ?? ??? ?測試
data-icon="star" ?? ?星 ?? ??? ?測試
data-icon="alert" ?? ?提醒 ?? ??? ?測試
??? jQuery Mobile 教程
??? jQuery Mobile 安裝
jQuery Mobile 是一種 web 框架，用于創(chuàng)建移動 web 應(yīng)用程序。
您應(yīng)該具備的基礎(chǔ)知識
在您開始學(xué)習(xí) jQuery Mobile 之前，您應(yīng)該對以下知識有基本的了解：
??? HTML
??? CSS
??? jQuery
如果您需要首先學(xué)習(xí)這些項(xiàng)目，請?jiān)谖覀兊氖醉撛L問這些教程。
什么是 jQuery Mobile？
jQuery Mobile 是一個為觸控優(yōu)化的框架，用于創(chuàng)建移動 web 應(yīng)用程序。
jQuery 適用于所有流行的智能手機(jī)和平板電腦：
jQuery Mobile 構(gòu)建于 jQuery 庫之上，這使其更易學(xué)習(xí)，如果您通曉 jQuery 的話。
它使用 HTML5、CSS3、JavaScript 和 AJAX 通過盡可能少的代碼來完成對頁面的布局。
為什么使用 jQuery Mobile？
jQuery Mobile 將“寫得更少、做得更多”這一理念提升到了新的層次：它會自動為網(wǎng)頁設(shè)計(jì)交互的易用外觀，并在所有移動設(shè)計(jì)上保持一致。
提示：您不需要為每種移動設(shè)備或 OS 編寫一個應(yīng)用程序：
??? Android 和 Blackberry 用 Java 編寫
??? iOS 用 Objective C 編寫
??? Windows Phone 用 C# 和 .net 編寫
jQuery Mobile 解決了這個問題，因?yàn)樗挥?HTML、CSS 和 JavaScript，這些技術(shù)都是所有移動 web 瀏覽器的標(biāo)準(zhǔn)。
最佳閱讀體驗(yàn)
盡管 jQuery Mobile 工作于所有移動設(shè)備，它可能在桌面計(jì)算機(jī)上存在兼容性問題（“歸功于”有限的 CSS3 支持）。
因此在本教程中，我們推薦您使用谷歌的 Chrome 瀏覽器，以獲得最好的閱讀體驗(yàn)。
jQuery Mobile 安裝
??? jQuery Mobile 簡介
??? jQuery Mobile 頁面
向您的網(wǎng)頁添加 jQuery Mobile
有多個辦法可供您在網(wǎng)站上開始使用 jQuery Mobile。您可以：
??? 從 CDN 引用 jQuery Mobile（推薦）
??? 從 jQuerymobile.com 下載 jQuery Mobile 庫
從 CDN 引用 jQuery Mobile
提示：CDN (Content Delivery Network) 用于通過 web 來分發(fā)常用的文件，以此加快用戶的下載速度。
與 jQuery 類似，無需在您的計(jì)算機(jī)上安裝任何程序；您只需直接在 HTML 頁面中引用以下樣式表和 JavaScript 庫，這樣 jQuery Mobile 就可以工作了：
jQuery Mobile CDN:
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
親自試一試
下載 jQuery Mobile
如果您希望在服務(wù)器上存放 jQuery Mobile，您可以從 jQuerymobile.com 下載文件。
<head>
<link rel=stylesheet href=jquery.mobile-1.3.2.css>
<script src=jquery.js></script>
<script src=jquery.mobile-1.3.2.js></script>
</head>
提示：請將下載的文件放到您希望使用的文件夾中。
提示：您是不是奇怪為什么 <script> 標(biāo)簽中沒有 type="text/javascript" 屬性？
在 HTML5 中該屬性不是必需的。JavaScript 是 HTML5 以及所有現(xiàn)代瀏覽器中的默認(rèn)腳本語言！
jQuery Mobile 頁面
??? jQuery Mobile 安裝
??? jQuery Mobile 過渡
使用 jQuery Mobile 入門
提示：盡管 jQuery Mobile 適用于所有移動設(shè)備，它在臺式計(jì)算機(jī)上仍然可能存在兼容性問題（由于有限的 CSS3 支持）。
因此在本教程中，我們推薦您使用谷歌的 Chrome 瀏覽器，以獲得最好的閱讀體驗(yàn)。
實(shí)例
<body>
<div data-role="page">
? <div data-role="header">
??? <h1>歡迎訪問我的主頁</h1>
? </div>
? <div data-role="content">
??? <p>我是一名移動開發(fā)者！</p>
? </div>
? <div data-role="footer">
??? <h1>頁腳文本</h1>
? </div>
</div>
</body>
親自試一試
例子解釋：
??? data-role="page" 是顯示在瀏覽器中的頁面
??? data-role="header" 創(chuàng)建頁面上方的工具欄（常用于標(biāo)題和搜索按鈕）
??? data-role="content" 定義頁面的內(nèi)容，比如文本、圖像、表單和按鈕，等等
??? data-role="footer" 創(chuàng)建頁面底部的工具欄
在這些容器中，您可以添加任意 HTML 元素 - 段落、圖像、標(biāo)題、列表等等。
提示：HTML5 data-* 屬性用于通過 jQuery Mobile 為移動設(shè)備創(chuàng)建“對觸控友好的”交互外觀。
在 jQuery Mobile 中添加頁面
在 jQuery Mobile，您可以在單一 HTML 文件中創(chuàng)建多個頁面。
請通過唯一的 id 來分隔每張頁面，并使用 href 屬性來連接彼此：
實(shí)例
<div data-role="page" id="pageone">
? <div data-role="content">
??? <a href="#pagetwo">轉(zhuǎn)到頁面二</a>
? </div>
</div>
<div data-role="page" id="pagetwo">
? <div data-role="content">
??? <a href="#pageone">轉(zhuǎn)到頁面一</a>
? </div>
</div>
親自試一試
注釋：包含大量內(nèi)容的 web 應(yīng)用程序會影響加載時間（比如文本、鏈接、圖像和腳本等等）。如果您不希望在內(nèi)部鏈接頁面，請使用外部文件：
<a href="externalfile.html">轉(zhuǎn)到外部頁面</a>
將頁面用作對話框
對話框是用來顯示信息或請求輸入的視窗類型。
如需在用戶點(diǎn)擊（輕觸）鏈接時創(chuàng)建一個對話框，請向該鏈接添加 data-rel="dialog"：
實(shí)例
<div data-role="page" id="pageone">
? <div data-role="content">
??? <a href="#pagetwo" data-rel="dialog">轉(zhuǎn)到頁面二</a>
? </div>
</div>
<div data-role="page" id="pagetwo">
? <div data-role="content">
??? <a href="#pageone">轉(zhuǎn)到頁面一</a>
? </div>
</div>
親自試一試
jQuery Mobile 過渡
??? jQuery Mobile 頁面
??? jQuery Mobile 按鈕
jQuery Mobile 包含了允許您選擇頁面打開方式的 CSS 效果。
jQuery Mobile 過渡效果
jQuery Mobile 擁有一系列關(guān)于如何從一頁過渡到下一頁的效果。
注釋：如需實(shí)現(xiàn)過渡效果，瀏覽器必須支持 CSS3 3D 轉(zhuǎn)換：
瀏覽器支持
??? Internet Explorer 10 支持 3D 轉(zhuǎn)換（更早的版本不支持）
??? Opera 仍然不支持 3D 轉(zhuǎn)換
過渡效果可應(yīng)用于任意鏈接或通過使用 data-transition 屬性進(jìn)行的表單提交：
<a href="#anylink" data-transition="slide">滑動到頁面二</a>
下面的表格展示了可與 data-transition 屬性一同使用的可用過渡：
過渡 ?? ?描述 ?? ?測試
fade ?? ?默認(rèn)。淡入淡出到下一頁。 ?? ?測試
flip ?? ?從后向前翻動到下一頁。 ?? ?測試
flow ?? ?拋出當(dāng)前頁面，引入下一頁。 ?? ?測試
pop ?? ?像彈出窗口那樣轉(zhuǎn)到下一頁。 ?? ?測試
slide ?? ?從右向左滑動到下一頁。 ?? ?測試
slidefade ?? ?從右向左滑動并淡入到下一頁。 ?? ?測試
slideup ?? ?從下到上滑動到下一頁。 ?? ?測試
slidedown ?? ?從上到下滑動到下一頁。 ?? ?測試
turn ?? ?轉(zhuǎn)向下一頁。 ?? ?測試
none ?? ?無過渡效果。 ?? ?測試
提示：在 jQuery Mobile 中，淡入淡出效果在所有鏈接上都是默認(rèn)的（如果瀏覽器支持）。
提示：以上所有效果同時支持反向動作，例如，如果您希望頁面從左向右滑動，而不是從右向左，請使用值為 "reverse" 的 data-direction 屬性。在后退按鈕上是默認(rèn)的。
實(shí)例
<a href="#pagetwo" data-transition="slide" data-direction="reverse">滑動</a>
親自試一試
jQuery Mobile 按鈕
??? jQuery Mobile 過渡
??? jQuery Mobile 圖標(biāo)
移動應(yīng)用程序構(gòu)建于觸控操作的便利性之上。
在 jQuery Mobile 中創(chuàng)建按鈕
jQuery Mobile 中的按鈕可通過三種方法創(chuàng)建：
??? 使用 <button> 元素
??? 使用 <input> 元素
??? 使用 data-role="button" 的 <a> 元素
<button>
<button>按鈕</button>
親自試一試
<input>
<input type="button" value="按鈕">
親自試一試
<a>
<a href="#" data-role="button">按鈕</a>
親自試一試
提示：jQuery Mobile 中的按鈕會自動獲得樣式，這增強(qiáng)了他們在移動設(shè)備上的交互性和可用性。我們推薦您使用 data-role="button" 的 <a> 元素來創(chuàng)建頁面之間的鏈接，而 <input> 或 <button> 元素用于表單提交。
導(dǎo)航按鈕
如需通過按鈕來鏈接頁面，請使用 data-role="button" 的 <a> 元素：
實(shí)例
<a href="#pagetwo" data-role="button">轉(zhuǎn)到頁面二</a>
親自試一試
行內(nèi)按鈕
默認(rèn)情況下，按鈕會占據(jù)屏幕的全部寬度。如果您需要按鈕適應(yīng)其內(nèi)容，或者如果您需要兩個或多個按鈕并排顯示，請?zhí)砑?data-inline="true"：
實(shí)例
<a href="#pagetwo" data-role="button" data-inline="true">轉(zhuǎn)到頁面二</a>
親自試一試
組合按鈕
jQuery Mobile 提供了對按鈕進(jìn)行組合的簡單方法。
請將 data-role="controlgroup" 屬性與 data-type="horizontal|vertical" 一同使用，以規(guī)定水平或垂直地組合按鈕：
實(shí)例
<div data-role="controlgroup" data-type="horizontal">
? <a href="#anylink" data-role="button">按鈕 1</a>
? <a href="#anylink" data-role="button">按鈕 2</a>
? <a href="#anylink" data-role="button">按鈕 3</a>
</div>
親自試一試
提示：默認(rèn)情況下，組合按鈕是垂直分組的，彼此間沒有外邊距和空白。并且只有第一個和最后一個按鈕擁有圓角，在組合后就創(chuàng)造出了漂亮的外觀。
后退按鈕
如需創(chuàng)建后退按鈕，請使用 data-rel="back" 屬性（會忽略錨的 href 值）：
實(shí)例
<a href="#" data-role="button" data-rel="back">返回</a>
親自試一試
更多用于按鈕的 data-* 屬性
屬性 ?? ?值 ?? ?描述 ?? ?實(shí)例
data-corners ?? ?true | false ?? ?規(guī)定按鈕是否有圓角。 ?? ?測試
data-mini ?? ?true | false ?? ?規(guī)定是否是小型按鈕。 ?? ?測試
data-shadow ?? ?true | false ?? ?規(guī)定按鈕是否有陰影。 ?? ?測試
如需有關(guān) jQuery Mobile data-* 屬性的完整信息，請?jiān)L問我們的 jQuery Mobile Data 屬性參考手冊。
下一節(jié)演示如何為按鈕添加圖標(biāo)。
jQuery Mobile 按鈕圖標(biāo)
??? jQuery Mobile 按鈕
??? jQuery Mobile 工具欄
jQuery Mobile 提供的一套圖標(biāo)可令您的按鈕更具吸引力。
為 jQuery Mobile 按鈕添加圖標(biāo)
如需向您的按鈕添加圖標(biāo)，請使用 data-icon 屬性：
<a href="#anylink" data-role="button" data-icon="search">搜索</a>
提示：您也可以在 <button> 或 <input> 元素中使用 data-icon 屬性。
下面我們列出了 jQuery Mobile 提供的一些可用圖標(biāo)：
屬性值 ?? ?描述 ?? ?圖標(biāo) ?? ?實(shí)例
data-icon="arrow-l" ?? ?左箭頭 ?? ??? ?測試
data-icon="arrow-r" ?? ?右箭頭 ?? ??? ?測試
data-icon="delete" ?? ?刪除 ?? ??? ?測試
data-icon="info" ?? ?信息 ?? ??? ?測試
data-icon="home" ?? ?首頁 ?? ??? ?測試
data-icon="back" ?? ?返回 ?? ??? ?測試
data-icon="search" ?? ?搜索 ?? ??? ?測試
data-icon="grid" ?? ?網(wǎng)格 ?? ??? ?測試
如需關(guān)于 jQuery Mobile 按鈕圖標(biāo)的完整信息，請?jiān)L問我們的 jQuery Mobile 圖標(biāo)參考手冊。
定位圖標(biāo)
您也能夠規(guī)定圖標(biāo)被放置的位置：上、右、下或左。
請使用 data-iconpos 屬性來規(guī)定位置：
圖標(biāo)位置：
<a href="#link" data-role="button" data-icon="search" data-iconpos="top">上</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="right">右</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="bottom">下</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="left">左</a>
親自試一試
提示：默認(rèn)地，所有按鈕中的圖標(biāo)靠左放置。
只顯示圖標(biāo)
如果只需顯示圖標(biāo)，請將 data-iconpos 設(shè)置為 "notext"：
Back:
<a href="#link" data-role="button" data-icon="search" data-iconpos="notext">搜索</a>
親自試一試
jQuery Mobile 工具欄
??? jQuery Mobile 圖標(biāo)
??? jQuery Mobile 導(dǎo)航欄
jQuery Mobile 工具欄
工具欄元素常被放置于頁眉和頁腳中 - 以實(shí)現(xiàn)“已訪問”的導(dǎo)航：
標(biāo)題欄
頁眉通常會包含頁眉標(biāo)題/LOGO 或一到兩個按鈕（通常是首頁、選項(xiàng)或搜索按鈕）。
您可以在頁眉中向左側(cè)或/以及右側(cè)添加按鈕。
下面的代碼，將向頁眉標(biāo)題文本的左側(cè)添加一個按鈕，并向右側(cè)添加一個按鈕：
實(shí)例
<div data-role="header">
? <a href="#" data-role="button">首頁</a>
? <h1>歡迎來到我的主頁</h1>
? <a href="#" data-role="button">搜索</a>
</div>
親自試一試
下面的代碼將向頁眉標(biāo)題的左側(cè)添加一個按鈕：
<div data-role="header">
? <a href="#" data-role="button">首頁</a>
? <h1>歡迎來到我的主頁</h1>
</div>
不過，如果您在 <h1> 元素之后放置按鈕鏈接，那么它不會顯示在文本右側(cè)。如需向頁眉標(biāo)題的右側(cè)添加按鈕，請規(guī)定類名 "ui-btn-right"：
實(shí)例
<div data-role="header">
? <h1>歡迎來到我的主頁</h1>
? <a href="#" data-role="button" class="ui-btn-right">搜索</a>
</div>
親自試一試
提示：頁眉可包含一個或兩個按鈕，然而頁腳沒有限制。
頁腳欄
與頁眉相比，頁腳更具伸縮性 - 它們更實(shí)用且多變，所以能夠包含所需數(shù)量的按鈕：
實(shí)例
<div data-role="footer">
? <a href="#" data-role="button">轉(zhuǎn)播到新浪微博</a>
? <a href="#" data-role="button">轉(zhuǎn)播到騰訊微博</a>
? <a href="#" data-role="button">轉(zhuǎn)播到 QQ 空間</a>
</div>
親自試一試
注釋：頁腳與頁眉的樣式不同（它會減去一些內(nèi)邊距和空白，并且按鈕不會居中）。如果要修正該問題，請?jiān)陧撃_設(shè)置類名 "ui-btn"：
實(shí)例
<div data-role="footer" class="ui-btn">
親自試一試
您也能夠選擇在頁腳中水平還是垂直地組合按鈕：
實(shí)例
<div data-role="footer" class="ui-btn">
? <div data-role="controlgroup" data-type="horizontal">
??? <a href="#" data-role="button" data-icon="plus">轉(zhuǎn)播到新浪微博</a>
??? <a href="#" data-role="button" data-icon="plus">轉(zhuǎn)播到騰訊微博</a>
??? <a href="#" data-role="button" data-icon="plus">轉(zhuǎn)播到 QQ 空間</a>
? </div>
</div>
親自試一試
定位頁眉和頁腳
放置頁眉和頁腳的方式有三種：
??? Inline - 默認(rèn)。頁眉和頁腳與頁面內(nèi)容位于行內(nèi)。
??? Fixed - 頁面和頁腳會留在頁面頂部和底部。
??? Fullscreen - 與 fixed 類似;頁面和頁腳會留在頁面頂部和底部，but also over the page content. It is also slightly see-through
請使用 data-position 屬性來定位頁眉和頁腳：
Inline 定位（默認(rèn)）
<div data-role="header" data-position="inline"></div>
<div data-role="footer" data-position="inline"></div>
親自試一試
Fixed 定位
<div data-role="header" data-position="fixed"></div>
<div data-role="footer" data-position="fixed"></div>
親自試一試
如果需要啟用全面定位，請使用 data-position="fixed"，并向該元素添加 data-fullscreen 屬性：
Fullscreen 定位
<div data-role="header" data-position="fixed" data-fullscreen="true"></div>
<div data-role="footer" data-position="fixed" data-fullscreen="true"></div>
親自試一試
提示：fullscreen 對于照片、圖像和視頻非常理想。
提示：對于 fixed 和 fullscreen 定位，觸摸屏幕將隱藏和顯示頁眉及頁腳。
jQuery Mobile 導(dǎo)航欄
??? jQuery Mobile 工具欄
??? jQuery Mobile 可折疊
jQuery Mobile 導(dǎo)航欄
導(dǎo)航欄由一組水平排列的鏈接構(gòu)成，通常位于頁眉或頁腳內(nèi)部。
默認(rèn)地，導(dǎo)航欄中的鏈接會自動轉(zhuǎn)換為按鈕（無需 data-role="button"）。
請使用 data-role="navbar" 屬性來定義導(dǎo)航欄：
實(shí)例
<div data-role="header">
? <div data-role="navbar">
??? <ul>
????? <li><a href="#anylink">首頁</a></li>
????? <li><a href="#anylink">頁面二</a></li>
????? <li><a href="#anylink">搜索</a></li>
??? </ul>
? </div>
</div>
親自試一試
提示：按鈕的寬度，默認(rèn)地，與其內(nèi)容一致。使用無序列表來均等地劃分按鈕：一個按鈕占據(jù) 100% 的寬度，兩個按鈕各分享 50% 的寬度，三個按鈕 33.3%，以此類推。不過，如果您在導(dǎo)航欄中規(guī)定了五個以上的按鈕，那么它會彎折為多行（參加頁面底部的“更多實(shí)例”）。
活動按鈕
當(dāng)導(dǎo)航欄中的鏈接被敲擊時，會獲得選取外觀（按下）。
如需在不敲擊鏈接時實(shí)現(xiàn)此外觀，請使用 class="ui-btn-active"：
實(shí)例
<li><a href="#anylink" class="ui-btn-active">首頁</a></li>
親自試一試
對于多個頁面，您也許需要為每個按鈕設(shè)置“被選”外觀，以表示用戶正在瀏覽該頁面。如果要這么做，請向鏈接添加 "ui-state-persist" 類，以及 "ui-btn-active" 類：
實(shí)例
<li><a href="#anylink" class="ui-btn-active ui-state-persist">首頁</a></li>
親自試一試
更多實(shí)例
內(nèi)容中的導(dǎo)航欄
??? 如何在 data-role="content" 中添加導(dǎo)航欄。
頁腳中的導(dǎo)航欄
??? 如何在頁腳中添加導(dǎo)航欄。
在導(dǎo)航欄中定位圖標(biāo)
??? 如何在頁腳內(nèi)部的導(dǎo)航欄中放置圖標(biāo)。
五個以上的按鈕
??? 演示在導(dǎo)航欄中的十個按鈕。
jQuery Mobile 可折疊
??? jQuery Mobile 導(dǎo)航欄
??? jQuery Mobile 網(wǎng)格
可折疊的內(nèi)容塊
可折疊（Collapsibles）允許您隱藏或顯示內(nèi)容 - 對于存儲部分信息很有用。
如需創(chuàng)建可折疊的內(nèi)容塊，請向某個容器分配 data-role="collapsible" 屬性。在容器（div）中，添加一個標(biāo)題元素（h1-h6），其后是您需要擴(kuò)展的任意 HTML 標(biāo)記：
實(shí)例
<div data-role="collapsible">
? <h1>點(diǎn)擊我 - 我可以折疊！</h1>
? <p>我是可折疊的內(nèi)容。</p>
</div>
親自試一試
默認(rèn)地，該內(nèi)容是關(guān)閉的。如需在頁面加載時擴(kuò)展內(nèi)容，請使用 data-collapsed="false"：
實(shí)例
<div data-role="collapsible" data-collapsed="false">
? <h1>點(diǎn)擊我 - 我可以折疊！</h1>
? <p>現(xiàn)在我默認(rèn)是展開的。</p>
</div>
親自試一試
嵌套的可折疊塊
可以嵌套可折疊內(nèi)容塊：
實(shí)例
<div data-role="collapsible">
? <h1>點(diǎn)擊我 - 我可以折疊！</h1>
? <p>我是被展開的內(nèi)容。</p>
? <div data-role="collapsible">
??? <h1>點(diǎn)擊我 - 我是嵌套的可折疊塊！</h1>
??? <p>我是嵌套的可折疊塊中被展開的內(nèi)容。</p>
? </div>
</div>
親自試一試
提示：可折疊內(nèi)容塊可以被嵌套您希望的任意次數(shù)。
可折疊集合
可折疊集合（Collapsible sets）指的是被組合在一起的可折疊塊（常被稱為手風(fēng)琴）。當(dāng)新塊被打開時，所有其他塊會關(guān)閉。
創(chuàng)建若干內(nèi)容塊，然后通過 data-role="collapsible-set" 用新容器包裝這個可折疊塊：
實(shí)例
<div data-role="collapsible-set">
? <div data-role="collapsible">
??? <h1>點(diǎn)擊我 - 我可以折疊！</h1>
??? <p>我是被展開的內(nèi)容。</p>
? </div>
? <div data-role="collapsible">
??? <h1>點(diǎn)擊我 - 我可以折疊！</h1>
??? <p>我是被展開的內(nèi)容。</p>
? </div>
</div>
親自試一試
更多實(shí)例
通過 data-inset 屬性來刪除圓角
??? 如何移除 collapsibles 上的圓角。
通過 data-mini 最小化 collapsibles
??? 如何使 collapsibles 更小巧。
通過 data-collapsed-icon 和 data-expanded-icon 改變圖標(biāo)
??? 如何改變 collapsibles 的圖標(biāo)（默認(rèn)是 + 和 -）。
jQuery Mobile 網(wǎng)格
??? jQuery Mobile 可折疊
??? jQuery Mobile 列表視圖
jQuery Mobile 布局網(wǎng)格
jQuery Mobile 提供了一套基于 CSS 的列布局方案。不過，一般不推薦在移動設(shè)備上使用列布局，這是由于移動設(shè)備的屏幕寬度所限。
但是有時您需要定位更小的元素，比如按鈕或?qū)Ш綑?#xff0c;就像在表格中那樣并排。這時，列布局就恰如其分。
網(wǎng)格中的列是等寬的（總寬是 100%），無邊框、背景、外邊距或內(nèi)邊距。
可使用的布局網(wǎng)格有四種：
網(wǎng)格類 ?? ?列 ?? ?列寬度 ?? ?對應(yīng) ?? ?實(shí)例
ui-grid-a ?? ?2 ?? ?50% / 50% ?? ?ui-block-a|b ?? ?測試
ui-grid-b ?? ?3 ?? ?33% / 33% / 33% ?? ?ui-block-a|b|c ?? ?測試
ui-grid-c ?? ?4 ?? ?25% / 25% / 25% / 25% ?? ?ui-block-a|b|c|d ?? ?測試
ui-grid-d ?? ?5 ?? ?20% / 20% / 20% / 20% / 20% ?? ?ui-block-a|b|c|d|e ?? ?測試
提示：在列容器中，根據(jù)不同的列數(shù)，子元素可設(shè)置類 ui-block-a|b|c|d|e。這些列將依次并排浮動。
實(shí)例 1: 對于 ui-grid-a 類（兩列布局），您必須規(guī)定兩個子元素 ui-block-a 和 ui-block-b。
實(shí)例 2: 對于 ui-grid-b 類（三列布局），請?zhí)砑尤齻€子元素 ui-block-a、ui-block-b 和 ui-block-c。
定制網(wǎng)格
您可以通過使用 CSS 來定制列塊：
實(shí)例
<style>
.ui-block-a,
.ui-block-b,
.ui-block-c
{
background-color: lightgray;
border: 1px solid black;
height: 100px;
font-weight: bold;
text-align: center;
padding: 30px;
}
</style>
親自試一試
您也可以通過使用行內(nèi)樣式來定制塊：
<div class="ui-block-a" style="border: 1px solid black;"><span>Text..</span></div>
多行
在列中包含多個行也是可能的。
注釋：ui-block-a-class 將始終創(chuàng)建新行：
實(shí)例
<div class="ui-grid-b">
? <div class="ui-block-a"><span>Some Text</span></div>
? <div class="ui-block-b"><span>Some Text</span></div>
? <div class="ui-block-c"><span>Some Text</span></div>
? <div class="ui-block-a"><span>Some Text</span></div>
? <div class="ui-block-b"><span>Some Text</span></div>
? <div class="ui-block-a"><span>Some Text</span></div>
</div>
親自試一試
jQuery Mobile 列表視圖
??? jQuery Mobile 網(wǎng)格
??? jQuery Mobile 列表內(nèi)容
jQuery Mobile 列表視圖
jQuery Mobile 中的列表視圖是標(biāo)準(zhǔn)的 HTML 列表：有序列表 (<ol>) 和無序列表 (<ul>)。
如需創(chuàng)建列表，請向 <ol> 或 <ul> 元素添加 data-role="listview"。如需使這些項(xiàng)目可點(diǎn)擊，請?jiān)诿總€列表項(xiàng)（<li>）中規(guī)定鏈接：
實(shí)例
<ol data-role="listview">
? <li><a href="#">列表項(xiàng)</a></li>
</ol>
<ul data-role="listview">
? <li><a href="#">列表項(xiàng)</a></li>
</ul>
親自試一試
如需為列表添加圓角和外邊距，請使用 data-inset="true" 屬性：
實(shí)例
<ul data-role="listview" data-inset="true">
親自試一試
提示：默認(rèn)地，列表中的列表項(xiàng)會自動轉(zhuǎn)換為按鈕（無需 data-role="button"）。
列表分隔符
列表分隔符（List Dividers）用于把項(xiàng)目組織和組合為分類/節(jié)。
如需規(guī)定列表分隔符，請向 <li> 元素添加 data-role="list-divider" 屬性：
實(shí)例
<ul data-role="listview">
?<li data-role="list-divider">歐洲</li>
? <li><a href="#">法國</a></li>
? <li><a href="#">德國</a></li>
</ul>
親自試一試
如果您的列表是字母順序的（比如通訊錄），jQuery Mobile 自動添加恰當(dāng)?shù)姆指舴?#xff0c;通過在 <ol> 或 <ul> 元素上設(shè)置 data-autodividers="true" 屬性：
實(shí)例
<ul data-role="listview" data-autodividers="true">
? <li><a href="#">Adam</a></li>
? <li><a href="#">Angela</a></li>
? <li><a href="#">Bill</a></li>
? <li><a href="#">Calvin</a></li>
? ...
</ul>
親自試一試
提示：data-autodividers="true" 屬性通過對列表項(xiàng)文本的首字母進(jìn)行大寫來創(chuàng)建分隔符。
搜索過濾器
如需在列表中添加搜索框，請使用 data-filter="true" 屬性：
實(shí)例
<ul data-role="listview" data-filter="true"></ul>
親自試一試
默認(rèn)地，搜索框中的文本是 "Filter items..."。
如需修改默認(rèn)文本，請使用 data-filter-placeholder 屬性：
實(shí)例
<ul data-role="listview" data-filter="true" data-filter-placeholder="搜索姓名">
親自試一試
更多實(shí)例
只讀列表
??? 如何創(chuàng)建沒有鏈接的列表（不是按鈕，不可點(diǎn)擊）。
jQuery Mobile 列表內(nèi)容
??? jQuery Mobile 列表視圖
??? jQuery Mobile 表單基礎(chǔ)
jQuery Mobile 列表縮略圖
對于大于 16x16px 的圖像，請?jiān)阪溄又刑砑?<img> 元素。
jQuery Mobile 將自動把圖像調(diào)整至 80x80px：
實(shí)例
<ul data-role="listview">
? <li><a href="#"><img src="chrome.png"></a></li>
</ul>
親自試一試
請使用標(biāo)準(zhǔn) HTML 來填充帶有信息的列表：
實(shí)例
<ul data-role="listview">
? <li>
??? <a href="#">
??? <img src="chrome.png">
??? <h2>Google Chrome</h2>
??? <p>Google Chrome 免費(fèi)的開源 web 瀏覽器。發(fā)布于 2008 年。</p>
??? </a>
? </li>
</ul>
親自試一試
jQuery Mobile 列表圖標(biāo)
如需向您的列表添加 16x16px 的圖標(biāo)，請向 <img> 元素添加 class="ui-li-icon" 屬性：
實(shí)例
<li><a href="#"><img src="us.png" alt="USA" class="ui-li-icon">USA</a></li>
親自試一試
拆分按鈕
如需創(chuàng)建帶有垂直分隔欄的拆分列表，請?jiān)?<li> 元素內(nèi)放置兩個鏈接。
jQuery Mobile 會自動為第二個鏈接添加藍(lán)色箭頭圖標(biāo)的樣式，鏈接中的文本（如有）將在用戶劃過該圖標(biāo)時顯示：
實(shí)例
<ul data-role="listview">
? <li>
??? <a href="#"><img src="chrome.png"></a>
??? <a href="#">Some Text</a>
? </li>
</ul>
親自試一試
通過添加頁面和對話框，可使鏈接的功能更強(qiáng)：
實(shí)例
<ul data-role="listview">
? <li>
??? <a href="#"><img src="chrome.png"></a>
??? <a href="#download" data-rel="dialog">下載瀏覽器</a>
? </li>
</ul>
親自試一試
計(jì)數(shù)泡沫
計(jì)數(shù)泡沫用于顯示與列表項(xiàng)相關(guān)的數(shù)目，例如郵箱中的消息：
如需添加計(jì)數(shù)泡沫，請使用行內(nèi)元素，比如 <span>，設(shè)置 class "ui-li-count" 屬性并添加數(shù)字：
實(shí)例
<ul data-role="listview">
? <li><a href="#">Inbox<span class="ui-li-count">335</span></a></li>
? <li><a href="#">Sent<span class="ui-li-count">123</span></a></li>
? <li><a href="#">Trash<span class="ui-li-count">7</span></a></li>
</ul>
親自試一試
注釋：如需在計(jì)數(shù)泡泡中顯示正確的數(shù)字，就必須進(jìn)行程序化更新。我們將在下一章種講解。
更多實(shí)例
更改列表項(xiàng)的默認(rèn)鏈接圖標(biāo)
??? 如何為列表項(xiàng)設(shè)置不同的鏈接圖標(biāo)（右箭頭是默認(rèn)的）。
可折疊列表
??? 如何創(chuàng)建隱藏和顯示內(nèi)容的列表。
更多內(nèi)容格式
??? 如何制作日歷。
jQuery Mobile 表單
??? jQuery Mobile 列表內(nèi)容
??? jQuery Mobile 表單輸入
jQuery Mobile 會自動為 HTML 表單添加優(yōu)異的便于觸控的外觀。
jQuery Mobile 表單結(jié)構(gòu)
jQuery Mobile 使用 CSS 來設(shè)置 HTML 表單元素的樣式，以使其更有吸引力更易用。
在 jQuery Mobile 中，您可以使用以下表單控件：
??? 文本框
??? 搜索框
??? 單選框
??? 復(fù)選框
??? 選擇菜單
??? 滑動條
??? 翻轉(zhuǎn)切換開關(guān)
當(dāng)您與 jQuery Mobile 表單打交道時，應(yīng)該了解以下信息：
??? <form> 元素必須設(shè)置 method 和 action 屬性
??? 每個表單元素必須設(shè)置唯一的 "id" 屬性。該 id 在站點(diǎn)的頁面中必須是唯一的。這是因?yàn)?jQuery Mobile 的單頁面導(dǎo)航模型允許許多不同的“頁面”同時呈現(xiàn)。
??? 每個表單元素必須有一個標(biāo)記（label）。請?jiān)O(shè)置 label 的 for 屬性來匹配元素的 id。
實(shí)例
<form method="post" action="demoform.asp">
? <label for="fname">First name:</label>
? <input type="text" name="fname" id="fname">
</form>
親自試一試
如需隱藏 label，請使用類 ui-hidden-accessible。這很常用，當(dāng)您需要元素的 placeholder 屬性充當(dāng) label 時：
實(shí)例
<form method="post" action="demoform.asp">
? <label for="fname" class="ui-hidden-accessible">姓名：</label>
? <input type="text" name="fname" id="fname" placeholder="姓名...">
</form>
親自試一試
域容器
如果需要 label 和表單元素在寬屏幕上顯示正常，請用帶有 data-role="fieldcontain" 屬性的 <div> 或 <fieldset> 元素來包裝 label 或表單元素：
實(shí)例
<form method="post" action="demoform.asp">
? <div data-role="fieldcontain">
??? <label for="fname">First name:</label>
??? <input type="text" name="fname" id="fname">
??? <label for="lname">Last name:</label>
??? <input type="text" name="lname" id="lname">
? </div>
</form>
親自試一試
提示：fieldcontain 屬性基于頁面寬度來設(shè)置 label 和表單控件的樣式。當(dāng)頁面寬度大于 480px 時，它會自動將 label 與表單控件放置于同一行。當(dāng)小于 480px 時，label 會被放置于表單元素之上。
提示：如需避免 jQuery Mobile 自動為可點(diǎn)擊元素設(shè)置樣式，請使用 data-role="none" 屬性：
實(shí)例
<label for="fname">First name:</label>
<input type="text" name="fname" id="fname" data-role="none">
親自試一試
在 jQuery Mobile 中提交表單
提示：jQuery Mobile 會自動通過 AJAX 進(jìn)行表單提交，并會嘗試將服務(wù)器響應(yīng)整合入應(yīng)用程序的 DOM 中。
jQuery Mobile 表單輸入元素
??? jQuery Mobile 表單基礎(chǔ)
??? jQuery Mobile 表單選擇
jQuery Mobile 文本輸入
輸入字段是通過標(biāo)準(zhǔn)的 HTML 元素編寫的，jQuery Mobile 會為它們設(shè)置專門針對移動設(shè)備的美觀易用的樣式。您還可以使用新的 HTML5 <input> 類型：
實(shí)例
<form method="post" action="demoform.asp">
? <div data-role="fieldcontain">
??? <label for="fullname">全名：</label>
??? <input type="text" name="fullname" id="fullname">
??? <label for="bday">生日：</label>
??? <input type="date" name="bday" id="bday">
??? <label for="email">電郵：</label>
??? <input type="email" name="email" id="email" placeholder="您的郵件地址..">
? </div>
</form>
親自試一試
提示：請使用 placeholder 來規(guī)定簡短的提示，以描述輸入字段的預(yù)期值：
<input placeholder="sometext">
文本框
請使用 <textarea> 來實(shí)現(xiàn)多行文本輸入。
注釋：文本框會自動擴(kuò)大，以適應(yīng)您輸入的文本行。
實(shí)例
<form method="post" action="demoform.asp">
? <div data-role="fieldcontain">
??? <label for="info">Additional Information:</label>
??? <textarea name="addinfo" id="info"></textarea>
? </div>
</form>
親自試一試
搜索框
輸入類型 type="search" 是 HTML5 中的新類型，用于定義供輸入搜索詞的文本字段：
實(shí)例
<form method="post" action="demoform.asp">
? <div data-role="fieldcontain">
??? <label for="search">Search:</label>
??? <input type="search" name="search" id="search">
? </div>
</form>
親自試一試
單選按鈕
當(dāng)用戶只選擇有限數(shù)量選項(xiàng)中的一個時，會用到單選按鈕。
如需創(chuàng)建一套單選按鈕，請?zhí)砑?type="radio" 的 input 元素以及相應(yīng)的 label。在 <fieldset> 元素中包裝單選按鈕。您也可以增加一個 <legend> 元素來定義 <fieldset> 的標(biāo)題。
提示：請用 data-role="controlgroup" 屬性來組合這些按鈕：
實(shí)例
<form method="post" action="demoform.asp">
? <fieldset data-role="controlgroup">
??? <legend>Choose your gender:</legend>
????? <label for="male">Male</label>
????? <input type="radio" name="gender" id="male" value="male">
????? <label for="female">Female</label>
????? <input type="radio" name="gender" id="female" value="female">
? </fieldset>
</form>
親自試一試
復(fù)選框
當(dāng)用戶選擇有限數(shù)量選項(xiàng)中的一個或多個選項(xiàng)時，會用到復(fù)選框：
實(shí)例
<form method="post" action="demoform.asp">
? <fieldset data-role="controlgroup">
??? <legend>Choose as many favorite colors as you'd like:</legend>
????? <label for="red">Red</label>
????? <input type="checkbox" name="favcolor" id="red" value="red">
????? <label for="green">Green</label>
????? <input type="checkbox" name="favcolor" id="green" value="green">
????? <label for="blue">Blue</label>
????? <input type="checkbox" name="favcolor" id="blue" value="blue">
? </fieldset>
</form>
親自試一試
更多實(shí)例
如需對單選框或復(fù)選框進(jìn)行水平分組，請使用 data-type="horizontal" 屬性：
實(shí)例
<fieldset data-role="controlgroup" data-type="horizontal">
親自試一試
您也可以使用域容器來包裝 <fieldset>：
實(shí)例
<div data-role="fieldcontain">
? <fieldset data-role="controlgroup">
??? <legend>Choose your gender:</legend>
? </fieldset>
</div>
親自試一試
如果您希望“預(yù)選”其中一個按鈕，請使用 HTML <input> 標(biāo)簽的 checked 屬性：
實(shí)例
<input type="radio" checked>
<input type="checkbox" checked>
親自試一試
jQuery Mobile 表單選擇菜單
??? jQuery Mobile 表單輸入
??? jQuery Mobile 表單滑塊
jQuery Mobile 選擇菜單
iPhone 上的選擇菜單：
Android 設(shè)備上的選擇菜單：
<select> 元素創(chuàng)建帶有若干選項(xiàng)的下拉菜單。
<select> 元素中的 <option> 元素定義列表中的可用選項(xiàng)：
實(shí)例
<form method="post" action="demoform.asp">
? <fieldset data-role="fieldcontain">
??? <label for="day">選擇日期</label>
??? <select name="day" id="day">
????? <option value="mon">星期一</option>
????? <option value="tue">星期二</option>
????? <option value="wed">星期三</option>
??? </select>
? </fieldset>
</form>
親自試一試
提示：如果列表中包含了一長列相關(guān)的選項(xiàng)，請?jiān)?<select> 中使用 <optgroup> 元素：
實(shí)例
<select name="day" id="day">
?? <optgroup label="Weekdays">
??? <option value="mon">Monday</option>
??? <option value="tue">Tuesday</option>
??? <option value="wed">Wednesday</option>
?? </optgroup>
?? <optgroup label="Weekends">
??? <option value="sat">Saturday</option>
??? <option value="sun">Sunday</option>
?? </optgroup>
</select>
親自試一試
自定義選擇菜單
本頁上方的圖片，展示了移動平臺顯示選擇菜單的獨(dú)特方式。
如果您希望在所有移動設(shè)備上顯示一致外觀的選擇菜單，請使用 jQuery 的自定義選擇菜單，data-native-menu="false" 屬性：
實(shí)例
<select name="day" id="day" data-native-menu="false">
親自試一試
Multiple Selections
如需在選擇菜單中選取多個選項(xiàng)，請?jiān)?<select> 元素中使用 multiple 屬性：
實(shí)例
<select name="day" id="day" multiple data-native-menu="false">
親自試一試
更多實(shí)例
使用 data-role="controlgroup"
??? 如何組合一個或多個選擇菜單。
使用 data-type="horizontal"
??? 如何水平地組合選擇菜單。
預(yù)選選項(xiàng)
??? 如何預(yù)選擇一個選項(xiàng)。
可折疊表單
??? 如何創(chuàng)建可折疊表單。
jQuery Mobile 表單 - 滑塊
??? jQuery Mobile 表單選擇
??? jQuery Mobile 主題
jQuery Mobile 滑塊控件
滑塊允許您從一定范圍內(nèi)的數(shù)字中選取值：
如需創(chuàng)建滑塊，請使用 <input type="range">：
實(shí)例
<form method="post" action="demoform.asp">
? <div data-role="fieldcontain">
??? <label for="points">Points:</label>
??? <input type="range" name="points" id="points" value="50" min="0" max="100">
? </div>
</form>
親自試一試
使用下列屬性來規(guī)定限定：
??? max - 規(guī)定允許的最大值
??? min - 規(guī)定允許的最小值
??? step - 規(guī)定合法的數(shù)字間隔
??? value - 規(guī)定默認(rèn)值
提示：如果您希望突出顯示截止滑塊值的這段軌道，請?zhí)砑?data-highlight="true"：
實(shí)例
<input type="range" data-hightlight="true">
親自試一試
切換開關(guān)
切換開關(guān)常用于開/關(guān)或?qū)?錯按鈕：
如需創(chuàng)建切換，請使用 data-role="slider" 的 <select> 元素，并添加兩個 <option> 元素：
實(shí)例
<form method="post" action="demoform.asp">
? <div data-role="fieldcontain">
??? <label for="switch">Toggle Switch:</label>
??? <select name="switch" id="switch" data-role="slider">
????? <option value="on">On</option>
????? <option value="off">Off</option>
??? </select>
? </div>
</form>
親自試一試
提示：請使用 "selected" 屬性來把選項(xiàng)之一設(shè)置為預(yù)選（突出顯示）：
實(shí)例
<option value="off" selected>Off</option>
親自試一試
jQuery Mobile 主題
??? jQuery Mobile 表單滑塊
??? jQuery Mobile 事件
jQuery Mobile 主題
jQuery Mobile 提供了五種不同的樣式主題，從 "a" 到 "e" - 每種主題帶有不同顏色的按鈕、欄、內(nèi)容塊，等等。jQuery Mobile 中的一種主題由多種可見的效果和顏色構(gòu)成。
如需定制應(yīng)用程序的外觀，請使用 data-theme 屬性，并為該屬性分配一個字母：
<div data-role="page" data-theme="a|b|c|d|e">
值 ?? ?描述 ?? ?例子
a ?? ?默認(rèn)。黑色背景上的白色文本。 ?? ?測試
b ?? ?藍(lán)色背景上的白色文本 / 灰色背景上的黑色文本 ?? ?測試
c ?? ?亮灰色背景上的黑色文本 ?? ?測試
d ?? ?白色背景上的黑色文本 ?? ?測試
e ?? ?橙色背景上的黑色文本 ?? ?測試
提示：混合您喜歡的主題！
默認(rèn)地，jQuery Mobile 為頁眉和頁腳使用 "a" 主題，為頁眉內(nèi)容使用 "c" 主題（亮灰）。不過，您能夠自如地對主題進(jìn)行混合。
主題化的頁面、內(nèi)容和頁腳
實(shí)例
<div data-role="header" data-theme="b"></div>
<div data-role="content" data-theme="a"></div>
<div data-role="footer" data-theme="e"></div>
親自試一試
主題化的對話框
實(shí)例
<a href="#pagetwo" data-rel="dialog">Go To The Themed Dialog Page</a>
<div data-role="page" id="pagetwo" data-overlay-theme="e">
? <div data-role="header" data-theme="b"></div>
? <div data-role="content" data-theme="a"></div>
? <div data-role="footer" data-theme="c"></div>
</div>
親自試一試
主題化的按鈕
實(shí)例
<a href="#" data-role="button" data-theme="a">Button</a>
<a href="#" data-role="button" data-theme="b">Button</a>
<a href="#" data-role="button" data-theme="c">Button</a>
親自試一試
主題化的圖標(biāo)
實(shí)例
<a href="#" data-role="button" data-icon="plus" data-theme="e">Plus</a>
親自試一試
頁眉和頁腳中的主題化按鈕
實(shí)例
<div data-role="header">
? <a href="#" data-role="button" data-icon="home" data-theme="b">Home</a>
? <h1>Welcome To My Homepage</h1>
? <a href="#" data-role="button" data-icon="search" data-theme="e">Search</a>
</div>
<div data-role="footer">
? <a href="#" data-role="button" data-theme="b" data-icon="plus">Button 1</a>
? <a href="#" data-role="button" data-theme="c" data-icon="plus">Button 2</a>
? <a href="#" data-role="button" data-theme="e" data-icon="plus">Button 3</a>
</div>
親自試一試
主題化的導(dǎo)航欄
實(shí)例
<div data-role="footer" data-theme="e">
? <h1>Insert Footer Text Here</h1>
? <div data-role="navbar">
??? <ul>
????? <li><a href="#" data-icon="home" data-theme="b">Button 1</a></li>
????? <li><a href="#" data-icon="arrow-r">Button 2</a></li>
????? <li><a href="#" data-icon="arrow-r">Button 3</a></li>
????? <li><a href="#" data-icon="search" data-theme="a" >Button 4</a></li>
??? </ul>
? </div>
</div>
親自試一試
主題化的可折疊按鈕和內(nèi)容
實(shí)例
<div data-role="collapsible" data-theme="b" data-content-theme="e">
? <h1>Click me - I'm collapsible!</h1>
? <p>I'm the expanded content.</p>
</div>
親自試一試
主題化列表
實(shí)例
<ul data-role="listview" data-theme="e">
? <li><a href="#">List Item</a></li>
? <li data-theme="a"><a href="#">List Item</a></li>
? <li data-theme="b"><a href="#">List Item</a></li>
? <li><a href="#">List Item</a></li>
</ul>
親自試一試
主題化劃分按鈕
實(shí)例
<ul data-role="listview" data-split-theme="e">
親自試一試
主題化的可折疊列表
實(shí)例
<div data-role="collapsible" data-theme="b" data-content-theme="e">
? <ul data-role="listview">
??? <li><a href="#">Agnes</a></li>
? </ul>
</div>
親自試一試
主題化表單
實(shí)例
<label for="name">Full Name:</label>
<input type="text" name="text" id="name" data-theme="a">
<label for="colors">Choose Favorite Color:</label>
<select id="colors" name="colors" data-theme="b">
? <option value="red">Red</option>
? <option value="green">Green</option>
? <option value="blue">Blue</option>
</select>
親自試一試
主題化的可折疊表單
實(shí)例
<fieldset data-role="collapsible" data-theme="b" data-content-theme="e">
<legend>Click me - I'm collapsible!</legend>
親自試一試
添加新主題
jQuery Mobile 同時允許您向移動頁面添加新主題。
請通過編輯 CSS 文件（如已下載 jQuery Mobile）來添加或編輯新主題。只需拷貝一段樣式，并用字母名（f-z）來對類進(jìn)行重命名，然后調(diào)整為您喜歡的顏色和字體即可。
您也可以通過在 HTML 文檔中使用主題類來添加新樣式 - 為工具條添加類 ui-bar-(a-z)，并為內(nèi)容添加類 ui-body-(a-z)：
實(shí)例
<style>
.ui-bar-f
{
color:green;
background-color:yellow;
}
.ui-body-f
{
font-weight:bold;
color:purple;
}
</style>
親自試一試
jQuery Mobile 事件
??? jQuery Mobile 主題
??? jQuery Mobile 觸控
事件 = 網(wǎng)頁能夠響應(yīng)的所有不同訪客的動作。
jQuery Mobile 事件
您能夠在 jQuery Mobile 中使用任何標(biāo)準(zhǔn)的 jQuery 事件。
此外，jQuery Mobile 還提供若干種為移動瀏覽定制的事件：
??? 觸摸事件 - 當(dāng)用戶觸摸屏幕時觸發(fā)（敲擊和滑動）
??? 滾動事件 - 當(dāng)上下滾動時觸發(fā)
??? 方向事件 - 當(dāng)設(shè)備垂直或水平旋轉(zhuǎn)時觸發(fā)
??? 頁面事件 - 當(dāng)頁面被顯示、隱藏、創(chuàng)建、加載以及/或卸載時觸發(fā)
如需關(guān)于所有 jQuery Mobile 事件的完整信息，請?jiān)L問我們的 jQuery Mobile 事件參考手冊。
初始化 jQuery Mobile 事件
在 jQuery 中，您已經(jīng)學(xué)到使用文檔 ready 事件來阻止 jQuery 代碼在文檔結(jié)束加載 (is ready) 前運(yùn)行：
jQuery document ready 事件
<script>
$(document).ready(function(){
?? // 此處是 jQuery 事件...
});
</script>
親自試一試
然而，在 jQuery Mobile 中，我們使用 pageinit 事件，該事件在頁面已初始化并完善樣式設(shè)置后發(fā)生。
第二個參數(shù)指向 ("#pageone") 指向頁面的 idpoints to the id of the page to specify the events for:
jQuery Mobile pageinit 事件
<script>
$(document).on("pageinit","#pageone",function(){
?? // 此處是 jQuery 事件...
});
</script>
親自試一試
注釋：jQuery on() 方法用于添加事件處理程序。
下幾章將詳解每個 jQuery Mobile 事件。
jQuery Mobile Touch 事件
??? jQuery Mobile 事件
??? jQuery Mobile 滾動
Touch 事件在用戶觸摸屏幕（頁面）時觸發(fā)。
提示：Touch 事件同樣適用于桌面電腦：點(diǎn)擊鼠標(biāo)！
jQuery Mobile Tap
tap 事件在用戶敲擊某個元素時觸發(fā)。
下面的例子當(dāng) <p> 元素上觸發(fā) tap 事件時，隱藏當(dāng)前 <p> 元素：
實(shí)例
$("p").on("tap",function(){
? $(this).hide();
});
親自試一試
jQuery Mobile Taphold
taphold 事件在用戶敲擊某個元素并保持一秒時被觸發(fā)：
實(shí)例
$("p").on("taphold",function(){
? $(this).hide();
});
親自試一試
jQuery Mobile Swipe
swipe 事件在用戶在某個元素上水平滑動超過 30px 時被觸發(fā)：
實(shí)例
$("p").on("swipe",function(){
? $("span").text("Swipe detected!");
});
親自試一試
jQuery Mobile Swipeleft
swipeleft 事件在用戶在某個元素上從左滑動超過 30px 時被觸發(fā)：
實(shí)例
$("p").on("swipeleft",function(){
? alert("You swiped left!");
});
親自試一試
jQuery Mobile Swiperight
swiperight 事件在用戶在某個元素上從右滑動超過 30px 時被觸發(fā)：
實(shí)例
$("p").on("swiperight",function(){
? alert("You swiped right!");
});
親自試一試
jQuery Mobile 滾動事件
??? jQuery Mobile 觸控
??? jQuery Mobile 方向
jQuery Mobile 提供兩種滾動事件：在滾動開始和當(dāng)滾動結(jié)束。
jQuery Mobile Scrollstart
scrollstart 事件在用戶開始滾動頁面時被觸發(fā)：
實(shí)例
$(document).on("scrollstart",function(){
? alert("開始滾動！");
});
親自試一試
注釋：iOS 設(shè)備會在滾動事件發(fā)生時凍結(jié) DOM 操作，這意味著當(dāng)用戶滾動時無法改變?nèi)魏问挛铩２贿^ jQuery 團(tuán)隊(duì)正致力于解決該問題。
jQuery Mobile Scrollstop
scrollstop 事件在用戶停止?jié)L動頁面時被觸發(fā)：
實(shí)例
$(document).on("scrollstop",function(){
? alert("結(jié)束滾動！");
});
親自試一試
jQuery Mobile 方向事件
??? jQuery Mobile 滾動
??? jQuery Mobile 頁面事件
jQuery Mobile orientationchange 事件
orientationchange 事件在用戶垂直或水平旋轉(zhuǎn)移動設(shè)備時被觸發(fā)。
Mobile
Mobile
如需使用 orientationchange 事件，請把它添加到 window 對象：
$(window).on("orientationchange",function(){
? alert("方向已改變！");
});
callback 函數(shù)可以設(shè)置一個參數(shù)，即 event 對象，它會返回移動設(shè)備的方向："portrait" （設(shè)備被握持的方向是垂直的）或 "landscape" （設(shè)備被握持的方向是水平的）：
實(shí)例
$(window).on("orientationchange",function(event){
? alert("方向是：" + event.orientation);
});
親自試一試
由于 orientationchange 事件與 window 對象綁定，我們能夠使用 window.orientation 屬性來，例如，設(shè)置不同樣式以區(qū)分 portrait 和 landscape 視圖：
實(shí)例
$(window).on("orientationchange",function(){
? if(window.orientation == 0) // Portrait
? {
??? $("p").css({"background-color":"yellow","font-size":"300%"});
? }
? else // Landscape
? {
??? $("p").css({"background-color":"pink","font-size":"200%"});
? }
});
親自試一試
提示：window.orientation 屬性對 portrait 視圖返回 0，對 landscape 視圖返回 90 或 -90。
jQuery Mobile 頁面事件
??? jQuery Mobile 方向
??? jQuery Mobile 實(shí)例
jQuery Mobile 頁面事件
在 jQuery Mobile 中與頁面打交道的事件被分為四類：
??? Page Initialization - 在頁面創(chuàng)建前，當(dāng)頁面創(chuàng)建時，以及在頁面初始化之后
??? Page Load/Unload - 當(dāng)外部頁面加載時、卸載時或遭遇失敗時
??? Page Transition - 在頁面過渡之前和之后
??? Page Change - 當(dāng)頁面被更改，或遭遇失敗時
如需關(guān)于所有 jQuery Mobile 事件的完整信息，請?jiān)L問我們的 jQuery Mobile 事件參考手冊。
jQuery Mobile Initialization 事件
當(dāng) jQuery Mobile 中的一張典型頁面進(jìn)行初始化時，它會經(jīng)歷三個階段：
??? 在頁面創(chuàng)建前
??? 頁面創(chuàng)建
??? 頁面初始化
每個階段觸發(fā)的事件都可用于插入或操作代碼。
事件 ?? ?描述
pagebeforecreate ?? ?當(dāng)頁面即將初始化，并且在 jQuery Mobile 已開始增強(qiáng)頁面之前，觸發(fā)該事件。
pagecreate ?? ?當(dāng)頁面已創(chuàng)建，但增強(qiáng)完成之前，觸發(fā)該事件。
pageinit ?? ?當(dāng)頁面已初始化，并且在 jQuery Mobile 已完成頁面增強(qiáng)之后，觸發(fā)該事件。
下面的例子演示在 jQuery Mobile 中創(chuàng)建頁面時，何時觸發(fā)每種事件：
實(shí)例
$(document).on("pagebeforecreate",function(event){
? alert("觸發(fā) pagebeforecreate 事件！");
});
$(document).on("pagecreate",function(event){
? alert("觸發(fā) pagecreate 事件！");
});
$(document).on("pageinit",function(event){
? alert("觸發(fā) pageinit 事件！")
});
親自試一試
jQuery Mobile Load 事件
頁面加載事件屬于外部頁面。
無論外部頁面何時載入 DOM，將觸發(fā)兩個事件。第一個是 pagebeforeload，第二個是 pageload （成功）或 pageloadfailed（失敗）。
下表中解釋了這些事件：
事件 ?? ?描述
pagebeforeload ?? ?在任何頁面加載請求作出之前觸發(fā)。
pageload ?? ?在頁面已成功加載并插入 DOM 后觸發(fā)。
pageloadfailed ?? ?如果頁面加載請求失敗，則觸發(fā)該事件。默認(rèn)地，將顯示 "Error Loading Page" 消息。
下列演示 pageload 和 pagloadfailed 事件的工作原理：
實(shí)例
$(document).on("pageload",function(event,data){
? alert("觸發(fā) pageload 事件！\nURL: " + data.url);
});
$(document).on("pageloadfailed",function(event,data){
? alert("抱歉，被請求頁面不存在。");
});
親自試一試
jQuery Mobile 過渡事件
我們還可以在從一頁過渡到下一頁時使用事件。
頁面過渡涉及兩個頁面：一張“來”的頁面和一張“去”的頁面 - 這些過渡使當(dāng)前活動頁面（“來的”頁面）到新頁面（“去的”頁面的改變過程變得更加動感。
事件 ?? ?描述
pagebeforeshow ?? ?在“去的”頁面觸發(fā)，在過渡動畫開始前。
pageshow ?? ?在“去的”頁面觸發(fā)，在過渡動畫完成后。
pagebeforehide ?? ?在“來的”頁面觸發(fā)，在過渡動畫開始前。
pagehide ?? ?在“來的”頁面觸發(fā)，在過渡動畫完成后。
下列演示了過渡時間的工作原理：
實(shí)例
$(document).on("pagebeforeshow","#pagetwo",function(){ // 當(dāng)進(jìn)入頁面二時
? alert("頁面二即將顯示");
});
$(document).on("pageshow","#pagetwo",function(){ // 當(dāng)進(jìn)入頁面二時
? alert("現(xiàn)在顯示頁面二");
});
$(document).on("pagebeforehide","#pagetwo",function(){ // 當(dāng)離開頁面二時
? alert("頁面二即將隱藏");
});
$(document).on("pagehide","#pagetwo",function(){ // 當(dāng)離開頁面二時
? alert("現(xiàn)在隱藏頁面二");
});
親自試一試
jQuery Mobile 實(shí)例
??? jQuery Mobile 頁面事件
??? jQuery Mobile Data
jQuery Mobile 頁面
基礎(chǔ)的移動網(wǎng)頁
多頁面
對話框
例子解釋
jQuery Mobile 過渡
淡入淡出效果
翻頁效果
流效果
彈窗效果
滑動效果
滑動淡出效果
上滑動效果
下滑動效果
翻頁效果
無過渡效果
逆轉(zhuǎn)效果
例子解釋
jQuery Mobile 按鈕
創(chuàng)建按鈕
行內(nèi)按鈕
分組按鈕
后退按鈕
帶有和不帶有圓角的按鈕
小型和常規(guī)尺寸的按鈕
帶有和不帶有陰影的按鈕
例子解釋
jQuery Mobile 按鈕圖標(biāo)
向按鈕添加圖標(biāo)
定位圖標(biāo)
只顯示圖標(biāo)
例子解釋
jQuery Mobile 工具欄
創(chuàng)建頁眉和頁腳
在頁眉中添加按鈕
在頁眉中向左側(cè)添加按鈕
在頁眉中向右側(cè)添加按鈕
帶有按鈕的頁腳
帶有居中對齊按鈕的頁腳
帶有分組按鈕的頁腳
帶有水平分組按鈕的頁腳
行內(nèi)定位 - 頁眉和頁腳與頁面內(nèi)容行內(nèi)定位
固定定位 - 頁眉和頁腳將保留在頁面的頂部和底部
全屏定位 - 頁面和頁腳分班位于頂部和底部，但仍然在頁面內(nèi)容上
例子解釋
jQuery Mobile 導(dǎo)航欄
創(chuàng)建導(dǎo)航欄
在內(nèi)容中的導(dǎo)航欄
在頁腳中導(dǎo)航欄
在導(dǎo)航欄中為按鈕添加被選外觀（被按下）
添加被選外觀（被按下）
在導(dǎo)航欄中定位圖標(biāo)
演示在導(dǎo)航欄中的十個按鈕
例子解釋
jQuery Mobile 可折疊
創(chuàng)建內(nèi)容可折疊塊
當(dāng)頁面加載時展開內(nèi)容
嵌套的可折疊塊
可折疊集合（手風(fēng)琴）
刪除可折疊塊上的圓角
使可折疊塊更小
改變可折疊塊的圖標(biāo)
可折疊列表
可折疊表單
例子解釋
jQuery Mobile 網(wǎng)格
兩列布局
三列布局
四列布局
五列布局
自定義網(wǎng)格
列中的多行
例子解釋
jQuery Mobile 列表
創(chuàng)建列表視圖
帶有圓角的列表視圖
列表分隔符
自動分隔符
創(chuàng)建搜索過濾器
改變搜索框中的文本
創(chuàng)建只讀列表
向列表項(xiàng)添加縮略圖
使用標(biāo)準(zhǔn) HTML 來填充帶有信息的列表
向列表項(xiàng)添加圖標(biāo)
創(chuàng)建帶有分隔按鈕的列表
增強(qiáng)列表項(xiàng)的功能性
創(chuàng)建計(jì)數(shù)泡泡
改變列表項(xiàng)的默認(rèn)鏈接圖標(biāo)
可折疊列表
創(chuàng)建日歷
例子解釋
jQuery Mobile 表單
文本輸入
文本框
搜索輸入
單選按鈕
復(fù)選框
對單選按鈕和復(fù)選框進(jìn)行水平組合
帶有單選按鈕和復(fù)選框的域包含器
預(yù)選的單選按鈕和復(fù)選框
創(chuàng)建選擇菜單
創(chuàng)建帶有分隔符的選擇菜單 (optgroup)
自定義選擇菜單
在選擇菜單中選取多個選項(xiàng)
組合選擇菜單
水平組合選擇菜單
預(yù)選一個選項(xiàng)
可折疊表單
創(chuàng)建滑塊控件
突出顯示截至滑塊值的軌道
范圍滑塊（雙重的）
創(chuàng)建切換開關(guān)
預(yù)選一個切換開關(guān)
例子解釋
jQuery Mobile 主題
主題 "a"
主題 "b"
主題 "c"
主題 "d"
主題 "e"
主題化的頁眉、內(nèi)容和頁腳
主題化的對話框
主題化的按鈕
主題化的圖標(biāo)
頁眉和頁腳中的主題化按鈕
主題化的導(dǎo)航欄
主題化的可折疊按鈕和內(nèi)容
主題化的列表
主題化的劃分按鈕
主題化的可折疊列表
主題化的表單
主題化的可折疊表單
定制主題
例子解釋
jQuery Mobile 事件
Tap 事件
Taphold 事件
Swipe 事件
Swipeleft 事件
Swiperight 事件
Scrollstart 事件
Scrollstop 事件
Orientationchange 事件 - 提示方向
Orientationchange 事件 - 為水平和垂直方向設(shè)置不同的樣式
Page initialization 事件
Page load 事件
Page transition 事件
例子解釋
jQuery Mobile Data 屬性
??? jQuery Mobile 實(shí)例
??? jQuery Mobile 事件
jQuery Data 屬性
jQuery Mobile 使用 HTML5 data-* 屬性為移動設(shè)備創(chuàng)建“對觸摸友好的”美觀的外觀。
在下面的參考列表中，粗體值規(guī)定默認(rèn)值。
Button
帶有 data-role="button" 的超鏈接。工具欄中的按鈕元素和鏈接以及輸入字段會被自動設(shè)置按鈕的樣式，無需 data-role="button"。
Data 屬性 ?? ?值 ?? ?描述
data-corners ?? ?true | false ?? ?規(guī)定按鈕是否有圓角。
data-icon ?? ?Icons Reference ?? ?規(guī)定按鈕的圖標(biāo)。默認(rèn)是沒有圖標(biāo)。
data-iconpos ?? ?left | right | top | bottom | notext ?? ?規(guī)定圖標(biāo)的位置。
data-iconshadow ?? ?true | false ?? ?規(guī)定按鈕圖標(biāo)是否有陰影。
data-inline ?? ?true | false ?? ?規(guī)定按鈕是否是行內(nèi)的。
data-mini ?? ?true | false ?? ?規(guī)定按鈕是小型的還是常規(guī)尺寸的。
data-shadow ?? ?true | false ?? ?規(guī)定按鈕是否有陰影。
data-theme ?? ?letter (a-z) ?? ?規(guī)定按鈕的主題顏色。
提示：如需組合多個按鈕，請使用帶有 data-role="controlgroup" 以及 data-type="horizontal|vertical" 屬性的容器，來規(guī)定水平還是垂直組合按鈕。
Checkbox
label 和 type="checkbox" 的 input 是成對的。會被自動設(shè)置為按鈕的樣式，無需 data-role。
Data 屬性 ?? ?值 ?? ?描述
data-mini ?? ?true | false ?? ?規(guī)定復(fù)選框是小型的還是常規(guī)尺寸的。
data-role ?? ?none ?? ?防止 jQuery Mobile 將復(fù)選框設(shè)置為按鈕的樣式。
data-theme ?? ?letter (a-z) ?? ?規(guī)定復(fù)選框的主題顏色。
提示：如需組合多個復(fù)選框，請使用 data-role="controlgroup" 以及 data-type="horizontal|vertical"，來規(guī)定水平還是垂直組合復(fù)選框。
Collapsible
標(biāo)題元素，其后是位于帶有 data-role="collapsible" 屬性的容器中的任意 HTML 標(biāo)記。
Data 屬性 ?? ?值 ?? ?描述
data-collapsed ?? ?true | false ?? ?規(guī)定內(nèi)容是否應(yīng)該關(guān)閉或展開。
data-collapsed-icon ?? ?Icons Reference ?? ?規(guī)定可折疊按鈕的圖標(biāo)。默認(rèn)是 "plus"。
data-content-theme ?? ?letter (a-z) ?? ?規(guī)定可折疊內(nèi)容的主題顏色。同時會向可折疊內(nèi)容添加圓角。
data-expanded-icon ?? ?Icons Reference ?? ?規(guī)定內(nèi)容被展開時的可折疊按鈕的圖標(biāo)。默認(rèn)是“減號”。
data-iconpos ?? ?left | right | top | bottom ?? ?規(guī)定圖標(biāo)的位置。
data-inset ?? ?true | false ?? ?規(guī)定可折疊按鈕是否擁有圓角和外邊距的樣式。
data-mini ?? ?true | false ?? ?規(guī)定可折疊按鈕是小型的還是常規(guī)尺寸的。
data-theme ?? ?letter (a-z) ?? ?規(guī)定可折疊按鈕的主題顏色。
Collapsible Set
帶有 data-role="collapsible-set" 屬性的容器中的可折疊內(nèi)容塊。
Data 屬性 ?? ?值 ?? ?描述
data-collapsed-icon ?? ?Icons Reference ?? ?規(guī)定可折疊按鈕的圖標(biāo)。默認(rèn)是“加號”。
data-content-theme ?? ?letter (a-z) ?? ?規(guī)定可折疊內(nèi)容的主題顏色。
data-expanded-icon ?? ?Icons Reference ?? ?規(guī)定內(nèi)容被展開時的可折疊按鈕的圖標(biāo)。默認(rèn)是“減號”。
data-iconpos ?? ?left | right | top | bottom | notext ?? ?規(guī)定圖標(biāo)的位置。
data-inset ?? ?true | false ?? ?規(guī)定 collapsibles 是否擁有圓角和外邊距的樣式。
data-mini ?? ?true | false ?? ?規(guī)定可折疊按鈕是小型的還是常規(guī)尺寸的。
data-theme ?? ?letter (a-z) ?? ?規(guī)定可折疊集合的主題顏色。
Content
帶有 data-role="content" 屬性的容器。
Data 屬性 ?? ?值 ?? ?描述
data-theme ?? ?letter (a-z) ?? ?規(guī)定內(nèi)容的主題顏色。默認(rèn)是 "c"。
Controlgroup
帶有 data-role="controlgroup" 屬性的 <div> or <fieldset> 容器。組合多個按鈕樣式的單一類型 input（基于鏈接的按鈕、單選按鈕、復(fù)選框、選擇菜單）。
Data 屬性 ?? ?值 ?? ?描述
data-mini ?? ?true | false ?? ?規(guī)定組合是小型的還是常規(guī)尺寸的。
data-type ?? ?horizontal | vertical ?? ?規(guī)定組合水平還是垂直顯示。
Dialog
data-role="dialog" 的容器或者 data-rel="dialog" 的鏈接。
Data 屬性 ?? ?值 ?? ?描述
data-close-btn-text ?? ?sometext ?? ?規(guī)定僅用于對話框的關(guān)閉按鈕的文本。
data-dom-cache ?? ?true | false ?? ?規(guī)定是否為個別頁面清除 jQuery DOM 緩存（如果設(shè)置 true，則需要注意對 DOM 的管理，并全面測試所有移動設(shè)備）。
data-overlay-theme ?? ?letter (a-z) ?? ?規(guī)定對話頁面的疊加（背景）色。
data-theme ?? ?letter (a-z) ?? ?規(guī)定對話頁的主題顏色。
data-title ?? ?sometext ?? ?規(guī)定對話頁的標(biāo)題。
Enhancement
帶有 data-enhance="false" 或 data-ajax="false" 屬性的容器。
Data 屬性 ?? ?值 ?? ?描述
data-enhance ?? ?true | false ?? ?如果設(shè)置為 "true"，, (default) jQuery Mobile 會自動為頁面添加樣式，使其更適合移動設(shè)備。如果設(shè)置為 "false"，則框架不會設(shè)置頁面的樣式。
data-ajax ?? ?true | false ?? ?規(guī)定是否通過 AJAX 來加載頁面。
注釋：data-enhance="false" 比如結(jié)合 $.mobile.ignoreContentEnabled=true" 使用，以阻止 jQuery Mobile 自動添加頁面樣式。
當(dāng) $.mobile.ignoreContentEnabled 設(shè)置為 true 時，data-ajax="false" 的容器中的任何鏈接或表單元素，將被框架的導(dǎo)航功能忽略。
Fieldcontainer
包裝 label/form 元素對的 data-role="fieldcontain" 的容器。
Fixed Toolbar
帶有 data-role="header" 或 data-role="footer" 屬性以及 data-position="fixed" 屬性的容器。
Data 屬性 ?? ?值 ?? ?描述
data-disable-page-zoom ?? ?true | false ?? ?規(guī)定用戶是否有能力縮放頁面。
data-fullscreen ?? ?true | false ?? ?規(guī)定工具欄始終位于頂部以及/或者底部。
data-tap-toggle ?? ?true | false ?? ?規(guī)定用戶是否有能力通過點(diǎn)擊/敲擊來切換工具欄的可見性。
data-transition ?? ?slide | fade | none ?? ?規(guī)定當(dāng)敲擊/點(diǎn)擊發(fā)生時的過渡效果。
data-update-page-padding ?? ?true | false ?? ?規(guī)定當(dāng)發(fā)生 resize、transition 以及 "updatelayout" 事件時更新頁面上下內(nèi)邊距（jQuery Mobile 總是在 "pageshow" 事件發(fā)生時更新內(nèi)邊距）
data-visible-on-page-show ?? ?true | false ?? ?規(guī)定在顯示父頁面時的工具欄可見性。
Flip Toggle Switch
帶有 data-role="slider" 屬性的一個 <select> 元素以及兩個 <option> 元素。
Data 屬性 ?? ?值 ?? ?描述
data-mini ?? ?true | false ?? ?規(guī)定開關(guān)是小型的還是常規(guī)尺寸的。
data-role ?? ?none ?? ?防止 jQuery Mobile 將切換開關(guān)設(shè)置為按鈕樣式。
data-theme ?? ?letter (a-z) ?? ?規(guī)定切換開關(guān)的主題顏色。
data-track-theme ?? ?letter (a-z) ?? ?規(guī)定軌道的主題顏色。
Footer
帶有 data-role="footer" 屬性的容器。
Data 屬性 ?? ?值 ?? ?描述
data-id ?? ?sometext ?? ?規(guī)定唯一 ID。對于 persistent footers 是必需的。
data-position ?? ?inline | fixed ?? ?規(guī)定頁腳與頁面內(nèi)容是行內(nèi)關(guān)系，還是保留在底部。
data-fullscreen ?? ?true | false ?? ?規(guī)定頁面是否始終位于底部并覆蓋頁面內(nèi)容 (slightly see-through)。
data-theme ?? ?letter (a-z) ?? ?規(guī)定頁腳的主題顏色。默認(rèn)是 "a"。
注釋：如需啟用 fullscreen 定位，請使用 data-position="fixed"，然后為該元素添加 data-fullscreen 屬性。
Header
data-role="header" 的容器。
Data 屬性 ?? ?值 ?? ?描述
data-id ?? ?sometext ?? ?規(guī)定唯一 ID。對于 persistent headers 是必需的。
data-position ?? ?inline | fixed ?? ?規(guī)定頁眉與頁面內(nèi)容是行內(nèi)關(guān)系，還是保留在頂部。
data-fullscreen ?? ?true | false ?? ?規(guī)定頁面是否始終位于頂部并覆蓋頁面內(nèi)容 (slightly see-through)。
data-theme ?? ?letter (a-z) ?? ?規(guī)定頁眉的主題顏色。默認(rèn)是 "a"。
注釋：如需啟用 fullscreen 定位，請使用 data-position="fixed"，然后為該元素添加 data-fullscreen 屬性。
Link
所有鏈接，包括 data-role="button" 的鏈接以及表單提交按鈕。
Data 屬性 ?? ?值 ?? ?描述
data-ajax ?? ?true | false ?? ?規(guī)定是否通過 AJAX 來加載頁面，以改進(jìn)用戶體驗(yàn)和過渡。如果設(shè)置為 false，則 jQuery Mobile 將進(jìn)行普通的頁面請求。
data-direction ?? ?reverse ?? ?反轉(zhuǎn)過渡動畫（僅用于頁面或?qū)υ?#xff09;
data-dom-cache ?? ?true | false ?? ?規(guī)定是否清除個別頁面的 jQuery DOM 緩存（如果設(shè)置為 true，則您需要注意對 DOM 的管理，并全面測試所有移動設(shè)備）。
data-prefetch ?? ?true | false ?? ?規(guī)定是否把頁面預(yù)取到 DOM 中，以使其在用戶訪問時可用。
data-rel ?? ?back | dialog | external | popup ?? ?規(guī)定有關(guān)鏈接如何行為的選項(xiàng)。 Back - 在歷史記錄中向后移動一步。 Dialog - 將頁面作為對話來打開，不在歷史中記錄。 External - 鏈接到另一域。 opens - 打開彈出窗口。
data-transition ?? ?fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none ?? ?規(guī)定如何從一頁過渡到下一頁。參加 jQuery Mobile 過渡。
data-position-to ?? ?origin | jQuery selector | window ?? ?規(guī)定彈出框的位置。 Origin - 默認(rèn)。在打開它的鏈接上彈出。 jQuery selector - 在指定元素上彈出。 Window - 在窗口屏幕中間彈出。
List
帶有 data-role="listview" 屬性的 <ol> 或 <ul>。
Data 屬性 ?? ?值 ?? ?描述
data-autodividers ?? ?true | false ?? ?規(guī)定是否自動分隔列表項(xiàng)。
data-count-theme ?? ?letter (a-z) ?? ?規(guī)定計(jì)數(shù)泡沫的主題顏色。默認(rèn)是 "c"。
data-divider-theme ?? ?letter (a-z) ?? ?規(guī)定列表分隔符的主題顏色。默認(rèn)是 "b"。
data-filter ?? ?true | false ?? ?規(guī)定是否在列表中添加搜索框。
data-filter-placeholder ?? ?sometext ?? ?規(guī)定搜索框中的文本。默認(rèn)是 "Filter items..."。
data-filter-theme ?? ?letter (a-z) ?? ?規(guī)定搜索過濾程序的主題顏色。默認(rèn)是 "c"。
data-icon ?? ?Icons Reference ?? ?規(guī)定列表的圖標(biāo)。
data-inset ?? ?true | false ?? ?規(guī)定是否為列表添加圓角和外邊距樣式。
data-split-icon ?? ?Icons Reference ?? ?規(guī)定劃分按鈕的圖標(biāo)。默認(rèn)是 "arrow-r"。
data-split-theme ?? ?letter (a-z) ?? ?規(guī)定劃分按鈕的主題顏色。默認(rèn)是 "b"。
data-theme ?? ?letter (a-z) ?? ?規(guī)定列表的主題顏色。
List item
帶有 data-role="listview" 屬性的 <ol> 或 <ul> 中的 <li>。
Data 屬性 ?? ?值 ?? ?描述
data-filtertext ?? ?sometext ?? ?規(guī)定在過濾元素時搜索的文本。該文本而不是實(shí)際的列表項(xiàng)文本將會被搜索。
data-icon ?? ?Icons Reference ?? ?規(guī)定列表項(xiàng)的圖標(biāo)。
data-role ?? ?list-divider ?? ?規(guī)定列表項(xiàng)的分隔符。
data-theme ?? ?letter (a-z) ?? ?規(guī)定列表項(xiàng)的主題顏色。
注釋：data-icon 屬性僅適用于含有鏈接的列表項(xiàng)。
Navbar
帶有 data-role="navbar" 屬性的容器內(nèi)部的 <li> 元素。
Data 屬性 ?? ?值 ?? ?描述
data-icon ?? ?Icons Reference ?? ?規(guī)定列表項(xiàng)的圖標(biāo)。
data-iconpos ?? ?left | right | top | bottom | notext ?? ?規(guī)定圖標(biāo)的位置。
提示：導(dǎo)航欄從其父容器繼承 theme-swatch。向?qū)Ш綑谠O(shè)置 data-theme 屬性是不可行的。可以單獨(dú)向 navbar 中的每個鏈接設(shè)置 data-theme 屬性。
Page
帶有 data-role="page" 屬性的容器。
Data 屬性 ?? ?值 ?? ?描述
data-add-back-btn ?? ?true | false ?? ?自動添加后退按鈕，僅用于頁眉。
data-back-btn-text ?? ?sometext ?? ?規(guī)定后退按鈕的文本。
data-back-btn-theme ?? ?letter (a-z) ?? ?規(guī)定后退按鈕的主題顏色。
data-close-btn-text ?? ?letter (a-z) ?? ?規(guī)定對話上的關(guān)閉按鈕的文本。
data-dom-cache ?? ?true | false ?? ?規(guī)定是否清除個別頁面的 jQuery DOM 緩存（如果設(shè)置為 true，則您需要注意對 DOM 的管理，并全面測試所有移動設(shè)備）。
data-overlay-theme ?? ?letter (a-z) ?? ?規(guī)定對話頁面的疊加（背景）色。
data-theme ?? ?letter (a-z) ?? ?規(guī)定頁面的主題顏色。默認(rèn)是 "c"。
data-title ?? ?sometext ?? ?規(guī)定頁面的標(biāo)題。
data-url ?? ?url ?? ?該值用于更新 URL，而不是用于請求頁面。
Popup
帶有 data-role="popup" 屬性的容器。
Data 屬性 ?? ?值 ?? ?描述
data-corners ?? ?true | false ?? ?規(guī)定彈出框是否有圓角。
data-overlay-theme ?? ?letter (a-z) ?? ?規(guī)定彈出框的疊加（背景）色。默認(rèn)是透明背景（none）。
data-shadow ?? ?true | false ?? ?規(guī)定彈出框是否有陰影。
data-theme ?? ?letter (a-z) ?? ?規(guī)定彈出框的主題顏色。默認(rèn)是繼承，"none" 設(shè)置為透明。
data-tolerance ?? ?30, 15, 30, 15 ?? ?規(guī)定距離窗口邊緣 (top, right, bottom, left) 的距離。
帶有 data-rel="popup" 屬性的錨：
Data 屬性 ?? ?值 ?? ?描述
data-position-to ?? ?origin | jQuery selector | window ?? ?規(guī)定彈出框的位置。 Origin - 默認(rèn)。彈出框位于打開它的鏈接上。 jQuery selector - 彈出框位于指定元素上。 Window - 彈出框位于窗口屏幕中央。
data-rel ?? ?popup ?? ?用于打開的彈出框。
data-transition ?? ?fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none ?? ?規(guī)定如何從一頁過渡到下一頁。參加 jQuery Mobile 過渡。
Radio Button
label 與 type="radio" 的 input 對。會被自動設(shè)置為按鈕樣式，無需 data-role。
Data 屬性 ?? ?值 ?? ?描述
data-mini ?? ?true | false ?? ?規(guī)定按鈕是否小型的或者是常規(guī)尺寸的。
data-role ?? ?none ?? ?放置 jQuery Mobile 將單選按鈕設(shè)置為 enhanced buttons 的樣式。
data-theme ?? ?letter (a-z) ?? ?規(guī)定單選按鈕的主題顏色。
提示：如需組合多個單選按鈕，請使用 data-role="controlgroup" 以及 data-type="horizontal|vertical" 來規(guī)定水平還是垂直地組合按鈕。
Select
所有 <select> 元素。會被自動設(shè)置按鈕的樣式，無需 date-role。
Data 屬性 ?? ?值 ?? ?描述
data-icon ?? ?Icons Reference ?? ?規(guī)定 select 元素的圖標(biāo)。默認(rèn)是 "arrow-d"。
data-iconpos ?? ?left | right | top | bottom | notext ?? ?規(guī)定圖標(biāo)的位置。
data-inline ?? ?true | false ?? ?規(guī)定 select 元素是否是行內(nèi)。
data-mini ?? ?true | false ?? ?規(guī)定 select 元素是小型的還是常規(guī)尺寸的。
data-native-menu ?? ?true | false ?? ?如果設(shè)置為 false，則使用 jQuery 自己的自定義選擇菜單（如果您希望選擇菜單在所有移動設(shè)備上擁有一致的外觀，則推薦使用）。
data-overlay-theme ?? ?letter (a-z) ?? ?規(guī)定 jQuery 自定義選擇菜單的主題顏色（與 data-native-menu="false" 一起使用）。
data-placeholder ?? ?true | false ?? ?可以在非原生 select 的 <option> 元素上設(shè)置。
data-role ?? ?none ?? ?放置 jQuery Mobile 將 select 元素設(shè)置為按鈕樣式。
data-theme ?? ?letter (a-z) ?? ?規(guī)定 select 元素的主題顏色。
提示：如需組合多個 select 元素，請使用 data-role="controlgroup" 以及 data-type="horizontal|vertical" 來規(guī)定把該元素水平還是垂直地進(jìn)行組合。
Slider
type="range" 的 input 元素。會被自動設(shè)置為按鈕樣式，無需 data-role。
Data 屬性 ?? ?值 ?? ?描述
data-highlight ?? ?true | false ?? ?規(guī)定是否突出顯示滑塊軌道。
data-mini ?? ?true | false ?? ?規(guī)定滑塊是小型的還是常規(guī)尺寸的。
data-role ?? ?none ?? ?放置 jQuery Mobile 將滑塊設(shè)置按鈕的樣式。
data-theme ?? ?letter (a-z) ?? ?規(guī)定滑塊控件（input、handle 和 track）的主題顏色。
data-track-theme ?? ?letter (a-z) ?? ?規(guī)定滑塊軌道的主題顏色。
Text input & Textarea
type="text|search|etc." 的 input 元素或 textarea 元素。會被自動設(shè)置樣式，無需 data-role。
Data 屬性 ?? ?值 ?? ?描述
data-mini ?? ?true | false ?? ?規(guī)定是否 input 元素是小型的還是常規(guī)尺寸的。
data-role ?? ?none ?? ?放置 jQuery Mobile 將 input/textarea 設(shè)置問按鈕的樣式。
data-theme ?? ?letter (a-z) ?? ?規(guī)定輸入字段的主題顏色。
jQuery Mobile 事件
??? jQuery Mobile Data
??? jQuery Mobile 圖標(biāo)
jQuery Mobile 事件參考手冊
下表列出了所有的 jQuery Mobile 事件。
注釋：請通過使用 on() 方法來綁定事件。
事件 ?? ?描述
hashchange ?? ?啟用 bookmarkable #hash 歷史記錄。
navigate ?? ?針對 hashchange 和 popstate 的 wrapper 事件。
orientationchange ?? ?當(dāng)用戶垂直或水平旋轉(zhuǎn)其移動設(shè)備時觸發(fā)。
pagebeforechange ?? ?在頁面變化周期內(nèi)觸發(fā)兩次：任意頁面加載或過渡之前觸發(fā)一次，接下來在頁面成功完成加載后，但是在瀏覽器歷史記錄被導(dǎo)航進(jìn)程修改之前觸發(fā)。
pagebeforecreate ?? ?當(dāng)頁面即將被初始化，但是在增強(qiáng)開始之前觸發(fā)。
pagebeforehide ?? ?在過渡動畫開始前，在“來源”頁面上觸發(fā)。
pagebeforeload ?? ?在作出任何加載請求之前觸發(fā)。
pagebeforeshow ?? ?在過渡動畫開始前，在“到達(dá)”頁面上觸發(fā)。
pagechange ?? ?在 changePage() 請求已完成將頁面載入 DOM 并且所有頁面過渡動畫已完成后觸發(fā)。
pagechangefailed ?? ?當(dāng) changePage() 請求對頁面的加載失敗時觸發(fā)。
pagecreate ?? ?當(dāng)頁面已創(chuàng)建，但是增強(qiáng)完成之前觸發(fā)。
pagehide ?? ?在過渡動畫完成后，在“來源”頁面觸發(fā)。
pageinit ?? ?當(dāng)頁面已經(jīng)初始化并且完成增強(qiáng)時觸發(fā)。
pageload ?? ?在頁面成功加載并插入 DOM 后觸發(fā)。
pageloadfailed ?? ?如果頁面加載請求失敗，則觸發(fā)。
pageremove ?? ?在窗口視圖從 DOM 中移除外部頁面之前觸發(fā)。
pageshow ?? ?在過渡動畫完成后，在“到達(dá)”頁面觸發(fā)。
scrollstart ?? ?當(dāng)用戶開始滾動頁面時觸發(fā)。
scrollstop ?? ?當(dāng)用戶停止?jié)L動頁面時觸發(fā)。
swipe ?? ?當(dāng)用戶在元素上水平滑動時觸發(fā)。
swipeleft ?? ?當(dāng)用戶從左劃過元素超過 30px 時觸發(fā)。
swiperight ?? ?當(dāng)用戶從右劃過元素超過 30px 時觸發(fā)。
tap ?? ?當(dāng)用戶敲擊某元素時觸發(fā)。
taphold ?? ?當(dāng)元素敲擊某元素并保持一秒時觸發(fā)。
throttledresize ?? ?啟用 bookmarkable #hash 歷史記錄
updatelayout ?? ?由動態(tài)顯示/隱藏內(nèi)容的 jQuery Mobile 組件觸發(fā)。
vclick ?? ?虛擬化的 click 事件處理器
vmousecancel ?? ?虛擬化的 mousecancel 事件處理器
vmousedown ?? ?虛擬化的 mousedown 事件處理器
vmousemove ?? ?虛擬化的 mousemove 事件處理器
vmouseout ?? ?虛擬化的 mouseout 事件處理器
vmouseover ?? ?虛擬化的 mouseover 事件處理器
vmouseup ?? ?虛擬化的 mouseup 事件處理器
jQuery Mobile 圖標(biāo)
??? jQuery Mobile 事件
??? jQuery Mobile 教程
jQuery 圖標(biāo)
如需在 jQuery Mobile 中向按鈕添加圖標(biāo)，請使用 data-icon 屬性：
<a href="#anylink" data-role="button" data-icon="refresh">Refresh Page</a>
提示：您也可以在 <button> 或 <input> 元素中使用 data-icon 屬性。
下面我們已列出 jQuery Mobile 提供的所有可用圖標(biāo)：
屬性值 ?? ?描述 ?? ?圖標(biāo) ?? ?例子
data-icon="arrow-l" ?? ?左箭頭 ?? ??? ?測試
data-icon="arrow-r" ?? ?右箭頭 ?? ??? ?測試
data-icon="arrow-u" ?? ?上箭頭 ?? ??? ?測試
data-icon="arrow-d" ?? ?下箭頭 ?? ??? ?測試
data-icon="plus" ?? ?加 ?? ??? ?測試
data-icon="minus" ?? ?減 ?? ??? ?測試
data-icon="delete" ?? ?刪除 ?? ??? ?測試
data-icon="check" ?? ?檢查 ?? ??? ?測試
data-icon="home" ?? ?首頁 ?? ??? ?測試
data-icon="info" ?? ?信息 ?? ??? ?測試
data-icon="grid" ?? ?網(wǎng)格 ?? ??? ?測試
data-icon="gear" ?? ?齒輪 ?? ??? ?測試
data-icon="search" ?? ?搜索 ?? ??? ?測試
data-icon="back" ?? ?后退 ?? ??? ?測試
data-icon="forward" ?? ?向前 ?? ??? ?測試
data-icon="refresh" ?? ?刷新 ?? ??? ?測試
data-icon="star" ?? ?星 ?? ??? ?測試
data-icon="alert" ?? ?提醒 ?? ??? ?測試
總結(jié)
以上是生活随笔為你收集整理的jQuery的mobile开发的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 分享网站变黑白色代码整站灰色插件方法
- 下一篇： 计算机内存不能为read,电脑弹出窗口显