整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
jQuery Mobile 是用于創建移動 Web 應用的前端開發框架。
jQuery Mobile 可以應用于智能手機與平板電腦。
jQuery Mobile 使用 HTML5 & CSS3 最小的腳本來布局網頁。
在線實例
通過我們的在線編輯器，你可以編輯代碼，并查看運行結果。
實例
<div data-role="page" id="pageone">
<div data-role="header">
<h1>頁面標題</h1>
</div>
<div data-role="content">
<p>頁面內容</p>
</div>
<div data-role="footer">
<h1>頁面底部內容</h1>
</div>
</div>
jQuery Mobile 教程
jQuery Mobile 簡介
jQuery Mobile
jQuery Mobile 是創建移動 web 應用程序的框架。
jQuery Mobile 適用于所有流行的智能手機和平板電腦。
jQuery Mobile 使用 HTML5 和 CSS3 通過盡可能少的腳本對頁面進行布局。
每章中的 TIY 實例
通過我們的在線編輯器，您能夠編輯代碼，然后點擊提交按鈕來查看結果。
實例
<div data-role="page" id="pageone"> <div data-role="header"> <h1>在此處寫入標題</h1> </div> <div data-role="content"> <p>在此處寫入正文</p> </div> <div data-role="footer"> <h1>在此處寫入頁腳文本</h1> </div> </div>
請點擊“親自試一試”按鈕來查看結果。
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" > <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 適用于所有移動設備，它在臺式計算機上仍然可能存在兼容性問題（由于有限的 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 包含了允許您選擇頁面打開方式的 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 中的按鈕可通過三種方法創建：
使用 <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 按鈕添加圖標
如需向您的按鈕添加圖標，請使用 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 是創建移動 web 應用程序的框架。
jQuery Mobile 適用于所有流行的智能手機和平板電腦。
jQuery Mobile 使用 HTML5 和 CSS3 通過盡可能少的腳本對頁面進行布局。
每章中的 TIY 實例
通過我們的在線編輯器，您能夠編輯代碼，然后點擊提交按鈕來查看結果。
實例
<div data-role="page" id="pageone"> <div data-role="header"> <h1>在此處寫入標題</h1> </div> <div data-role="content"> <p>在此處寫入正文</p> </div> <div data-role="footer"> <h1>在此處寫入頁腳文本</h1> </div> </div>
請點擊“親自試一試”按鈕來查看結果。
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" > <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 適用于所有移動設備，它在臺式計算機上仍然可能存在兼容性問題（由于有限的 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 包含了允許您選擇頁面打開方式的 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 中的按鈕可通過三種方法創建：
使用 <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 按鈕添加圖標
如需向您的按鈕添加圖標，請使用 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>
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
