新内容(前端-jQuery Mobile框架)
jQuery Mobile会根据手机不同尺寸来调整适配
jM 依赖于jQuery(js的一个扩展库)
(bootstarp也可以实现webApp, 但是它有些没用到的功能, 必须也包括到项目里, 这里有瑕疵)
webAPP思想: 单页多应用, 以减少用户请求时的断片, 增强用户体验
引入jM两个文件和一个js的文件
-
jquery.mobile-1.4.5.min.css
-
jquery.mobile-1.4.5.min.js
-
jquery-3.1.0.min.js
注意: 这里使用jquery-3.1.0.min.js有问题, 页面效果显示不出来, 看jM官网要求的jQuery版本为1.8 - 1.11 / 2.1(这里我使用2.0.0)
同时需要在页面做如下设置
<meta name = "viewport" content = "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
小示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<link rel="stylesheet" type="text/css" href="./css/jquery.mobile-1.4.5.min.css">
<script src="./js/jquery-2.0.0.min.js"></script>
<script src="./js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<!-- pageone开始 -->
<div data-role="page" id="pageone">
<!-- header开始 -->
<div data-role="header">
<h1>pageone</h1>
</div>
<!-- header结束 -->
<!-- content开始 -->
<div data-role="content">
<p>pageone content</p>
</div>
<!-- content结束 -->
<!-- footer结束 -->
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#pageone" data-icon="home">首页</a></li>
<li><a href="#pagetwo" data-icon="heart">喜欢</a></li>
<li><a href="#pagethree" data-icon="user">用户</a></li>
</ul>
</div>
</div>
</div>
<!-- footer结束 -->
<!-- pageone结束 -->
<!-- ******************************************************************* -->
<!-- pagetwo 和 pagethree 内容将上面部分拷贝下来修改下参数就OK -->
</body>
</html>
Snip20160816_20.png
作业
写三个页面
商品首页,商品列表页,商品详情页
用户注册和登录的表单
网友评论