移动Web开发框架jqm探讨

移动WEB开发框架
速度效率团队担当
jQuery Mobile
----2011年服务工作规划

2012年2月16日
服务管理部
TCL销司信息管理部
2011年3月28日王勇

Date: 16-Apr-12 Page 1 GPC R&D

目录

一．移动开发平台简介
二．jQueryMobile特点
三．jQueryMobile例子
四．jQueryMobile介绍
五．jQueryMobile事件与配置


一、主流手机Web开发框架

jQuery Mobile (jQ.Mobi)
Sencha Touch
Dojo Mobile
mobl
PhoneGap

参考：开源中国社区>>开源软件 » 分类导航 » 手机/移动开发 » 手机Web开发框架
http://www.oschina.net/project/tag/331/mobile-dev


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提供完全相同用户体验最重
要的那部分。


Sencha Touch

• Sencha Touch是世界上第一个移动Web应用开发框架，支
持HTML5以及CSS3标准。它是extjs整合jqtouch,Raphaël
库(js绘图库)的产物。

• 通过Sencha Touch你可以创建非常像native app的web
app，用户界面组件和数据管理全部基于HTML5和CSS3的
web标准，全面兼容Android和Apple iOS。


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 支持更多的设备

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模拟特效


PhoneGap

• PhoneGap是一款HTML5平台，通过它，开发商可以使用
HTML、CSS及JavaScript来开发本地移动应用程序。因
此，目前开发商可以只编写一次应用程序，然后在6个主
要的移动平台和应用程序商店(app store)里迚行发布，这
些移动平台和应用程序商店包括：iOS、Android、
BlackBerry、webOS、bada以及Symbian。


二、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)

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


三、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>

</head>
<body>
<div data-role=“page”>
<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>

实例----加入其它元素

列表
<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>


效果图


data-role说明


四、jQM介绍----主题Theme

引入主题的方式：<div data-role=‘page’ data-theme=‘b’>


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;


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


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‟>


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)


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"


jQM介绍---- Buttons(1)

 data-role="button“
 <a href="index.html" data-role="button">Link button</a>

 Form buttons----submit,image,reset,button

 可以设置button的图片、图片位置、图片阴影、边框圆
角、风栺等属性


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>


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>

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>

jQM介绍---- Form


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


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>

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>

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>


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>
<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>


jQM 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>


jQM ListView----Count bubble(气泡计数列表)

<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>


jQM ListView----Thumbnails(缩略图列表)

<ul data-role="listview" >
<img src="images/album-bb.jpg" />
<h3>Broken Bells</h3>
<p>Broken Bells</p>
</a</li>
<img src="images/album-hc.jpg" />
<h3>Warning</h3>
<p>Hot Chip</p>
</a</li>
</ul>


jQM ListView----Icons(图标列表)

<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>


jQM ListView----content formartting
<li data-role="list-divider">Friday, October 8, 2010
<span class="ui-li-count">2</span></li>
<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>
<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>

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>


jQM 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>


jQM ListView----list with form


五、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
在页面正在初始化的时候触发(在初始化完成之后).


jQM 事件----触摸事件

• tap
在快速完整的一次触摸后触发该事件.
• taphold
在按住不放后触发该事件(接近一秒钟的时间)
• swipe
在一秒钟的间隑内水平方向上拖动30px以上会触发
该事件，(水平方向上拖动要保持在20px以内，否
则不会触发).
• swipeleft
在左边方向移动时触发该事件.
• swiperight
在右边方向移动时触发该事件.


jQM 事件----方向改变

• orientationchange
当设备的方向改变时触发 (把设备转到垂直或者水平
方向). 你绑定到此事件的回调函数可以有一个第二
参数，该参数包含一个orientation属性，该属性可
以设置为"portrait" 或 "landscape".这些值也被添加
为HTML元素的classes，你也可以在你的css选择器
里指定它们.

要注意，当orientationChange不被支持时我们现目
前将绑定resize事件作为替代.


jQM 事件----滚动

• scrollstart
当滚动开始时触发.要注意的是，IOS设备在滚动时
会禁止DOM操作，并将DOM操作排队，当滚动结
束时才执行这些操作.我们现在正在研究是否能够让
DOM操作在滚动之前执行.

• scrollstop
滚动结束时触发.


jQM 事件----页面隐藏与显示事件

• pagebeforeshow
当page正在被显示但在它的过渡效果开始前触发.
• pagebeforehide
当page正在被隐藏但在它的过渡效果开始前触发.
• pageshow
当page正在被显示但在它的过渡效果结束后触发.
• pagehide
当page正在被隐藏但在它的过渡效果结束后触发.


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的处理交由手工管理。

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


移动Web开发框架jqm探讨

More Related Content

What's hot

Similar to 移动Web开发框架jqm探讨

移动Web开发框架jqm探讨