引用 jQuery Mobile,可以
jQuery Mobile CDN:
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
也可以下载下来
<head>
<link rel=stylesheet href=jquery.mobile-1.3.2.css>
<script src=jquery.js></script>
<script src=jquery.mobile-1.3.2.js></script>
</head>
实现一个最简单的页面
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>标题</h1>
</div>
<div data-role="content">
<p>内容</p>
</div>
<div data-role="footer">
<h1>页脚</h1>
</div>
</div>
</body>
</html>
HTML5 data-* 属性用于通过 jQuery Mobile 为移动设备创建“对触控友好的”交互外观。
在 jQuery Mobile,您可以在单一 HTML 文件中创建多个页面。
请通过唯一的 id 来分隔每张页面,并使用 href 属性来连接彼此:
每个都是一个page
<div data-role="page" id="pageone">
<div data-role="content">
<a href="#pagetwo">转到页面二</a>
</div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="content">
<a href="#pageone">转到页面一</a>
</div>
</div>
在 jQuery Mobile 中创建按钮
jQuery Mobile 中的按钮可通过三种方法创建:
使用 元素
使用 元素
使用 data-role=”button” 的 元素
在页脚设置了浮动后,若是设置了按钮的类,就没有效果了。
头部若是设置成浮动和全屏,那么点击空白处能够隐藏标题
<div data-role="header" data-position="fixed" data-fullscreen="true">
原文地址:http://blog.csdn.net/shendan00/article/details/46560101