1. jQueryMobile的概念
jQuery Mobile是jQuery在手機上和平板上設備上的版本连霉。 jQuery Mobile給主流移動平臺帶來jQuery核心庫岭辣。與 jQuery核心庫一樣柒室，你不需要安裝任何東西胎食，只需要將*.js和*.css文件直接包含在你的web頁面中即可。
2. jQuery Mobile事件：
jQuery Mobile提供了針對移動端瀏覽器的事件
1）觸摸事件:當用戶觸摸屏幕時觸發(fā)
2）滑動事件：當用戶上下滑動時觸發(fā)
3）定位事件：當設備水平或垂直翻轉(zhuǎn)時觸發(fā)
4）頁面事件:當頁面顯示檀轨，隱藏胸竞，創(chuàng)建，加載或未加載時觸發(fā)
3. 下載jQuery Mobile:
http://jquerymobile.com/download/
4. 簡單的Page的使用
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--設置設備適配-->
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<title>Document</title>
<link rel="stylesheet" href="jquery.mobile-1.4.5.min.css"/>
<script src="jquery-1.11.1.min.js"></script>
<script src="jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<!--Page的使用:頁面如何構建-->
<div data-role="page">
<!--設定頁面的参萄，頭部卫枝，主體，以及腳部-->
<!--
data-position="fixed":起到固定的作用讹挎，想要讓它消失校赤，只需要點擊下就可以了
-->
<div data-role="header" data-position="fixed">
<h1>這是頭部</h1>
</div>
<div role="main">
<p>最近好嘛</p>
<p>最近好嘛</p>
<p>最近好嘛</p>
<p>最近好嘛</p>
<p>最近好嘛</p>
<p>最近好嘛</p>
<p>最近好嘛</p>
<p>最近好嘛</p>
<p>最近好嘛</p>
<p>最近好嘛</p>
<p>最近好嘛</p>
<p>最近好嘛</p>
<p>最近好嘛</p>
</div>
<div data-role="footer" data-position="fixed">
<h4>這是底部</h4>
</div>
</div>
</body>
</html>
5.jQuery Mobile的事件
1）pageinit：在dom元素加載完成之后才執(zhí)行的事件
2）tap:觸摸事件
3）taphold:常按事件
4）swipe:滑動的時候處理的事件
5）swipeleft:向左滑動
6）swiperight:向右滑動
7）scrollstart:滑動頁面時進行觸發(fā)
8）scrollstop:滑動頁面停止時觸發(fā)
9）orientationchange：當設備方向改變的時候進行觸發(fā)
代碼：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--設置設備適配-->
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<title>Document</title>
<link rel="stylesheet" href="jquery.mobile-1.4.5.min.css"/>
<script src="jquery-1.11.1.min.js"></script>
<script src="jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).on('pageinit',function(){
//alert('hello');
//點擊事件
//$('p').on('tap',function(){
//常按事件
//$('p').on('taphold',function(){
//滑動事件
//$('p').on('swipe',function(){
//$('p').on('swipeleft',function(){
/* $('p').on('swiperight',function(){
$(this).hide();
})*/
//滑動開始
//$(document).on('scrollstart',function(){
//滑動停止
$(document).on('scrollstop',function(){
alert('停止了滑動');
})
})
</script>
</head>
<body>
<!--Page的使用:頁面如何構建-->
<div data-role="page">
<!--設定頁面的吆玖，頭部，主體马篮，以及腳部-->
<!--
data-position="fixed":起到固定的作用沾乘，想要讓它消失，只需要點擊下就可以了
-->
<div data-role="header" data-position="fixed">
<h1>my head</h1>
</div>
<div data-role="content">
<!--<p>點擊我進行隱藏</p>-->
<p>滑動我進行隱藏</p>
<p>滑動我進行隱藏</p>
<p>滑動我進行隱藏</p>
<p>滑動我進行隱藏</p>
<p>滑動我進行隱藏</p>
<p>滑動我進行隱藏</p>
<p>滑動我進行隱藏</p>
<p>滑動我進行隱藏</p>
<p>滑動我進行隱藏</p>
<p>滑動我進行隱藏</p>
<p>滑動我進行隱藏</p>
<p>滑動我進行隱藏</p>
<p>滑動我進行隱藏</p>
<p>滑動我進行隱藏</p>
<p>滑動我進行隱藏</p>
<p>滑動我進行隱藏</p>
</div>
<div data-role="footer" data-position="fixed">
<h4>my foot</h4>
</div>
</div>
</body>
</html>
6.jQuery Mobile Widgets(1)
1）頁面切換
<!doctype html>
<html lang="en"><head>
<meta charset="UTF-8">
<!--設置設備適配-->
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<title>Document</title>
<link rel="stylesheet" href="jquery.mobile-1.4.5.min.css"/>
<script src="jquery-1.11.1.min.js"></script>
<script src="jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>my head</h1>
</div>
<div role="main">
<!--點擊跳轉(zhuǎn)到pagetwo-->
<a href="#pagetwo" data-transition="flip">跳轉(zhuǎn)到 pagetwo</a>
<!--如何將第二個頁面當成對話框的形式顯示-->
<a href="#pagetwo" data-rel="dialog">jump pagetwo</a>
</div>
<div data-role="footer">
<h4>my foot</h4>
</div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="header">
<h1>my head</h1>
</div>
<div role="main">
<!--點擊跳轉(zhuǎn)到pageone-->
<!--data-transition:指定你想要的跳轉(zhuǎn)效果-->
<a href="#pageone" data-transition="flip">跳轉(zhuǎn)到 pageone</a>
</div>
<div data-role="footer">
<h4>my foot</h4>
</div>
</div>
</body>
</html>
2）Button
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--設置設備適配-->
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<title>Document</title>
<link rel="stylesheet" href="jquery.mobile-1.4.5.min.css"/>
<script src="jquery-1.11.1.min.js"></script>
<script src="jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>my head</h1>
</div>
<div data-role="content">
<button>按鈕</button>
<input type="button" value="button"/>
<a href="#" class="ui-btn ui-shadow">按鈕</a>
<!--刪除按鈕
ui-btn:按鈕樣式
ui-icon-delete:刪除樣式
ui-btn-icon-notext:不現(xiàn)實文本
ui-corner-all:邊角
-->
<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-notext ui-corner-all"></a>
<!--在一排的按鈕-->
<a href="#" class="ui-btn ui-btn-inline">按鈕1</a>
<a href="#" class="ui-btn ui-btn-inline">按鈕2</a>
<a href="#" class="ui-btn ui-btn-inline">按鈕3</a>
<a href="#" class="ui-btn ui-btn-inline">按鈕4</a>
<!--讓按鈕之間沒有空隙-->
<!--
data-role="controlgroup"
data-type="horizontal"
-->
<div data-role="controlgroup" data-type="horizontal">
<a href="#" class="ui-btn ui-shadow ui-btn-inline">按鈕1</a>
<a href="#" class="ui-btn ui-shadow ui-btn-inline">按鈕2</a>
<a href="#" class="ui-btn ui-shadow ui-btn-inline">按鈕3</a>
<a href="#" class="ui-btn ui-shadow ui-btn-inline">按鈕4</a>
</div>
<!--更換按鈕的主題-->
<a href="#" class="ui-btn ui-btn-a">hello</a>
<a href="#" class="ui-btn ui-btn-b">hello</a>
</div>
<div data-role="footer">
<h4>my foot</h4>
</div>
</div>
</body>
</html>
3）Checkboxradio
4）Collapsible
5）Controlgroup
