认识jQuery Mobile
1.jQuery Mobile:
    jQuery Mobile是jQuery在手机上和平板设备上的版本.jQuery Mobile给主流移动平台带来jQuery核心库.与jQuery核心库一样,您不需要安装任何东西;只需将*.js和*.css文件直接包含到您的web页面中即可.这样,jQuery Mobile的功能就好像被放到了您的指尖,供您随时使用.
2.jQuery Mobile事件:
    jQuery Mobile也提供了针对移动端浏览器的事件:
        触摸事件 - 当用户触摸屏幕时触发
        滑动事件 - 当用户上下滑动时触发
        定位事件 - 当设备水平或垂直翻转时触发
        页面事件 - 当设备显示,隐藏,创建,加载或未加载时触发
3.下载:http://jquerymobile.com/download/

1.模拟器(Android/Iphone/aPad)
    快速:genymotion
    高级:eclipse+SDK
2.真机
    同一局域网访问,localhost改为本机ip
*.测试不用服务器不行,本人用的tomcat,结尾有整理下载

    <meta name="viewport" content="width=device-width,initial-scale=1.0"><!--宽度为设备宽度,缩放为1倍--><title></title><link rel="stylesheet" type="text/css" href="../../jquery.mobile-1.4.5.min.css"><script src="../../jquery-2.1.3.min.js"></script><script src="../../jquery.mobile-1.4.5.min.js"></script>

<div data-role="page"><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><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 >底部</h4></div>
</div>

测试:Android Pad

 <div data-role="page" id="pageone"><div data-role="header"><h1>欢迎来到主页</h1></div><div role="main"><!--  data-transition:跳转特效 slide滑动,slideup上滑，flip翻转 等等-->　<a href="#pagetwo" data-transition="slide"　>跳转到第二个页面</a><!--data-rel="dialog" 当成一个dialog的弹出页面显示--><a href="#pagetwo" data-rel="dialog">打开dialog</a></div><div data-role="footer"><h1>这是底部</h1></div></div><div data-role="page" id="pagetwo"><div data-role="header"><h1>欢迎来到主页</h1></div><div role="main"><a href="#pageone">返回到第一个页面</a></div><div data-role="footer"><h1>这是底部</h1></div></div>

测试:Android Pad

<div data-role="page"><div data-role="header" ><h1>头部</h1></div><!-- <div role="main"></div>--><!--可以用这个代替--><div data-role="content"><button>按钮1</button><input type="button" value="按钮2"><!--ui-btn默认没有阴影  ui-shadow加阴影--><a href="#" class="ui-btn ui-shadow">按钮3</a> <!--推荐使用--><!--ui-icon-delete删除的图片     ui-btn-icon-notext不显示任何内容   ui-corner-all四周边缘效果--><a href="#" class="ui-btn ui-icon-delete ui-btn-icon-notext ui-corner-all">按钮</a><!--ui-btn-inline按钮在一排--><a href="#" class="ui-btn ui-btn-inline">按钮A</a><a href="#" class="ui-btn ui-btn-inline">按钮B</a><a href="#" class="ui-btn ui-btn-inline">按钮C</a><div data-role="controlgroup"><!--按钮在一起--><button>按钮1</button><button>按钮1</button><button>按钮1</button></div><div data-role="controlgroup"><a href="#" class="ui-btn ui-btn-inline">按钮A</a><a href="#" class="ui-btn ui-btn-inline">按钮B</a><a href="#" class="ui-btn ui-btn-inline">按钮C</a></div><!--data-type="horizontal"横向--><div data-role="controlgroup" data-type="horizontal"><a href="#" class="ui-btn ">按钮A</a><a href="#" class="ui-btn ">按钮B</a><a href="#" class="ui-btn ">按钮C</a></div><!--ui-btn-*按钮主题--><a href="#" class="ui-btn ui-btn-a">默认主题</a><a href="#" class="ui-btn ui-btn-b">黑色主题</a></div><div data-role="footer"><h1>底部</h1></div>
</div>

<div data-role="page"><div data-role="header" ><h1>header</h1></div><div role="main">复选框:<label><input type="checkbox" >apple</label><fieldset data-role="controlgroup"><!--一组--><label><input type="checkbox" name="mm" >m1</label><label><input type="checkbox" name="mm" >m2</label><!--data-theme主题,默认a--><label><input type="checkbox" name="mm" data-theme="b" >m3</label></fieldset><fieldset data-role="controlgroup" data-type="horizontal"><!--横向--><label><input type="checkbox" name="mm" >m1</label><label><input type="checkbox" name="mm" >m2</label><label><input type="checkbox" name="mm">m3</label></fieldset>单选框:<label><input type="radio" name="m" id="m1">A</label><label><input type="radio" name="m" id="m2">B</label><fieldset data-role="controlgroup" data-type="horizontal"><!--和复选一样--><label><input type="radio" name="m" id="m11">一组的A</label><label><input type="radio" name="m" id="m22">一组的B</label></fieldset></div><div data-role="footer"><h1>footer</h1></div>
</div>

