HTML5移动开发之路（23）—— jQuery Mobile入门
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML5移动开发之路（23）—— jQuery Mobile入门相关的知识，希望对你有一定的参考价值。
本文为 兄弟连IT教育 机构官方 html5培训 教程，主要介绍：HTML5移动开发之路（23）—— jQuery Mobile入门
一、下载jQuery Mobile
下载地址：http://jquerymobile.com/
点击Download
下载如下zip包
下载成功后如下图
解压目录如图：
点击index.html进入demo主页，这里面有很多例子。
二、创建JQuery Mobile的Helloword
1、创建demo
2、新建站点
3、站点建立成功后将生成的demo拷贝到站点中
index.html
[html] view plain copy
print?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web 应用程序</title>
<link href="jquery.mobile-1.3.2.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.mobile-1.3.2.min.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header">
<h1>第 1 页</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li><a href="#page2">第 2 页</a></li>
<li><a href="#page3">第 3 页</a></li>
<li><a href="#page4">第 4 页</a></li>
</ul>
</div>
<div data-role="footer">
<h4>页面脚注</h4>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header">
<h1>第 2 页</h1>
</div>
<div data-role="content">
内容
</div>
<div data-role="footer">
<h4>页面脚注</h4>
</div>
</div>
<div data-role="page" id="page3">
<div data-role="header">
<h1>第 3 页</h1>
</div>
<div data-role="content">
内容
</div>
<div data-role="footer">
<h4>页面脚注</h4>
</div>
</div>
<div data-role="page" id="page4">
<div data-role="header">
<h1>第 4 页</h1>
</div>
<div data-role="content">
内容
</div>
<div data-role="footer">
<h4>页面脚注</h4>
</div>
</div>
</body>
</html>
在Chrome浏览器中运行结果：
打包成apk在真实手机上的效果如下：
两个demo打包下载：http://download.csdn.net/detail/lxq_xsyu/6865877
以上是关于HTML5移动开发之路（23）—— jQuery Mobile入门的主要内容，如果未能解决你的问题，请参考以下文章
HTML5移动开发之路（24）—— PhoneGap Android开发环境搭建
HTML5移动开发之路（30）—— JavaScript回顾5
HTML5移动开发之路（27）—— JavaScript回顾2
HTML5移动开发之路（28）—— JavaScript回顾3