小强的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 ...
随机推荐
- Mybatis的使用中的一些不太注意的技巧
以下就总结一下Mybatis的使用中的一些不太注意的技巧,算是Mybatis的总结笔 1.插入时主键返回 我们向数据库插入一条记录是,使用Mybatis的<insert>是无法返回插入的主 ...
- 使用Profiles分析SQL语句运行时间和消耗资源
打开profiling,默认是没开启的. mysql> set profiling=1; 运行要分析的SQL语句 mysql> select count(1) from wechat_em ...
- 重构——DataTable转泛型
泛型简单介绍 泛型能够最大限度的重用代码.保护类型的安全.提高性能. 泛型最常见的用途是创建集合类 泛型数据类型中使用的信息可在执行时通过反射 ...
- js循环函数中的匿名函数和闭包问题（匿名函数要用循环中变量的问题）
js循环函数中的匿名函数和闭包问题(匿名函数要用循环中变量的问题) 一.总结 需要好好看下面代码 本质是因为匿名函数用到了循环中的变量,而普通方式访问的话,匿名函数的访问在循环之后,所以得到的i是循环 ...
- C#添加水印
using System; using System.Data; using System.Configuration; using System.Web; using System.Web.Secu ...
- javascript进阶教程第三章--匿名和闭包--案例实战
javascript进阶教程第三章--匿名和闭包--案例实战 一.学习任务 通过几个小练习回顾学过的知识点 二.实例 练习1: 实例描述:打开页面后规定时间内弹出一个新窗口,新窗口指定时间后自动关闭. ...
- python2.7一步步实现键盘和鼠标检测
由于现在python3的pyHook库还没有很完善: 所以选择了python2.7版本 关于环境的搭建 python2.7 用的是anaconda,直接去官网下载去安装就好用,不需要配置环境变量的, ...
- HDU 1406 完数 因子的和
http://acm.hdu.edu.cn/showproblem.php?pid=1406 完数的定义:如果一个大于1的正整数的所有因子之和等于它的本身,则称这个数是完数,比如6,28都是完数:6= ...
- 交换排序(java)
package exchange_sort; import java.util.Random; /*各类交换排序 * ------数据存储范围1~s.length-1 ------ *主要包含 ...
- js课程 2-7 for-in循环怎么使用
js课程 2-7 for-in循环怎么使用 一.总结 一句话总结:用的是in的作用加上for的作用,相当于一个组合技. 1.js中in运算符的作用是什么? 判断一个元素是否在一个集合或者对象中 1.a ...