<div data-role="page"><div data-role="header" ><h1>head</h1></div><div role="main"><div data-role="collapsible"><h4>heading</h4><!--头部--><p>我展开了</p></div><!--data-content-theme="false" 去掉下边框--><div data-role="collapsible" data-content-theme="false"><h4>heading</h4><p>我展开了</p></div><!--data-collapsed="false"默认展开--><div data-role="collapsible" data-collapsed="false"><h4>heading</h4><p>默认展开</p></div><div data-role="collapsible"><h1>系列</h1><ul><!--列表项--><li><a href="#">item 1</a></li><li><a href="#">item 2</a></li><li><a href="#">item 3</a></li></ul></div><div data-role="collapsible"><h1>系列</h1><!--data-role="listview"--><ul data-role="listview"><li><a href="#">item 1</a></li><li><a href="#">item 2</a></li><li><a href="#">item 3</a></li></ul></div></div><div data-role="footer"><h1>foot</h1></div>
</div>

<!--
api:http://api.jquerymobile.com/grid-layout/two-column (using the ui-grid-a class)      2列,平均分配
three-column (using the ui-grid-b class)    3列
four-column (using the ui-grid-c class)     4列
five-column (using the ui-grid-d class)     5列
--><!--<div class="ui-grid-a">-->
<div class="ui-grid-c"><!--4列--><!--ui-block-a第一列--><div class="ui-block-a"><div class="ui-bar ui-bar-a">ui-bar-a是主题a</div></div><!--ui-block-b第二列--><div class="ui-block-b"><div class="ui-bar ui-bar-b">ui-bar-b是主题b</div></div><!--ui-block-b第三列--><div class="ui-block-c"><div class="ui-bar ui-bar-b">ui-bar-b是主题b</div></div><!--ui-block-b第四列,e为5--><div class="ui-block-d"><div class="ui-bar ui-bar-inherit">ui-bar-inherit是主题</div></div><!--第一列行之后是第二行,和第一列用法一样,之后也一样--><!--ui-block-a第一列--><div class="ui-block-a"><div class="ui-bar ui-bar-a">第1列第2行</div></div><!--ui-block-b第二列--><div class="ui-block-b"><div class="ui-bar ui-bar-b">第2列第2行</div></div><!--ui-block-b第三列--><div class="ui-block-c"><div class="ui-bar ui-bar-b">第3列第2行</div></div><!--ui-block-b第四列--><div class="ui-block-d"><div class="ui-bar ui-bar-inherit">第4列第2行</div></div>
</div><div class="ui-grid-b"><div class="ui-block-a"><input type="button" data-theme="a" value="按钮"><input type="button" data-theme="a" value="按钮"><input type="button" data-theme="a" value="按钮"></div><div class="ui-block-b"><input type="button" data-theme="b" value="按钮"><input type="button" data-theme="a" value="按钮"><input type="button" data-theme="a" value="按钮"></div></div><div class="ui-grid-solo"><div class="ui-block-a"><button> class="ui-grid-solo"  1列</button></div></div>

<ul data-role="listview"><li>A</li><li>B</li><li>C</li><li>D</li>
</ul>
<ol data-role="listview"><li>a</li><li>b</li><li>c</li><li>d</li>
</ol>
<ol data-role="listview"><li><a href="#">a</a></li><!--可点击--><li><a href="#">b</a></li><li><a href="#">c</a></li><li><a href="#">d</a></li>
</ol>
<hr><!--过滤效果   data-filter="true"添加查询功能        data-inset="true" 添加插入功能,测试不写没关系-->
<ul data-role="listview" data-filter="true" data-inset="true"><li><a href="#">am</a></li><li><a href="#">b</a></li><li><a href="#">c</a></li><li><a href="#">pm</a></li>
</ul>
<hr>
<form class="ui-filterable"><input id="autoinput" data-type="search">
</form>
<!--data-filter-reveal="true"默认不显示-->
<ul data-role="listview" data-filter="true" data-filter-reveal="true" data-input="#autoinput" data-inset="true"><li><a href="#">am</a></li><li><a href="#">b</a></li><li><a href="#">c</a></li><li><a href="#">pm</a></li>
</ul><!--data-autodividers="true"索引效果,类似字典-->
<ul data-role="listview" data-autodividers="true" data-filter="true" data-inset="true"><li><a href="#">am</a></li><li><a href="#">an</a></li><li><a href="#">bm</a></li><li><a href="#">pn</a></li>
</ul>

