一、下载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在真实手机上的效果如下:
分享到:
相关推荐
HTML5+jQuery制作温馨浪漫爱心表白动画特效HTML5+jQuery制作温馨浪漫爱心表白动画特效HTML5+jQuery制作温馨浪漫爱心表白动画特效HTML5+jQuery制作温馨浪漫爱心表白动画特效HTML5+jQuery制作温馨浪漫爱心表白动画特效...
尤其是有洁癖的人更是如此,总是喜欢时不时的杀进程杀服务,可是由于android开源的特殊性,你会发现被干掉的服务又一次的重新复活了,总之生命力极其强悍,业界称之为——打不死的小强。这里是它怎么做的,哈哈
小强老师《零基础学习软件测试》系列视频之QTP使用指南——界面分析
“小强一号”——实验机器人制作过程(图文.docx
小强老师《零基础学习软件测试》系列视频之QTP使用指南
小强的HTML5移动开发之路系列博客中的一个视频播放器的例子。
小强老师《零基础学习软件测试》系列视频之QTP使用指南
详细请看《 小强的HTML5移动开发之路(42)》:http://blog.csdn.net/column/details/dawanganban-html5.html
Html5 Css3最新视频教程让你搭建绚丽界面,满足日常开发需求,从入门到精通
其前身Uploadify在很多项目中已被广泛之用,但是Uploadify需要Flash的支持,移动设备端难以集成,特别是iPhone、iPad设备。 UploadiFive基于HTML5和jQuery,不在需要Flash的支持,可以进行批量上传、拖拽上传、手机...
资源名称:07-移动端项目实战资源目录:G_038.Html5项目S]实战:我要地图[G_039.Html5移动开发[S]G_040.Html5项目实战:豆瓣音乐[S]G_041.Html5项目实战:小强快跑之游戏引擎[S]G_043.HTML5结合jQuery Mobile开发 ...
基于Jquery模拟Select,解决IE显示问题
里面有小强开发板程序,对初学者有很大帮助
小强老师软件测试基础课程5-软件质量基础知识
小强多个模版替换 小强多个模版替换 小强多个模版替换 小强多个模版替换 小强多个模版替换
jQuery点击弹出遮罩层图片放大查看代码
小强影音盒是一个在线电影和视频播放器,能播放网上的海量电影。如果想看最新版本到:http://www.5aie.com/xiaoqiangplayer/flvshuoming.htm 查看。
HTML、CSS、JavaScript网页制作从入门到精通
小强多个模版替换 快速发布信息,让你的工作更有效率。