jQuery Mobile 前端框架
- jQuery Mobile 是創(chuàng)建移動(dòng) web 應(yīng)用程序的框架。
- jQuery Mobile 適用于所有流行的智能手機(jī)和平板電腦。
- jQuery Mobile 使用 HTML5 和 CSS3 通過盡可能少的腳本對(duì)頁面進(jìn)行布局。
jQueryMobile 官網(wǎng) http://jquerymobile.com/
jQueryMobile 幫助 http://api.jquerymobile.com/
w3school http://www.w3school.com.cn/jquerymobile/index.asp
jQuery 官網(wǎng) http://jquery.com/
jQuery Mobile 安裝
創(chuàng)建一個(gè)靜態(tài)頁面文件
touch index.html-
head頭部引入
從 CDN 中加載 jQuery Mobile 百度CDN：
<!-- 網(wǎng)上加載 --> <head> <!-- 引入 jQuery Mobile 樣式 --> <link rel="stylesheet" > <!-- 引入 jQuery 庫 --> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <!-- 引入 jQuery Mobile 庫 --> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
下載 jQuery Mobile
將 jQuery Mobile 放于你的主機(jī)中,可以從 jQuerymobile.com下載該文件。
<head>
<link rel="stylesheet" href="jquery.mobile-1.4.5.css">
<script src="jquery.js"></script>
<script src="jquery.mobile-1.4.5.js"></script>
</head>
設(shè)置屏幕寬度(兩種)
1. <!-- meta使用viewport以確保頁面可自由縮放 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
2. <!-- 設(shè)置屏幕密度為高頻，中頻，低頻自動(dòng)縮放，禁止用戶手動(dòng)調(diào)整縮放 -->
<meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
div data-role屬性：
data-role="page" 是在瀏覽器中顯示的頁面。
data-role="header" 是在頁面頂部創(chuàng)建的工具條 (通常用于標(biāo)題或者搜索按鈕)
data-role="main" 定義了頁面的內(nèi)容，比如文本， 圖片，表單，按鈕等。
"ui-content" 類用于在頁面添加內(nèi)邊距和外邊距。
data-role="footer" 用于創(chuàng)建頁面底部工具條。
提示：在這些容器中你可以添加任何 HTML 元素 - 段落, 圖片, 標(biāo)題, 列表等。
在 jQuery Mobile 中添加頁面
在 jQuery Mobile，您可以在單一 HTML 文件中創(chuàng)建多個(gè)頁面。 請(qǐng)通過唯一的 id 來分隔每張頁面，并使用 href 屬性來連接彼此在 jQuery Mobile，您可以在單一 HTML 文件中創(chuàng)建多個(gè)頁面。 請(qǐng)通過唯一的 id 來分隔每張頁面，并使用 href 屬性來連接彼此
例子：
<div data-role="page" id="pageone">
<div data-role="main" class="ui-content">
<a href="#pagetwo">跳轉(zhuǎn)到第二個(gè)頁面</a>
</div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="main" class="ui-content">
<a href="#pageone">跳轉(zhuǎn)到第一個(gè)頁面</a>
</div>
</div>
為 jQuery Mobile 按鈕
在 jQuery Mobile 中，按鈕可通過三種方式創(chuàng)建：
使用 <button> 元素
使用 <input> 元素
使用帶有 data-role="button" 的<a>元素
普通按鈕：data-role="button"
<a href="#" data-role="button">按鈕</a>
<a href="#pagetwo" data-role="button">轉(zhuǎn)到頁面二</a>行內(nèi)按鈕：
如果需要按鈕適應(yīng)其內(nèi)容，或者如果需要兩個(gè)或多個(gè)按鈕并排顯示，請(qǐng)?zhí)砑?data-inline="true"
<a href="#pagetwo" data-role="button" data-inline="true">轉(zhuǎn)到頁面二</a>-
組合按鈕：
<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> 后退按鈕：
<a href="#" data-role="button" data-rel="back">返回</a>更多用于按鈕的 data-* 屬性：值都是 true/false
data-corners 規(guī)定按鈕是否有圓角
data-mini 規(guī)定是否是小型按鈕
data-shadow 規(guī)定按鈕是否有陰影
jQuery Mobile 頁面切換效果
頁面切換效果可被應(yīng)用于任何使用 data-transition 屬性的鏈接或表單提交：
<a href="#anylink" data-transition="slide">切換到第二個(gè)頁面</a>
| 過度 | 描述 |
|---|---|
| fade | 默認(rèn)。淡入到下一頁 |
| flip | 從后向前翻轉(zhuǎn)到下一頁 |
| flow | 拋出當(dāng)前頁面，引入下一頁 |
| pop | 像彈出窗口那樣轉(zhuǎn)到下一頁 |
| slide | 從右向左滑動(dòng)到下一頁 |
| slidefade | 從右向左滑動(dòng)并淡入到下一頁 |
| slideup | 從下到上滑動(dòng)到下一頁 |
| slidedown | 從上到下滑動(dòng)到下一頁 |
| turn | 轉(zhuǎn)向下一頁 |
| none | 過渡無效果 |
想要頁面從左向右滑動(dòng)，而不是從右向左滑動(dòng)，請(qǐng)使用帶有 "reverse" 值的 data-direction 屬性。在后退按鈕上這是默認(rèn)的。
<a href="#pagetwo" data-transition="slide" data-direction="reverse">切換</a>
** 頁面底部的導(dǎo)航欄**
<div data-role="footer">
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="plus">更多</a></li>
<li><a href="#" data-icon="minus">更少</a></li>
<li><a href="#" data-icon="delete">刪除</a></li>
<li><a href="#" data-icon="check">喜愛</a></li>
<li><a href="#" data-icon="info">信息</a></li>
</ul>
</div>
</div>