<!--navbar 导航条-->
<div data-role="navbar"><ul><!--class="ui-btn-active"默认选中--><li><a href="#" class="ui-btn-active">one</a></li><li><a href="#">two</a></li><li><a href="#">three</a></li><li><a href="#">four</a></li></ul>
</div>
<div data-role="header"><h1>头部</h1><div data-role="navbar"><ul><li><a href="#">one</a></li><li><a href="#">two</a></li><li><a href="#">three</a></li><li><a href="#">four</a></li></ul></div>
</div>
<div data-role="footer"><h1>脚部</h1><div data-role="navbar"><ul><li><a href="#">one</a></li><li><a href="#">two</a></li><li><a href="#">three</a></li><li><a href="#">four</a></li></ul></div>
</div><div data-role="header" data-theme="b"><!--   <h1>data-icon</h1>--><div data-role="navbar"><ul><li><a href="#" data-icon="grid">data-icon</a></li><li><a href="#" data-icon="star">加入系统图片</a></li><li><a href="#" data-icon="gear" class="ui-btn-active">hehe</a></li></ul></div>
</div>

<a href="#pp" class="ui-btn" data-rel="popup">弹出窗口</a><div data-role="popup" id="pp" ><p>弹出的窗口内容</p>
</div>
<!--data-position-to="window"弹出window       data-transition出现效果-->
<a href="#pop"  data-rel="popup" data-position-to="window" data-transition="fade"><img src="5.png" class="pupphoto" style="width: 20px;height: 20px">
</a>
<div data-role="popup" id="pop"><a href="#" data-rel="back"class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">close</a><!-- data-rel="back"点击其它位置关闭弹出的对话框   ui-icon-delete删除的图片    ui-btn-icon-notext右上角不显示任何内容   ui-btn-right按钮显示在右边--><img src="5.png" class="pupphoto" >
</div>

<div class="ui-field-contain"><select name="select-native-1" id="select-native-1" data-iconpos="left"><option value="1">第一个</option><option value="2">第二个</option><option value="3" disabled>disabled不能选</option><option value="4">第四个</option></select>
</div>

<div data-role="page"><div data-role="header" data-theme="b" ><h1>data-theme="b"黑色主题</h1></div><div role="main" ><a href="#" class="ui-btn">按钮</a></div><div data-role="footer" data-theme="c"><h2>data-theme="c"黑色边框主题</h2></div>
</div>

<div data-role="page"><div data-role="header"><h1>header</h1></div><div role="main"><p id="p1">点击隐藏tao</p><p id="p2">长按隐藏taphold</p><p id="p3">滑动隐藏swipe</p><p id="p4">左滑隐藏swipeleft</p><p id="p5">右滑隐藏swiperight</p><a id="p0" class="ui-btn">..</a> <br> <br> <br> <br><br> <br> <br> <br> <br> <br> <br><br> <br> <br> <br> <br> <br> <br><br> <br> <br> <br> <br> <br> <br><br> <br> <br> <br> <br> <br> <br><br> <br></div><div data-role="footer"><h1>footer</h1></div></div>

$(document).on("pageinit", function() {//           alert("页面加载完成");$("#p1").on("tap", function() {//点击事件$(this).hide(1000);});$("#p2").on("taphold", function() {//长按事件$(this).hide(1000);});$("#p3").on("swipe", function() {//滑动事件$(this).hide(1000);});$("#p4").on("swipeleft", function() {$(this).hide(1000);});$("#p5").on("swiperight", function() {$(this).hide(1000);});$(document).on("scrollstart", function() {//开始滚动//              alert("滑动开始");$("#p0").html("滑动中");});$(document).on("scrollstop", function() {//结束滚动//              alert("滑动结束");$("#p0").html("滑动结束");});/* $(document).on("orientationchange", function () {//错误alert("滑动结束");$("#p0").html("屏幕翻转");});*/$(window).bind("orientationchange", function(event) {if (event.orientation) {if (event.orientation == 'portrait') {$("#p0").html("屏幕翻转-竖屏 ");} else if (event.orientation == 'landscape') {$("#p0").html("屏幕翻转-横屏  ");}}});});