本课重点:学习使用
jQuery Mobile
前端框架来写移动端WebApp
静态页面。jQuery Mobile 是创建移动 web 应用程序的轻量级框架。jQuery Mobile 适用于所有流行的智能手机和平板电脑。jQuery Mobile 使用 HTML5 和 CSS3 通过尽可能少的脚本对页面进行布局。
1.下载jQuery和jQuery Mobile后先在页面中引入以下三个文件:
<link rel="stylesheet" href="./js/jquery.mobile-1.4.5.min.css">
<script src="./js/jquery.min.js"></script>
<script src="./js/jquery.mobile-1.4.5.min.js"></script>
2.在head
中加入兼容各种尺寸手机屏幕属性
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,maximum-scale=1.0,user-scalable=0" />
3.使用jQuery Mobile
中的属性进行页面编写,可以实现一页多应用:
如页面中第一个应用页面如下:
<div data-role="page" id="pageone">
<div data-role="header">
<h1>在此处写入标题</h1>
</div>
<div data-role="content">
<p>在此处写入正文</p>
</div>
<div data-role="footer">
<h1>在此处写入页脚文本</h1>
</div>
</div>
多个页面应用可以写多个比如可以有
pagetwo
、pagethree
等等根据需要添加,在这些页面应用中加上锚点实现页面之间的跳转,这样就实现了一页多应用的特点。