小强的HTML5移动开发之路（23）—— jQuery Mobile入门

来源：互联网发布：mac终端命令编辑：程序博客网时间：2024/05/11 02:21

一、下载jQuery Mobile

下载地址：http://jquerymobile.com/
点击Download
下载如下zip包
下载成功后如下图

解压目录如图：
点击index.html进入demo主页，这里面有很多例子。

二、创建JQuery Mobile的Helloword

1、创建demo

2、新建站点

3、站点建立成功后将生成的demo拷贝到站点中

index.html

<!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

Java学习交流群142979499 JAVA技术交流群 Android学习交流群311273384

12 0