jQuery Mobile 构建手机 Web 网站介绍
jQuery Mobile 认知
- jQueryMobile不是jQuery的移动版本
- jQueryMobile是一个jQuery的插件
- jQueryMobile的大小(最小化) jQuery 1.6.2(90k)
jQuery Mobile CSS (44k)
jQuery Mobile JS (71K)
img (<10k)
jQuery Mobile 的作用
- 可以轻松的帮助我们实现非常好看的、可跨设备的Web应用程序。
- jQuery Mobile 开发的web应用像NativeApp
- jQuery Mobile 包含Web应用中的各种常用部件 对话框、表单、列表、按钮、工具条等
- 使用Ajax加载页面,实现炫丽的页面切换效 果
jQuery Mobile 关键特点
- 基于jQuery
- 兼容主流的手机浏览器和桌面浏览器
- 体积小,压缩后20K左右
- HTML5风格的配置
- 页面自动初始化,通过data-role属性自动对页 面部件进行初始化
- 触摸屏和鼠标事件支持
- 丰富的UI部件
- 可扩展的页面样式框架
Hello HTML5
一个最基本的 jQuery Mobile 页面:
<!DOCTYPE html> <html>
<head>
<meta charset="utf-8" />
<title>Hello HTML5</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
</head>
<body>
<div data-role="page"><!-- 从 1.0 Beta2 开始该元素可选-->
<div data-role="header"><h1>Hello HTML5</h1></div><!-- /header -->
<div data-role="content"><p>Page content goes here.</p></div>
<!-- /content -->
<div data-role="footer">
<h4>©开源社区</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
jQuery Mobile 的链接处理方式
- 默认的链接行为:Ajax加载
显示(loading...) - 以下方式禁用Ajax加载链接
ref=‘external’ data-ajax=‘false’ target=‘xxx ’ - 返回链接 data-rel=‘back’
- 其他链接 mailto:xxxx@xxxx.com tel:15555555555 wtai://wp/mc;15555555555 dc:234234234
jQuery Mobile 内置的6种页面主题
引入主题的方式:
<div data-role=‘page’ data-theme=‘b’>
jQuery Mobile 的工具栏/导航条
在 jQuery Mobile 中, 有两种标准类型的工具栏:
- Header bar 充当页面标题的作用, 通常是 mobile page中的第一个元素,一 般包含有一个页面标题和两个按钮。
<div data-role=‘header’>
- Footer bar 通常是最后一个元素,相 比于header在内容和功能上面更加自 由, 但是一般包含一些文字和按钮。
<div data-role=‘footer’>
- 导航条:
<div data- role="navbar">
<ul>
<li> </li>
jQuery Mobile 的按钮
- 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>
- 分组按钮
<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>
jQuery Mobile 的表格 Grid Layout
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>
jQuery Mobile 的可折叠块
<div data-role="collapsible" data-collapsed="true">
<h3>I'm a header</h3>
<p>I'm the collapsible content. By default I'm openand displayed on the page, but you can click the header to hide me.</p>
</div>
jQuery Mobile 表单
- 支持文本框的 placeholder="..." 属性
- 通过 data-ajax="false" 禁用 Ajax 加载
- 通过data-theme让表单使用不同的主题
- 可以使用HTML5新的类型,如email, tel, number 等
- <textarea>会自动根据输入的内容扩展输入 框的高度,避免在手机上麻烦的滚动条
jQuery Mobile 的列表 List View
列表广泛用于数据显示,导航,结果列表,数据项输入等,
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>
jQuery Mobile 的各种不同列表
- 基本列表
- 嵌套列表
- 编号列表
- 只读列表
- 拆分按钮列表
- 列表分隔
- 搜索过滤器
- 气泡计数
- 缩略图和图标
jQuery Mobile 的初始化
mobileinit事件
当jQuery Mobile开始执行的时候, 它会在document对象上触发一个mobileinit 事件
$(document).bind("mobileinit", function(){ //这里是重写的代码
$.mobile.foo = bar;
});
$.mobile 的配置选项
subPageUrlKey (string, default: "ui-page"):
url参数用来引用由插件生成的子页面(例如那些由嵌套的listview生成的子页面) 例如:
example.html&ui-page=subpageIdentifir.
在&ui-page=前的部分被jquery mobile框架 用来向子页面所在的URL发送一个ajax请求.
nonHistorySelectors (string, default: "dialog"):
对于带有data-rel属性值的a标签链接 或者 带有data-role属性值的page,如果它们匹配这些选择器(即该string参数),那么它们不会在历史记录中被追踪 (即它们不会在 location.hash中被更新也不会被浏览器历史所标记).
activePageClass (string, default: "ui-page-active"):
该class被分配给当前视图中的page (包括过渡状态中的)
activeBtnClass (string, default: "ui-page-active"):
该class用于"激活"button的状态 (参见css框架).
ajaxEnabled (boolean, default: true):
当可能的时候jQuery Mobile 会自动通过ajax处理链接点击以及表单提交,如果不行,url hash 监听将会停止,url也会像常规那样发出HTTP 请求.
ajaxLinksEnabled (boolean, default: true):
只要可行的时候,jQuery Mobile 就会自动通过ajax处理链接的点击.
ajaxFormsEnabled (boolean, default: true):
只要可行的时候,jQuery Mobile 就会自动通过ajax处理页面提交.
autoInitialize (boolean, default: true):
当该选项被设置为false时 自动初始化功能将延迟嵌入页面(page)的增强功能直到
$.mobile.initializePage();被显式调用. 默认情况下当DOM加载完毕page将会被增强.
**defaultTransition (string, default: 'slide'): **
设置页面过渡效果(ajax请求),设置为'none'表示没有任何过渡效果.
**loadingMessage (string, default: "loading"): **
设置页面加载时显示的文本. 如果设置为false, 将不会显示任何文本.
metaViewportContent (string, default: "width=device-width, minimum-scale=1, maximum-scale=1"):
配置自动生成的meta标签,如果为false,将不会为DOM添加任何meta标签. gradeA (函数返回boolean值, default: 该函数默认返回 $.support.mediaquery 的值):
浏览器必须符合所有支持的条件才会返回 true.
jQuery Mobile 事件
触摸
在快速完整的一次触摸后触发该事件.
- taphold
在按住不放后触发该事件(接近一秒钟的时间).Triggers after a held complete touch event (close to one second). - swipe 在一秒钟的间隔内水平方向上拖动30px以上会触发该事件,(水平方向 上拖动要保持在20px以内,否则不会触发).
- swipeleft 在左边方向移动时触发该事件.
- swiperight 在右边方向移动时触发该事件..
- tap
方向改变
- orientationchange
当设备的方向改变时触发 (把设备转到垂直或者水 平方向). 你绑定到此事件的回调函数可以有一个 第二参数, 该参数包含一个orientation属性,该 属性可以设置为"portrait" 或 "landscape".这些值也 被添加为HTML元素的classes,你也可以在你的css 选择器里指定它们.
要注意,当orientationChange不被支持时我们现目 前将绑定resize事件作为替代.
滚动
- scrollstart 当滚动开始时触发.要注意的是,IOS设备在滚动时 会禁止DOM操作,并将DOM操作排队,当滚动结 束时才执行这些操作.我们现在正在研究是否能够 让DOM操作在滚动之前执行
- scrollstop 滚动结束时触发.
页面隐藏和显示
- pagebeforeshow
当page正在被显示但在它的过渡效果开始前触发. - pagebeforehide
当page正在被隐藏但在它的过渡效果开始前触发. - pageshow
当page正在被显示但在它的过渡效果结束后触发. - pagehide
当page正在被隐藏但在它的过渡效果结束后触发.
页面初始化
- pagebeforecreate
在页面正在初始化的时候触发(在初始化完成之前). - pagecreate
在页面正在初始化的时候触发(在初始化完成之后).
jQuery Mobile 支持的设备
- 完全支持(A级) 很多,包括iPhone/iPad/iTouch/Android/WP7 以及一些浏览 器的手机版
- 较好支持(B级,无Ajax导航特性)
黑莓5.0/Opera Mini 5-6/Windows Phone 6.5/Symbian^3 - 基本支持(C级,仅基本页面功能可行) 黑莓4.x
- 不支持
Symbian S60/Meego/Bada/Palm WebOS 3.0
jQuery Mobile 的不足
大!
慢!
