More Related Content Similar to 移动Web开发框架jqm探讨 Similar to 移动Web开发框架jqm探讨 (20) 1. 移动WEB开发框架
速度 效率 团队 担当
jQuery Mobile
----2011年服务工作规划
2012年2月16日
服务管理部
TCL销司 信息管理部
2011年3月28日 王勇
Date: 16-Apr-12 Page 1 GPC R&D
2. 目录
一．移动开发平台简介
二．jQueryMobile特点
三．jQueryMobile例子
四．jQueryMobile介绍
五．jQueryMobile事件与配置
Date: 16-Apr-12 Page 2 GPC R&D
3. 一、主流手机Web开发框架
jQuery Mobile (jQ.Mobi)
Sencha Touch
Dojo Mobile
mobl
PhoneGap
参考：开源中国社区>>开源软件 » 分类导航 » 手机/移动开发 » 手机Web开发框架
http://www.oschina.net/project/tag/331/mobile-dev
Date: 16-Apr-12 Page 3 GPC R&D
4. jQuery Mobile And jQ.Mobi
• jQuery Mobile 是 jQuery 在手机上和平板设备上的版本。
jQuery Mobile 不仅会给主流移动平台带来jQuery核心库，
而且会发布一个完整统一的jQuery移动UI框架。支持绝大
部分的移动平台。
• jQ.Mobi是jQuery的部分重写版本，但针对HTML5和移动设
备做了优化。它的文件大小只有3KB，而jQuery则有35KB，
并且据JSPerf test的数据，它在Android上要比jQuery快3
倍，在iOS上快2.2倍。该框架是由appMobi发布并开源的。
因为jQ.Mobi是插件式开发，所以它的编程语法和jQuery完
全相同。jQ.Mobi只包含jQuery API的子集，也就是
appMobi认为给iOS和Android提供完全相同用户体验最重
要的那部分。
Date: 16-Apr-12 Page 4 GPC R&D
5. Sencha Touch
• Sencha Touch是世界上第一个移动Web应用开发框架，支
持HTML5以及CSS3标准。它是extjs整合jqtouch,Raphaël
库(js绘图库)的产物。
• 通过Sencha Touch你可以创建非常像native app的web
app，用户界面组件和数据管理全部基于HTML5和CSS3的
web标准，全面兼容Android和Apple iOS。
Date: 16-Apr-12 Page 5 GPC R&D
6. jQuery Mobile vs Sencha Touch
jQuery Mobile Sencha Touch
jQM只是一个 UI 库，依赖于 jQuery 这是一个独立的库，包括 UI 部
和 jQuery UI 的 DOM 操作、Ajax 件、DOM 操作、Ajax 以及其他
和其他库 无需依赖其他库
为了创建 UI 部件，你只需要编写 采用以 JavaScript 为核心的方
HTML 即可， jQM会对这些 HTML 法，基本上不需要写 HTML
元素迚行修饰 提供大的对象模型，提供更多的
可方便的重用已有的 HTML 代码 功能，但是学习周期很长
一些简单的应用直接用 HTML 即可 统一的编程代码结构和要求，良
实现，无需 JavaScript 好组织的代码易于维护
jQM具有相对小的对象模型，可以 提供内置的服务器和本地存储的
快速轻松学习，特别是他是一个 抽象层，可在关系数据基础上轻
jQuery 的插件 松执行 CRUD 操作。
jQM对代码没有特定的要求，这可 提供内置的工具用于创建 iOS 和
能是非常灵活的，但维护难度也加 Android 本地运行的程序
大 比 jQM支持的设备要少
易于和其他框架迚行集成
比 Sencha Touch 支持更多的设备
Date: 16-Apr-12 Page 6 GPC R&D
7. Dojo Mobile
• Dojo Mobile 框架是一套移动终端的Web应用开发框架，是
Dojo 的一个子项目。Dojo Mobile主要面向手持设备上的
Web富客服端应用开发，提供了iPhone和android两套主
题，使得基于iPhone或者Android的Web应用具有手机本地
应用的外观和效果，而同时也给了开发者更多的主导权。
• 特点
轻量级，dojo mobile框架在压缩之后仅有100k，在同类js框架中算
是体积相当小的，对移动设备来说十分合适。
大量使用CSS3实现iPhone和Android本地程序的特效，动画效果
流畅
跨浏览器平台，dojo mobile同时也支持非webkit内核的手机浏览
器，使用dojo自带的dojo.animateProperty与dojox.gfx模拟特效
Date: 16-Apr-12 Page 7 GPC R&D
8. PhoneGap
• PhoneGap是一款HTML5平台，通过它，开发商可以使用
HTML、CSS及JavaScript来开发本地移动应用程序。因
此，目前开发商可以只 编写一次应用程序，然后在6个主
要的移动平台和应用程序商店(app store)里迚行发布，这
些移动平台和应用程序商店包括：iOS、Android、
BlackBerry、webOS、bada以及Symbian。
Date: 16-Apr-12 Page 8 GPC R&D
9. 二、jQuery Mobile Key Features
• 一个统一的UI系统，能够平滑的在各种流行移动设备上使
用，基于可靠的jQuery以及jQuery UI；
• 基于jQuery核心构建；
• 技术理论jQuery、WebKit、HTML5、CSS3、JS；
• 适用所有主要的手机、平板、e-reader和桌面平台；
• 标准组件结构；
• 强大的基于Ajax的导航系统；
• 无障碍网页应用(WAI-ARIA)
• 触摸屏和鼠标事件支持；
• 统一的UI风栺；
• 强大的主题框架；
• jQuery Mobile 的大小(v1.0.1)
jQuery 1.6.4 (90k)
jQuery Mobile CSS (49k)
jQuery Mobile JS (82K)
img (<10k)
Date: 16-Apr-12 Page 9 GPC R&D
10. jQuery Mobile设备支持
Apple iOS 3.2-5.0
Android 2.1-2.3、3.1、4.0
Windows Phone 7-7.5
Blackberry 6.0、7
Blackberry Playbook (1.0-2.0) - Tested on PlayBook
Palm WebOS (1.4-2.0) - Tested on the Palm Pixi (1.4), Pre (1.4), Pre 2 (2.0)
Palm WebOS 3.0 - Tested on HP TouchPad
Firebox Mobile (10 Beta) - Tested on Android 2.3 device
Opera Mobile 11.5: Tested on Android 2.3
Meego 1.2 - Tested on Nokia 950 and N9
Samsung Bada 2.0 - Tested on a Samsung Wave 3, Dolphin browser
UC Browser - Tested on Android 2.3 device
Kindle 3 and Fire - Tested on the built-in WebKit browser for each
Chrome Desktop 11-17 - Tested on OS X 10.6.7 and Windows 7
Firefox Desktop 4-10 - Tested on OS X 10.6.7 and Windows 7
Internet Explorer 7-9 - Tested on Windows XP, Vista and 7
Opera Desktop 10-11 - Tested on OS X 10.6.7 and Windows 7
Date: 16-Apr-12 Page 10 GPC R&D
11. 三、jQM实例----quick start
一个最基本的 jQuery Mobile 页面：
<!DOCTYPE html> <!—必须要HTML5的文档声明格式-->
<html>
<head>
<title>Hello HTML5</title>
<meta charset=“utf-8” /> <!—避免中文问题-->
<meta name=“viewport” content=“width=device-width, initial-scale=1”> <!—自适应屏幕大小
-->
<link rel="stylesheet" href="//code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="//code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="//code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<!--注意顺序，推荐CDN方式-->
</head>
<body>
<div data-role=“page”><!--注意以data-开头的属性.一个页面可以有多个page容器，用id区分
-->
<div data-role="header"><h1>Hello HTML5</h1></div>
<div data-role="content"><p>Page content goes here.</p></div>
<div data-role=“footer”><h4>©TCL销售公司</h4></div
</div>
</body>
</html>
Date: 16-Apr-12 Page 11 GPC R&D
12. 实例----加入其它元素
列表
<ul data-role="listview" data-inset="true" data-filter="true">
<li><a href="#">Acura</a></li>
<li><a href="#">Audi</a></li>
<li><a href="#">BMW</a></li>
<li><a href="#">Cadillac</a></li>
<li><a href="#">Ferrari</a></li>
</ul>
按钮
<a href="#" data-role="button" data-icon="star">Star button</a>
按钮风栺
<a href="#" data-role="button" data-icon="star" data-theme="a">Button</a>
Date: 16-Apr-12 Page 12 GPC R&D
16. jQM介绍---- 链接
默认链接方式都是AJAX方式；(会显示loading……)
以下方式禁止ajax方式加载链接：
• rel="external“
• data-ajax="false"
• target =„xxx‟
返回链接 data-rel=„back‟ （data-direction="reverse"）
如果通过被加载的页面有多个page，需要禁用ajax方式
链接到目录，需要在最后面加”/”
其他链接：
• data-rel=„dialog‟
• mailto:xx@tcl.com?cc=xy@tcl.com&bcc=&subject=&body=
• tel:13927328867 or wtai://wp/mc;15555555555 or dc:234*234*234
• a href = “#” return false;
Date: 16-Apr-12 Page 16 GPC R&D
17. jQM介绍---- Dialog
data-rel=“dialog”
默认pop形式的显示风栺；
可以增加data-transaction属性；
默认情况下，在dialog中打开连接，会自动关闭。
增加cancel按钮，使用data-rel=“back”
<a href=“#” data-role=“button” data-rel=“back”>cancel</a>
调用close()方法：$('.ui-dialog').dialog('close')
$.mobile.dialog.prototype.options.closeBtnText
data-close-btn-text
Date: 16-Apr-12 Page 17 GPC R&D
18. jQM介绍----工具栏
Header bar 充当页面标题的作用, 通常是
mobile page中的第一个元素，一般包含
有一个页面标题和两个按钮。
<div data-role=„header‟>
导航条：<div data-role="navbar">
<ul>
<li>…</li>
<li>…</li>
</ul>
</div>
Footer bar 通常是最后一个元素，相比
于header在内容和功能上面更加自由，
但是一般包含一些文字和按钮。 <div
data-role=„footer‟>
Date: 16-Apr-12 Page 18 GPC R&D
19. jQM介绍----navbar
<div data-role="navbar">
<ul>
<li><a href="a.html" class="ui-btn-active">One</a></li>
<li><a href="b.html">Two</a></li>
<li><a href="b.html">Three</a></li>
</ul>
</div>
如果大于5个条目，则会自动显示为多行；
如果只有1个条目，默认显示为100%；
根据需要，可以把导航增加到header或者footer中；
data-iconpos="top“ (bottom,left,right)
Date: 16-Apr-12 Page 19 GPC R&D
20. jQM工具栏(3)--position
Fixed Toolbar
默认是inline模式
data-position="fixed“
$.mobile.fixedToolbars.setTouchToggleEnabled(fal
se)
touchOverflowEnabled
FullScreen Fixed Toolbar
在page容器属性中增加data-fullscreen=“true“，同时增
加data-position="fixed"
Date: 16-Apr-12 Page 20 GPC R&D
21. jQM介绍---- Buttons(1)
data-role="button“
<a href="index.html" data-role="button">Link button</a>
Form buttons----submit,image,reset,button
可以设置button的图片、图片位置、图片阴影、边框圆
角、风栺等属性
Date: 16-Apr-12 Page 21 GPC R&D
22. jQM介绍---- Buttons(2)
1. inline按钮（多个按钮放置一行）
<div data-inline="true">
<a href="index.html" data-role="button">Cancel</a>
<a href="index.html" data-role="button" data-theme="b">Save</a>
</div>
默认情况下，一个按钮是一行，inline模式下，按钮长度随内容变化
2. grouped按钮
<div data-role="controlgroup“ data-type="horizontal">
<a href="index.html" data-role="button">Yes</a>
<a href="index.html" data-role="button">No</a>
<a href="index.html" data-role="button">Maybe</a>
</div>
Date: 16-Apr-12 Page 22 GPC R&D
23. jQM介绍---- Grid
jQuery Mobile 自带 2 ~ 5 列的表栺，分别是：class=ui-grid-a/b/c/d
示例：
<div class="ui-grid-b">
<div class="ui-block-a"><div class="ui-bar ui-bar-e">A</div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-e">B</div></div>
<div class="ui-block-c"><div class="ui-bar ui-bar-e">C</div></div>
<div class="ui-block-a"><div class="ui-bar ui-bar-e">A</div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-e">B</div></div>
<div class="ui-block-c"><div class="ui-bar ui-bar-e">C</div></div>
<div class="ui-block-a"><div class="ui-bar ui-bar-e">A</div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-e">B</div></div>
<div class="ui-block-c"><div class="ui-bar ui-bar-e">C</div></div>
</div><!-- /grid-c -->
Date: 16-Apr-12 Page 23 GPC R&D
24. jQM介绍---- Collapside(折叠块)
<div data-role="collapsible">
<h3>I'm a header</h3>
<p>I'm the collapsible content. By default I'm
closed, but you can click the header to open me.</p>
</div>
<div data-role="collapsible-set">
<div data-role="collapsible" data-collapsed="false">
<h3>Section 1</h3>
<p>I'm the collapsible set content for section B.</p>
</div>
<div data-role="collapsible">
<h3>Section 2</h3>
<p>I'm the collapsible set content for section B.</p>
</div>
</div>
Date: 16-Apr-12 Page 24 GPC R&D
26. jQM介绍---- Form说明
支持文本框的 placeholder=“…” 属性
ui-hidden-accessible
disable (ui-disabled) enable
元素自动初始化。data-role=“none”阻止自动初始化
通过 data-ajax=“false” 禁用 Ajax 加载
通过 data-theme 让表单使用不同的主题
可以使用HTML5新的类型，如email, tel, number 等
<textarea> 会自动根据输入的内容扩展输入框的高度，避免
在手机上麻烦的滚动条
Search inputs
Flip toggle switch
Date: 16-Apr-12 Page 26 GPC R&D
27. jQM介绍---- ListView基础
data-role="listview“
列表广泛用于数据显示，导航，结果列表，数据项输入等，
jQuery Mobile包含了许多不同 列表类型和栺式化的例子来
覆盖大部分的设计需求。
<!-- 一个最基本的列表 -->
<ul data-role="listview" data-theme="g">
<li><a href="acura.html">Acura</a></li>
<li><a href="audi.html">Audi</a></li>
<li><a href="bmw.html">BMW</a></li>
</ul>
Date: 16-Apr-12 Page 27 GPC R&D
28. jQM ListView----嵌套列表
<ul data-role="listview">
<li>
<h3>Animals</h3><p>...</p>
</li>
<li>
<h3>Colors</h3>
<p>Fresh colors from the magic rainbow.</p>
<ul>
<li><a href="#">Blue</a></li>
<li><a href="#">Green</a></li>
<li><a href="#">Orange</a></li>
<li><a href="#">Purple</a></li>
<li><a href="#">Red</a></li>
<li><a href="#">Yellow</a></li>
<li><a href="#">Violet</a></li>
</ul>
</li>
<li>
<h3>Vehicles</h3><p>...</p>
</li>
</ul>
Date: 16-Apr-12 Page 28 GPC R&D
29. jQM ListView----数字列表
<div class="content-primary">
<ol data-role="listview">
<li><a href="index.html">The Godfather</a></li>
<li><a href="index.html">Inception</a></li>
<li><a href="index.html">The Good, …</a></li>
<li><a href="index.html">Pulp Fiction</a></li>
<li><a href="index.html">Schindler's List</a></li>
<li><a href="index.html">12 Angry Men</a></li>
<li><a href="index.html">One Flew …</a></li>
<li><a href="index.html">Star Wars: …</a></li>
<li><a href="index.html">The Dark Knight</a></li>
</ol>
</div>
Date: 16-Apr-12 Page 29 GPC R&D
30. jQM ListView----split button listview(拆分按钮列表)
<ul data-role="listview" data-split-icon="gear" data-
split-theme="d">
<li><a href="index.html">
<img src="images/album-bb.jpg" />
<h3>Broken Bells</h3>
<p>Broken Bells</p>
</a><a href="lists-split-purchase.html" data-
rel="dialog" data-transition="slideup">Purchase album
</a></li>
<li><a href="index.html">
<img src="images/album-hc.jpg" />
<h3>Warning</h3>
<p>Hot Chip</p>
</a><a href="lists-split-purchase.html" data-
rel="dialog" data-transition="slideup">Purchase album
</a></li>
</ul>
Date: 16-Apr-12 Page 30 GPC R&D
31. jQM ListView----分组列表
<ul data-role="listview">
<li data-role="list-divider">A</li>
<li><a href="index.html">Adam Kinkaid</a></li>
<li><a href="index.html">Avery Johnson</a></li>
<li data-role="list-divider">B</li>
<li><a href="index.html">Bob Cabot</a></li>
<li data-role="list-divider">C</li>
<li><a href="index.html">Caleb Booth</a></li>
<li><a href="index.html">Culver James</a></li>
<li data-role="list-divider">D</li>
<li><a href="index.html">David Walsh</a></li>
<li><a href="index.html">Drake Alfred</a></li>
</ul>
Date: 16-Apr-12 Page 31 GPC R&D
32. jQM ListView----Count bubble(气泡计数列表)
<ul data-role="listview">
<li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
<li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
<li><a href="index.html">Drafts <span class="ui-li-count">4</span></a></li>
<li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
<li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li>
</ul>
Date: 16-Apr-12 Page 32 GPC R&D
33. jQM ListView----Thumbnails(缩略图列表)
<ul data-role="listview" >
<li><a href="index.html">
<img src="images/album-bb.jpg" />
<h3>Broken Bells</h3>
<p>Broken Bells</p>
</a</li>
<li><a href="index.html">
<img src="images/album-hc.jpg" />
<h3>Warning</h3>
<p>Hot Chip</p>
</a</li>
</ul>
Date: 16-Apr-12 Page 33 GPC R&D
34. jQM ListView----Icons(图标列表)
<ul data-role="listview">
<li>
<a href="index.html">
<img src="images/gf.png" alt="France" class="ui-li-icon">France
<span class="ui-li-count">4</span></a></li>
<li>
<a href="index.html">
<img src="images/de.png" alt="Germany" class="ui-li-icon">Germany
<span class="ui-li-count">4</span></a></li>
</ul>
Date: 16-Apr-12 Page 34 GPC R&D
35. jQM ListView----content formartting
<ul data-role="listview">
<li data-role="list-divider">Friday, October 8, 2010
<span class="ui-li-count">2</span></li>
<li><a href="index.html">
<h3>Stephen Weber</h3>
<p><strong>You„ve been invited to a …</strong></p>
<p>Hey Stephen, if you're available at 10am….</p>
<p class="ui-li-
aside"><strong>6:24</strong>PM</p>
</a></li>
<li><a href="index.html">
<h3>jQuery Team</h3>
<p><strong>Boston Conference
Planning</strong></p>
<p>In preparation for the upcoming …</p>
<p class="ui-li-
aside"><strong>9:18</strong>AM</p>
</a></li>
<li data-role="list-divider">Thursday, October 7, 2010
<span class="ui-li-count">1</span></li>
</ul>
Date: 16-Apr-12 Page 35 GPC R&D
36. jQM ListView----search filter bar listview
<ul data-role="listview" data-filter="true">
<li><a href="index.html">Acura</a></li>
<li><a href="index.html">Audi</a></li>
<li><a href="index.html">BMW</a></li>
<li><a href="index.html">Cadillac</a></li>
<li><a href="index.html">Chrysler</a></li>
<li><a href="index.html">Dodge</a></li>
<li><a href="index.html">Ferrari</a></li>
<li><a href="index.html">Volkswagon</a></li>
<li><a href="index.html">Volvo</a></li>
</ul>
data-inset=“true“
data-filter-placeholder=”Search people...”
还可以与分组组合在一起使用
可以搜索隐藏内容
<li data-filtertext="NASDAQ:AAPL Apple Inc."><a
href="#">Apple</a></li>
Date: 16-Apr-12 Page 36 GPC R&D
37. jQM ListView----只读列表
<ul data-role="listview">
<li>Acura</li>
<li>Audi</li>
<li>BMW</li>
<li>Cadillac</li>
<li>Ferrari</li>
</ul>
<ul data-role="listview"
data-inset="true">
<li>Acura</li>
<li>Audi</li>
<li>BMW</li>
<li>Cadillac</li>
<li>Ferrari</li>
</ul>
Date: 16-Apr-12 Page 37 GPC R&D
39. 五、jQM 事件----页面初始化
• mobileinit
当jQuery Mobile开始执行的时候， 它会在document对象上触发一个
mobileinit 事件，可以在其中设置全局变量，修改默认的设定属性值等
$(document).bind("mobileinit"， function(){
$.mobile.foo = bar;
});
因为本事件是在jQM执行的时候立即触发，所以，推荐用如下的栺式引入自
己的脚本：
<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>
• pagebeforecreate
在页面正在初始化的时候触发(在初始化完成之前).
• pagecreate
在页面正在初始化的时候触发(在初始化完成之后).
Date: 16-Apr-12 Page 39 GPC R&D
40. jQM 事件----触摸事件
• tap
在快速完整的一次触摸后触发该事件.
• taphold
在按住不放后触发该事件(接近一秒钟的时间)
• swipe
在一秒钟的间隑内水平方向上拖动30px以上会触发
该事件，(水平方向上拖动要保持在20px以内，否
则不会触发).
• swipeleft
在左边方向移动时触发该事件.
• swiperight
在右边方向移动时触发该事件.
Date: 16-Apr-12 Page 40 GPC R&D
41. jQM 事件----方向改变
• orientationchange
当设备的方向改变时触发 (把设备转到垂直或者水平
方向). 你绑定到此事件的回调函数可以有一个第二
参数， 该参数包含一个orientation属性，该属性可
以设置为"portrait" 或 "landscape".这些值也被添加
为HTML元素的classes，你也可以在你的css选择器
里指定它们.
要注意，当orientationChange不被支持时我们现目
前将绑定resize事件作为替代.
Date: 16-Apr-12 Page 41 GPC R&D
42. jQM 事件----滚动
• scrollstart
当滚动开始时触发.要注意的是，IOS设备在滚动时
会禁止DOM操作，并将DOM操作排队，当滚动结
束时才执行这些操作.我们现在正在研究是否能够让
DOM操作在滚动之前执行.
• scrollstop
滚动结束时触发.
Date: 16-Apr-12 Page 42 GPC R&D
43. jQM 事件----页面隐藏与显示事件
• pagebeforeshow
当page正在被显示但在它的过渡效果开始前触发.
• pagebeforehide
当page正在被隐藏但在它的过渡效果开始前触发.
• pageshow
当page正在被显示但在它的过渡效果结束后触发.
• pagehide
当page正在被隐藏但在它的过渡效果结束后触发.
Date: 16-Apr-12 Page 43 GPC R&D
44. jQM $.mobile 的配置选项(1)
• ns (string, default: ""):
在数据属性中使用的命名空间，默认空，表示是data
• autoInitializePage (boolean, default: true):
当DOM准备好之后，框架会自动调用$.mobile.initializePage，如果返回false，页面
不会初始化，会隐藏直到$.mobile.initializePage被手工调用。
• subPageUrlKey (string， default: "ui-page"):
用来引用由插件生成的子页面的url参数(例如那些由嵌套的listview生成的子页面) 例
如: example.html&ui-page=subpageIdentifir. 在&ui-page=前的部分被jquery mobile框架
用来向子页面所在的URL发送一个ajax请求.
• activePageClass (string， default: "ui-page-active"):
该class被分配给当前视图中的page
• activeBtnClass (string， default: "ui-page-active"):
该class用于"激活"button的状态
• ajaxEnabled (boolean， default: true):
当可能的时候jQuery Mobile 会自动通过ajax处理链接点击以及表单提交， 如果不行
，url hash 监听将会停止，url也会像常规那样发出HTTP 请求.
• linkBindingEnabled (boolean, default: true):
jQM会自动绑定链接上的点击事件，设置这个参数为false，则会阻止所有的锚链点击
处理。一般不用
• hashListeningEnabled (boolean, default: true):
jQM会自动监听并处理location.hash(放历史记录页面的东西)的改变，设置这个参数
为false，则表示hash的处理交由手工管理。
Date: 16-Apr-12 Page 44 GPC R&D
45. jQM $.mobile 的配置选项(2)
• pushStateEnabled (boolean, default: true):
增强支持使用history.replaceState的浏览器，转变基于hash的ajax请求URL为全文档
路径。注意，如果禁用了ajax，或者有大量的外部链接的情况下，建议设置本属性值
为false。
• defaultPageTransition (string, default: 'slide'):
ajax请求的时候，默认的Page出现方式，设置为none则表示没有默认效果
• touchOverflowEnabled (boolean, default: false):
使页面平滑过渡，并且，在支持overflow:以及overflow-scrolling: touch;的CSS属性
的设备上实现真正的Fixed toolbar
• defaultDialogTransition (string, default: 'pop'):
ajax请求的时候，默认的Dialog出现方式，设置为none则表示没有默认效果
• minScrollBack (string, default: 250):
返回某个页面的时候，记住的最小滚动距离
• loadingMessage (string, default: "loading"):
设置页面加载时显示的文本. 如果设置为false， 将不会显示任何文本.
• pageLoadErrorMessage (string, default: "Error Loading Page"):
页面通过ajax加载出错的时候，显示的信息。
• gradeA
(返回boolean值的函数, default: 该函数默认返回$.support.mediaquery的值):
浏览器必须符合所有支持的条件才会返回 true
Date: 16-Apr-12 Page 45 GPC R&D
