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