小强的HTML5移动开发之路（23）—— jQuery Mobile入门
一、下载jQuery Mobile
点击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在真实手机上的效果如下：
| Java学习交流群142979499 |  |
| Android学习交流群311273384 | |
小强的HTML5移动开发之路（23）—— jQuery Mobile入门的更多相关文章
- 小强的HTML5移动开发之路（18）——HTML5地理定位
来自:http://blog.csdn.net/dawanganban/article/details/18192091 在前面的<小强的HTML5移动开发之路(2)--HTML5的新特性> ...
- 小强的HTML5移动开发之路（14）——Video标签详解
来自:http://blog.csdn.net/dawanganban/article/details/18180605 在前面的小强的HTML5移动开发之路(5)--制作一个漂亮的视频播放器中制作了 ...
- 小强的HTML5移动开发之路（13）——HTML5中的全局属性
来自:http://blog.csdn.net/dawanganban/article/details/18179483 一.accssskey 快捷键 <!DOCTYPE HTML> ...
- 小强的HTML5移动开发之路（11）——链接，图片，表格，框架
来自:http://blog.csdn.net/dawanganban/article/details/18098193 一.HTML是什么? HTML(hypertext mark-uplangua ...
- 小强的HTML5移动开发之路（42）——HTML4与HTML5文档结构比较
一般来说,人们在书写包括HTML在内的文档时,习惯上按照类似于"章--节--小节"这样的层次结构来进行. 在HTML4中的描述方式: <html> <head&g ...
- 小强的HTML5移动开发之路（37）——jqMobi快速入门
在<小强的HTML5移动开发之路(33)-- jqMobi基础>中我们了解了什么是jqMobi,并从官方下载了jqMobi开发包,下载后解压目录如下: 拷贝上面的/css目录./plugi ...
- 小强的HTML5移动开发之路（53）——jQueryMobile页面间参数传递
在单页模版中使用基于HTTP的方式通过POST和GET请求传递参数,而在多页模版中不需要与服务器进行通信,通常在多页模版中有以下三种方法来实现页面间的参数传递. 1.GET方式:在前一个页面生成参数并 ...
- 小强的HTML5移动开发之路（51）——jquerymobile中改善页面访问速度
在使用jQuery Mobile进行开发的时候可以选择单页模版和多页模版,在使用单页模版的时候从一个页面跳转到另一个页面的时候需要从服务器请求,用户会感到略有停顿.使用多页模版,可以改善页面跳转之间的 ...
- 小强的HTML5移动开发之路（21）—— PhoneGap
一.PhoneGap是什么 PhoneGap 是一个用基于 HTML,CSS 和 JavaScript 的,创建移动跨平台移动应用程序的快速开发框架.它使开发者能够利用 iPhone,Android, ...
- 小强的HTML5移动开发之路（50）——jquerymobile页面初始化过程
为了方便说明和更加直观的展示jquerymobile的页面初始化过程以及各个事件的触发过程,我绘制了一幅流程图: 图中用红色框圈起来的是界面中的事件,測试代码例如以下: <!DOCTYPE ht ...
随机推荐
- nodejs连接mysql突然中断问题解决方案
db/index.js数据库配置文件 一.在数据库连接失败的情况下,回调函数,再次发起连接,直到连接成功为止. handleDisconnect(){ this.connection.connect( ...
- win7管理工具不可用
看看这个路径的文件夹是否还在C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Administrative Tools如果有缺失的文件夹就自己新 ...
- FZU Problem 2156 Climb Stairs DP
http://acm.fzu.edu.cn/problem.php?pid=2156 题目大意: 爬楼梯,要爬到n这个位置,每次可以走x也可以走y,然后一定要经过A和B两点,求最终到达n的方案数. 思 ...
- HDU 1556 Color the ball【算法的优化】
/* 解题思路:每次仅仅求解一開始的第一个数字,让第一个数字加一,最后的一个数字的后面一个数减一.我们能够想想,最后加的时候,就是加上前面一个数出现的次数和自己本身出现的次数. 解题人:lingnic ...
- php课程 10-35 php实现文件上传的注意事项是什么
php课程 10-35 php实现文件上传的注意事项是什么 一.总结 一句话总结:记得限制大小和类型,还有就是用move_uploaded_file($sfile,$dfile);函数把上传到php临 ...
- Maven 异常：Project configuration is not up-to-date with pom.xml解决方案
一.异常信息: 导入maven工程后,出现如下错误: Description Resource Path Location TypeProject configuration ...
- (转)ipv4的网段表示方法
简单一点举例说明:ip段:10.0.0.1-10.0.0.255 的表示方法:10.0.0.0/24ip段:10.0.0.1-10.0.255.255 的表示方法: ...
- 关于stm32的输入输出
https://blog.csdn.net/u011556018/article/details/72629082
- 【rlz03】十六进制转十进制
Time Limit: 3 second Memory Limit: 2 MB 问题描述 输入一个十六进制数,编程转换为十进制数. 整数部分不会超过65535,十六进制的小数部分不会超过2位. Sam ...
- 关于stm32的RAM大小