环境搭建
要使用 jQuery Mobile,首先需要在开发的界面中包含如下3个内容
CSS文件:jquery.mobile-1.4.5.min.css
jQuery :jquery-3.1.0.min.js
jQuery Mobile library: jquery.mobile-1.4.5.min.js
如有有使用jm自带的图标的话,那么还需要把images这个文件夹放入你项目中去
我是这么用的
js(文件夹)
|- jquery.mobile-1.4.5.min.css
|- jquery-3.1.0.min.js
|- jquery.mobile-1.4.5.min.js
|- images
简单的单页面和单页面多应用构建
单页面:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="js/jquery.mobile-1.4.5.css"/>
<script type="text/javascript" src="js/jquery-3.1.0.min.js" ></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.5.js" ></script>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content">
<p>Content</p>
</div>
<div data-role="footer">
<h4>Footer</h4>
</div>
</div>
</body>
</html>
单页面多应用
3.0JQuery测试无效,所以换成了2.2.4版本
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="js/jquery.mobile-1.4.5.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script>-->
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>Home</h1></div>
<div role="main" class="ui-content">
<p>
<a href="#about">About this app</a>
</p>
</div>
<div data-role="footer">
dibu
</div>
</div>
<div data-role="page" id="about">
<div data-role="header">
<h1>About</h1></div>
<div role="main" class="ui-content">
<p>This app rocks!
<a href="#home">Go home</a>
</p>
</div>
<div data-role="footer">
dibu
</div>
</div>
</body>
</html>