最近公司的一个项目需要设计到移动端的页面,网上查了一下JqueryMobile是一个不错的移动端的框架,但是之前又没有接触过只有网上查找一些资料学习,顺便就把我学习的过程记录一下当然也希望能给看到这篇文章的朋友一些帮助。
理论的这些我这里就不说了,网上一搜多的很,我就直接记录使用的方法和步骤。
在使用JqueryMobile 我们可以在官网下载Zip File: jquery.mobile-1.4.5.zip那么解压后我们只需要jquery.mobile-1.4.5.css和jquery.mobile-1.4.5.min.js这两个文件
https://jquerymobile.com/download/
1.在我们的页面中 需要先在<head></head>标签内加入如下代码
<!-- meta使用viewport以确保页面可自由缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 引入 jQuery Mobile 样式 -->
<link rel="stylesheet" href="/tjwxqyh/css/jquery.mobile-1.4.5.css" type="text/css">
<!-- 引入 jQuery 样式 -->
<script src="/tjwxqyh/js/jquery-1.9.1.min.js"></script>
<!-- 引入 jQuery Mobile 库 -->
<script src="/tjwxqyh/js/jquery.mobile-1.4.5.min.js"></script>
2.就是在<body></body>标签中的页面布局
<div data-role="page">
<!-- 头部 -->
<div data-role="header" >
</div>
<!-- 内容 -->
<div role="main" class="ui-content">
</div>
<!-- 底部 -->
<div data-role="footer">
</div>
</div>
代码如下:
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- meta使用viewport以确保页面可自由缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 引入 jQuery Mobile 样式 -->
<link rel="stylesheet" href="/tjwxqyh/css/jquery.mobile-1.4.5.css"
type="text/css">
<script src="/tjwxqyh/js/jquery-1.9.1.min.js"></script>
<!-- 引入 jQuery Mobile 库 -->
<script src="/tjwxqyh/js/jquery.mobile-1.4.5.min.js"></script>
<title>开始使用layui</title>
</head>
<body>
<div data-role="page">
<!-- 头部 -->
<div data-role="header">
</div>
<!-- 内容 -->
<div role="main" class="ui-content">
</div>
<!-- 底部 -->
<div data-role="footer">
</div>
</div>
</body>
</html>