1.基本使用
1.1 pages
头部引入三个部分的内容：
<link rel="stylesheet" href="http://code.jquery.com/mobile/[version]/jquery.mobile-[version].min.css" /> <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>
引入mate标签进行适配：
<meta name="viewport" content="width=device-width, initial-scale=1">
div标签将页面分为三个部分：
<div data-role="page"> <div data-role="header">...</div> <div role="main" class="ui-content">...</div> <div data-role="footer">...</div> </div>
2.基本事件
pageint：页面元素加载完成出发这个事件
tap：触摸事件
taphold：长按事件
swipe：滑动//监听文档document
swipeleft：向左滑动
swiperight：向右滑动
scrollstart：开始滑动
scrollstop：停止滑动
orienttionchange：方向改变后触发
<script src="jquery.min.js"></script> <script src="jquery.mobile-1.4.5.min.js"></script> <link type="text/css" rel="stylesheet" href="jquery.mobile-1.4.5.min.css"> <script> $(document).on("pageinit",function(){ // alert("hello"); $("p").on("tap",function(){//各种事件 $(this).hide(); }) }); </script> </head> <body> <div data-role="page"> <div data-role="header" data-position="fixed"> <h1>这是头部</h1> </div> <div data-role="content"> <p> 点击我进行隐藏 </p> </div> <div data-role="footer" data-position="fixed"> <h1>这是底部</h1> </div> </div>
原文：http://www.cnblogs.com/www20081028/p/5207089.html