1.什么是jQuery Mobile:
jQuery Mobile是jQuery在手机上和平板设备上的版本。jQuery Mobile给主流移动平台带来了jQuery核心库。使用它不需要安装任何东西,只需要将*.js和*.css文件直接包含到web项目中即可使用。
2.jQuery Mobile事件
jQuery Mobile提供了专门针对移动端浏览器的事件,这些事件和在手机软件开发所要监听的事件类似。
触摸事件--当用户触摸屏幕时触发
滑动时间--当用户滑动屏幕时触发
定位时间--当设备水平或垂直翻转时触发(横竖屏切换)
页面时间--当页面显示、隐藏、创建、加载或未加载时触发(类似生命周期的方法)
3.jQuery Mobile下载
如果我们使用jQuery Mobile,那就需要到其官方网站下载相关资源文件。其官网是jquerymobile.com。 当我们下载时,可选择自定义下载,这样可以减少项目引入的资源文件,减少消耗。当然 也可全部下载。最后将解压出来的文件复制进自己的web项目中即可使用。
4.jQuery Mobile的使用
(1)在头文件中引入我们需要的文件
<link rel="stylesheet" type="text/css" href="script/lib/jquery.mobile-1.4.5.css">
<script type="text/javascript" charset="utf-8" src="script/lib/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="script/lib/jquery.mobile-1.4.5.min.js"></script>
(2)引入meta标签,让我们来视屏我们屏幕宽高来进行适配。
(3)在body中放入我们的page: 一个div标签。其data-role="page"。
<div data-role="page">
</div>
(4)最后,在这个page中,我们的页面将分为三个部分。我们需要建立3个div分别指定为头部,内容部分,尾部。
<div data-role="page">
<div data-role="header" data-position="fixed" >
<h3>我是头部</h3>
</div>
<div role="main"></div>
<p>我是内容</p>
<div data-role="footer" data-position="fixed"><h4>我是尾部</h4></div>
</div>
效果如图: