IT兄弟会全栈工程师01班第9课笔记

本课重点：学习使用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等等根据需要添加，在这些页面应用中加上锚点实现页面之间的跳转，这样就实现了一页多应用的特点。