1.它是什么
jQuery Mobile 是創(chuàng)建移動(dòng) web 應(yīng)用程序的框架免胃。
jQuery Mobile 適用于所有流行的智能手機(jī)和平板電腦躺涝。
jQuery Mobile 使用 HTML5 和 CSS3 通過盡可能少的腳本對(duì)頁面進(jìn)行布局。
在線教程：http://www.w3school.com.cn/jquerymobile/index.asp
官方下載：http://jquerymobile.com/
2. 廣泛應(yīng)用
- 單頁面多應(yīng)用
- 混合APP開發(fā)
3. 如何使用
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
/*
content屬性值 :
width:可視區(qū)域的寬度，值可為數(shù)字或關(guān)鍵詞device-width
height:同width
intial-scale:頁面首次被顯示是可視區(qū)域的縮放級(jí)別，取值1.0則頁面按實(shí)際尺寸顯示蜈敢，無任何縮放
maximum-scale=1.0, minimum-scale=1.0;可視區(qū)域的縮放級(jí)別伯病，
maximum-scale用戶可將頁面放大的程序，1.0將禁止用戶放大到實(shí)際尺寸之上。
user-scalable:是否可對(duì)頁面進(jìn)行縮放便锨，no 禁止縮放
*/
<link rel="stylesheet" />
<script src="http://code.jquery.com/jquery-[version].min.js"></script>
<script src="http://code.jquery.com/mobile/[version]/jquery.mobile-[version].min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div role="main" class="ui-content">
<p>Page content goes here.</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
官網(wǎng)DEMO地址：http://demos.jquerymobile.com/1.4.5/
- 頁面
<body>
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div role="main" class="ui-content">
<p>Page content goes here.</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
例子解釋：
data-role="page" 是顯示在瀏覽器中的頁面
data-role="header" 創(chuàng)建頁面上方的工具欄（常用于標(biāo)題和搜索按鈕）
data-role="content" 定義頁面的內(nèi)容我碟，比如文本放案、圖像、表單和按鈕矫俺，等等
data-role="footer" 創(chuàng)建頁面底部的工具欄
備注：在這些容器中吱殉，您可以添加任意 HTML 元素 - 段落、圖像厘托、標(biāo)題友雳、列表等等。
提示：HTML5 data-* 屬性用于通過 jQuery Mobile 為移動(dòng)設(shè)備創(chuàng)建“對(duì)觸控友好的”交互外觀铅匹。
- 單頁面多應(yīng)用
- 1.在 jQuery Mobile押赊，您可以在單一 HTML 文件中創(chuàng)建多個(gè)頁面。
- 2.請(qǐng)通過唯一的 id 來分隔每張頁面伊群，并使用 href 屬性來連接彼此
<body>
<!-- Start of first page -->
<div data-role="page" id="pageone">
<div data-role="header">
<h1>pageone</h1>
</div><!-- /header -->
<div role="main" class="ui-content">
<p>I'm first in the source order so I'm shown as the page.</p>
<p>View internal page called <a href="#pagetwo">to pagetwo</a></p>
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<h4>Page Footer</h4>
<div data-role="navbar">
<ul>
<li><a href="#pageone">頁面一</a></li>
<li><a href="#pagetwo">頁面二</a></li>
</ul>
</div>
</div><!-- /footer -->
</div><!-- /page -->
<!-- Start of first page -->
<div data-role="page" id="pagetwo">
<div data-role="header">
<h1>pagetwo</h1>
</div><!-- /header -->
<div role="main" class="ui-content">
<p>I'm first in the source order so I'm shown as the page.</p>
<p>View internal page called <a href="#pageone">to pageone</a></p>
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<h4>Page Footer</h4>
<div data-role="navbar">
<ul>
<li><a href="#pageone">頁面一</a></li>
<li><a href="#pagetwo">頁面二</a></li>
</ul>
</div>
</div><!-- /footer -->
</div><!-- /page -->
</body>
- 在 jQuery Mobile 中創(chuàng)建按鈕
jQuery Mobile 中的按鈕可通過三種方法創(chuàng)建：- 使用 <button> 元素
- 使用 <input> 元素
- 使用 data-role="button" 的
<a>元素
<button>按鈕</button>
<input type="button" value="按鈕">
<a href="#" data-role="button">按鈕</a>
- 在 jQuery Mobile 過渡效果
jQuery Mobile 擁有一系列關(guān)于如何從一頁過渡到下一頁的效果考杉。
注釋：如需實(shí)現(xiàn)過渡效果，瀏覽器必須支持 CSS3 3D 轉(zhuǎn)換：
瀏覽器支持
Internet Explorer 10 支持 3D 轉(zhuǎn)換（更早的版本不支持）
Opera 仍然不支持 3D 轉(zhuǎn)換
過渡效果可應(yīng)用于任意鏈接或通過使用 data-transition 屬性進(jìn)行的表單提交：
<a href="#anylink" data-transition="slide">滑動(dòng)到頁面二</a>
查看官方：http://www.w3school.com.cn/jquerymobile/jquerymobile_transitions.asp
- jQuery Mobile 事件
您能夠在 jQuery Mobile 中使用任何標(biāo)準(zhǔn)的 jQuery 事件舰始。
此外崇棠，jQuery Mobile 還提供若干種為移動(dòng)瀏覽定制的事件： - 觸摸事件 - 當(dāng)用戶觸摸屏幕時(shí)觸發(fā)（敲擊和滑動(dòng)）
- 滾動(dòng)事件 - 當(dāng)上下滾動(dòng)時(shí)觸發(fā)
- 方向事件 - 當(dāng)設(shè)備垂直或水平旋轉(zhuǎn)時(shí)觸發(fā)
- 頁面事件 - 當(dāng)頁面被顯示、隱藏丸卷、創(chuàng)建枕稀、加載以及/或卸載時(shí)觸發(fā)
如需關(guān)于所有 jQuery Mobile 事件的完整信息，請(qǐng)?jiān)L問我們的 jQuery Mobile 事件參考手冊(cè)谜嫉。
以上使用方法僅僅是一部分萎坷，更多的使用方法請(qǐng)查閱官方。
官網(wǎng) ：http://jquerymobile.com/
DEMO：http://demos.jquerymobile.com/1.4.5/
在線教程：http://www.w3school.com.cn/jquerymobile/index.asp
