利用JQuery Mobile开发web app
什么是web app
web app 是基于web的应用程序，是针对移动设备优化后的web站点，它具有
- 开发成本低——采用web开发技术，不需要考虑跨平台以及底层适配问题；
- 升级简单——不需要通知用户，在服务端更新文件即可；
- 维护方便——本质是站点，所以维护方式于web站点相同
等优点。开发web app使用的技术：前端 html5 ＋ css + JavaScript / 后端 php | java | .net。
随着 html5 的发展，我们能使用越来越多的功能，比如：地理定位、本地数据储存、音视频播放、调用照相机、GPU硬件加速等等。
web app具有原生应用程序特性，同时也具有web应用程序特性。web app能从一个应用，挑转到另外一个web app应用，这样就提高了用户体验。
什么是JQuery Mobile
jQuery Mobile 是创建移动 web 应用程序的框架，是 JQuery在手机上和平板上的一个版本。它适用于所有流行的智能手机和平板电脑，使用 HTML5 和 CSS3 通过尽可能少的脚本对页面进行布局。它屏蔽了浏览器之间的差异，高级的浏览器可以使用高级的样式和功能；对于低级的浏览器能自动降级。
JQM（JQuery Mobile的简写，以下相同）提供了一整套的UI组件（组件的方法与属性）、浏览器的事件以及官方文档。
JQM使用入门
所需的“材料”如下表所示：
| 软件及类库 | 下载地址 |
| JQuery Mobile 类库 | http://jquerymobile.com/download/ |
| JQuery Mobile 官方文档 | http://api.jquerymobile.com/category/all/ |
| JQuery Mobile 官方demo | http://demos.jquerymobile.com/1.4.5/ |
| JQuery Mobile 中文文档 | http://www.jqmapi.com/api1.2/index.html |
文件夹布局
文件夹布局及源文件安排如下图：
头部信息
index.html 的头部信息源代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"" href="jquery.mobile-1.4.5.css">
<script src="jquery.js"></script>
<script src="jquery.mobile-1.4.5.js"></script>
</head>
注意：属性值不加双引号（””）括起来也是可以的。
其中，
<meta name="viewport" content="width=device-width, initial-scale=1">
用来初始化移动设备的屏幕显示：页面宽度等于设备宽度，缩放比例设置为1也就是禁止缩放。
页面
在网页的HTML中，插入如下代码：
<body> <div data-role="page"> <div data-role="header">
<h1>冯煜博的JQM学习</h1>
</div> <div data-role="content">
<p>我是一名自由的开发者！</p>
</div> <div data-role="footer">
<h1>页脚文本</h1>
</div> </div> </body>
效果如下图：
例子中，html代码<div>的属性值释义如下：
- data-role="page" 是显示在浏览器中的页面
- data-role="header" 创建页面上方的工具栏（常用于标题和搜索按钮）
- data-role="content" 定义页面的内容，比如文本、图像、表单和按钮，等等
- data-role="footer" 创建页面底部的工具栏
添加页面
在 jQuery Mobile，可以在单一 HTML 文件中创建多个页面。通过唯一的 id 来分隔每张页面，并使用 href 属性来连接彼此，完整的<body>示例代码如下：
<body> <div data-role="page" id="index">
<div data-role="header">
<h1>冯煜博的JQM学习</h1>
</div> <div data-role="content">
<p>我是一名自由的开发者！</p>
<a href="#pagetwo">转到页面一</a>
</div> <div data-role="footer">
<h1>页脚文本</h1>
</div>
</div> <div data-role="page" id="pagetwo">
<div data-role="content">
<a href="#index">转到页面一</a>
</div>
</div> </body>
显示的效果及页面间跳转如下图：
点击连接后，跳转如下图：
页面事件
JQuery Mobile拥有许多页面事件，从w3school事件文档截取如下表：
Page initialization - 在页面创建前、当页面创建时、页面初始化之后
| pagebeforecreate | 在页面创建前触发。 |
| pagecreate | 在页面创建时触发，还未加载页面元素。 |
| pageinit | 当页面已经初始化完成时触发。 |
Page Load/UnLoad - 当外部页面加载时、卸载时或遭遇失败时
| pageload | 在页面成功加载并插入 DOM 后触发。 |
| pagebeforeload | 在作出任何加载请求之前触发。 |
Page Transition - 在页面过渡之前和之后
| pagebeforeshow | “去的页面”之前，过渡动画开始之前触发。页面2 |
| pagebeshow | “去的页面”开始加载，过渡动画完成之后触发。页面2 |
| pagebeforehide | “来的页面”触发，过渡动画开始前触发。页面1 |
| pagehide | “来的页面”触发，过渡动画完成后触发。页面1 |
举个例子
<div data-role="page" id="index">
<div data-role="header">
<h1>冯煜博的JQM学习</h1>
</div> <div data-role="content">
<p>我是一名自由的开发者！</p>
<a href="#pagetwo">转到页面一</a>
</div> <div data-role="footer">
<h1>页脚文本</h1>
</div>
</div>
<script>
$(document).on("pageinit", "#index", function(){
alert("pageinit 被触发");
});
</script>
JQM可以实现复杂列表
详情可以参阅w3school列表内容文档
JQM表格
表格的代码如下：
<table data-role="table" id="movie-table" data-mode="reflow" class="ui-responsive">
<thead>
<tr>
<th>表标题1</th>
<th>表标题2</th>
<th>表标题3</th>
</tr>
</thead>
<tbody>
<td>表元素1</td>
<td>表元素2</td>
<td>表元素3</td>
</tbody>
</table>
更多示例及代码，详见JQuery Mobile官方Demo之table
JQM事件
绑定方法
在JQuery中，绑定事件的方法使用 ready() 。
$(document).ready(function(){
//此处是JQuery事件
});
在JQuery Mobile中，推荐使用 on() 方法绑定事件。
$(document).on("pageinit", "#page", function(){
//当页面已经初始化并且完善样式后发生。
});
绑定示例
在页面中，我们有一个列表（ul/ol）。
<ul data-role="listview" data-inset="true" id="list">
<li><a href="#">i am a</a></li>
</ul>
为了给其中的<a>添加单击事件，我们做如下操作：
$(document).on("pageinit", "#index", function(){
$("#list").on("click", "a",
function(){
//事件体
alert("you click a!");
});
});
这是一种方法，也可以另一种：
$(document).on("pageinit", "#index", function(){
$("#list").on("click", "a",fun);
});
var fun = function(){
alert("i am a");
}
常用函数
setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式——w3school文档。
//写法一
setTimeout("alert('3 seconds!')",3000)
//写法二
setTimeout(function(){
alert("3 seconds");
}, 3000);
方法声明
推荐使用第一种方法声明一个函数：
var 函数名称 = function(){
//方法体
}
不建议使用第二种方法声明一个函数：
function 函数名称(){
//方法体
}
动态刷新
对于如下代码，我们希望加入新的一行（<li><a href="#">i am a</a></li>）
<ul data-role="listview" data-inset="true" id="list">
<li><a href="#">i am a</a></li>
</ul>
于是我们调用该方法：
$("#list").append("<li><a href=\"#\">i am a</a></li>");
但是显示的效果不尽如人意，如下图。
其实，我们应该多加入一行JQuery代码，使脚本刷新样式。完整的添加元素代码如下：
$("#list").append("<li><a href=\"#\">i am a</a></li>");
$("#list").listview("refresh"); //刷新样式必备
参考资料
http://www.imooc.com/learn/207
http://www.w3school.com.cn/jquerymobile/
利用JQuery Mobile开发web app的更多相关文章
- html5文章 -- 使用 jQuery Mobile 与 HTML5 开发 Web App ——开发原则 | Kayo's Melody
最近专注研究 jQuery Mobile —— 一款很方便就可以把 Web App 包装成适合 Android 与 iPhone 等触屏移动设备的 Javascript 库,结合 jQuery Mob ...
- [转]使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 事件详解
在前文<使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 默认配置与事件基础>中,Kayo 对 jQuery Mobile 事件的基 ...
- html5文章 -- 使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 基础
这篇文章是使用 jQuery Mobile 与 HTML5 开发 Web App 系列的第二篇,在本文以及接下来的数篇文章 Kayo 将会介绍 jQuery Mobile 的组件.事件响应以及可以调用 ...
- 使用 jQuery Mobile 与 HTML5 开发 Web App 系列文章目录
使用 jQuery Mobile 与 HTML5 开发 Web App 系列文章目录 时间:2012年9月20日 分类:JavaScript 标签:HTML5‚ jQuery Mobile‚ Web ...
- 经典收藏 50个jQuery Mobile开发技巧集萃
http://www.cnblogs.com/chu888chu888/archive/2011/11/10/2244181.html 1.Backbone移动实例 这是在Safari中运行的一款Ba ...
- (转)经典收藏 50个jQuery Mobile开发技巧集萃
(原)http://www.cnblogs.com/chu888chu888/archive/2011/11/10/2244181.html 经典收藏 50个jQuery Mobile开发技巧集萃 ...
- 18个jQuery Mobile开发贴士和教程
jQuery Mobile 是 jQuery 在手机上和平板设备上的版本.jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架.支持 ...
- HTML5+CSS3+jQuery Mobile轻松构造APP与移动网站 (陈婉凌) 中文pdf扫描版
<HTML5+CSS3+jQuery Mobile轻松构造APP与移动网站>以HTML与CSS为主,配合jQuery制作网页,并搭配jQueryMobile制作移动网页,通过具体的范例从基 ...
- 亲手使用Sencha Touch + phonepag开发Web APP随笔 -- 第一个APP
参考博文: [Phonegap+Sencha Touch] 移动开发1.准备工作 [Phonegap+Sencha Touch] 移动开发2.PhoneGap/Cordova初步使用 经过差不多1 ...
随机推荐
- JAVA生成六位随机数
public static String getSixNum() { String str = "0123456789"; StringBuilder sb = new Strin ...
- Eclipse + Maven 安装配置
1. 下载 http://maven.apache.org/download.cgi 2. 解压 3. 配置环境变量 MAVEN_HOME = D:\Software\apache-maven-3.5 ...
- C#中，使用正则表达式匹配获取所需数据
.NET中,使用正则表达式匹配获取所需数据 需求:获取一串字符串中,正则匹配出需要的数据. 例如以下字符串: string temp ="ErrorCode:-1,Message:{&quo ...
- PO模型
大神绕道而行,自我小白的笔记,仅此 一.创建文件夹,创建xxx.ini文件用来存放界面的定位元素,用 [界面_element]-->界面, 来划分界面界面元素,维护方便.定位元素的格式: us ...
- 阿里云云盾服务证书免费CA证书申请与配置 （原）
申请入口(首页导航产品->安全->CA证书服务->立即购买) 免费版选择步骤一步一步来 1.品牌选 Symantec 2.保护类型选择 一个域名(免费版只能一个好像) 3.证书类型选 ...
- Cacti的使用
前期准备 SNMP的安装,控制机和被控机,以及被控机的配置 1.SNMP的安装参考:http://www.cnblogs.com/smallcoderhujin/p/3785731.html 2.被控 ...
- Maven的作用、用途、内涵、愿景
maven被许多人认为是一个构建工具.许多人最初是从熟悉ant而转到maven的,因此很自然地这样认为maven是一个构建工具.但是maven并不仅仅是一个构建工具,也不是ant的一个替代工具.mav ...
- sqoop从hive导入数据到mysql时出现主键冲突
今天在将一个hive数仓表导出到mysql数据库时出现进度条一直维持在95%一段时间后提示失败的情况,搞了好久才解决.使用的环境是HUE中的Oozie的workflow任何调用sqoop命令,该死的o ...
- 以太坊智能合约介绍，Solidity介绍
以太坊智能合约介绍,Solidity介绍 一个简单的智能合约 先从一个非常基础的例子开始,不用担心你现在还一点都不了解,我们将逐步了解到更多的细节. Storage contract SimpleSt ...
- PyCharm 2017.2.3 版本在2017年9月7日发布，支持 Docker Compose
PyCharm是由JetBrains打造的一款Python IDE.PyCharm具备用于一般IDE的功能,比如, 调试.语法高亮.Project管理.代码跳转.智能提示.自动完成.单元测试.版本控制 ...