jQuery Mobile

编辑

jQuery Mobile是jQuery 框架的一个组件(而非jquery的移动版本)。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQuery Mobile开发团队说:能开发这个项目,我们非常兴奋。移动Web太需要一个跨浏览器的框架,让开发人员开发出真正的移动Web网站。

PHP中文网词条详解简单介绍

今天,jQuery 驱动着 Internet 上的大量网站,在浏览器中提供动态用户体验,促使传统桌面应用程序越来越少。现在,主流移动平台上的浏览器功能都赶上了桌面浏览器,因此 jQuery 团队引入了 jQuery Mobile(或 JQM)。JQM 的使命是向所有主流移动浏览器提供一种统一体验,使整个 Internet 上的内容更加丰富 — 不管使用哪种查看设备。

JQM 的目标是在一个统一的 UI 中交付超级 JavaScript 功能,跨最流行的智能手机和平板电脑设备工作。与 jQuery 一样,JQM 是一个在 Internet 上直接托管、免费可用的开源代码基础。事实上,当 JQM 致力于统一和优化这个代码基时,jQuery 核心库受到了极大关注。这种关注充分说明,移动浏览器技术在极短的时间内取得了多么大的发展。

jQuery 核心库一样,您的开发计算机上不需要安装任何东西;只需将各种 *.js 和 *.css 文件直接包含到您的 web 页面中即可。这样,JQM 的功能就好像被放到了您的指尖,供您随时使用。


PHP中文网词条详解基本特性

一般简单性

此框架简单易用。页面开发主要使用标记,无需或仅需很少 JavaScript

优雅降级

尽管 jQuery Mobile 利用最新的 HTML5、CSS3 和 JavaScript,但并非所有移动设备都提供这样的支持。jQuery Mobile 的哲学是同时支持高端和低端设备,比如那些没有 JavaScript 支持的设备,尽量提供最好的体验。

Accessibility

jQuery Mobile 在设计时考虑了访问能力,它拥有 Accessible Rich Internet Applications (WAI-ARIA) 支持,以帮助使用辅助技术的残障人士访问 web 页面。

小规模

jQuery Mobile 框架的整体大小比较小,JavaScript 库 12KB,CSS 6KB,还包括一些图标。

主题设置

此框架还提供一个主题系统,允许您提供自己的应用程序样式。

PHP中文网词条详解浏览器

我们在移动设备浏览器支持方面取得了长足的进步,但并非所有移动设备都支持 HTML5、CSS 3 和 JavaScript。这个领域是 jQuery Mobile 的持续增强和优雅降级支持发挥作用的地方。如前所述,jQuery Mobile 同时支持高端和低端设备,比如那些没有 JavaScript 支持的设备 。持续增强(Progressive Enhancement)包含以下核心原则:

所有浏览器都应该能够访问全部基础内容。

所有浏览器都应该能够访问全部基础功能。

增强的布局由外部链接的 CSS 提供。

增强的行为由外部链接的 JavaScript 提供。

终端用户浏览器偏好应受到尊重。

所有基本内容应该(按照设计)在基础设备上进行渲染,而更高级的平台和浏览器将使用额外的、外部链接的 JavaScript 和 CSS 持续增强。

jQuery Mobile 目前支持以下移动平台: 教程

Apple iOS:iPhone、iPod Touch、iPad(所有版本)

Android:所有设备(所有版本)

Blackberry Torch(版本 6)

Palm WebOS Pre系列、Pixi系列、Veer、TouchPad

Nokia N900(进程中)

Windows Phone 8/8.1/10预览版

PHP中文网词条详解事件

jQuery Mobile 也提供了针对移动端浏览器的事件:

  • 触摸事件 - 当用户触摸屏幕时触发

  • 滑动事件 - 当用户左右滑动时触发

  • 定位事件 - 当设备水平或垂直翻转时触发

  • 页面事件 - 当页面显示,隐藏,创建,加载或未加载时触发

下面的表格列出了所有 jQuery Mobile 事件。

注意:请使用 on() 方法绑定事件。

事件
描述
hashchange
启用可标记 #hash 历史,哈希值会在一次独立的点击时发生时变化,比如一个用户点击后退按钮,会通过 hashchange事件进行处理。
navigate
包裹了 hashchange 和 popstate 的事件
orientationchange
方向改变事件,在用户垂直或者水平旋转移动设备时触发。
pagebeforechange
在页面切换之前,触发的事件。使用$.mobile.changePage()来切换页面,此方法触发2个事件,切换之前的pagebeforechange事件,和切换完成后pagechange(成功)或者pagechangefailed(失败)。
pagebeforecreate
页面初始化时,初始化之前触发。
pagebeforehide
在页面切换后旧页面隐藏之前,触发的事件。
pagebeforeload
在加载请求发出之前触发
pagebeforeshow
在页面切换后显示之前,触发的事件。
pagechange
在页面切换成功后,触发的事件。使用$.mobile.changePage()来切换页面,此方法触发2个事件,切换之前的pagebeforechange事件,和切换完成后pagechange(成功)或者pagechangefailed(失败)。
pagechangefailed
在页面切换失败时,触发的事件。使用$.mobile.changePage()来切换页面,此方法触发2个事件,切换之前的pagebeforechange事件,和切换完成后pagechange(成功)或者pagechangefailed(失败)。
pagecreate
在页面创建成功之后,触发的事件,但增强完成之前。
pagehide
在页面切换后老页面隐藏之后,触发的事件。
pageinit
在页面页面初始化时,触发的事件。
pageload
在页面完全加载成功后触发。
pageloadfailed
如果页面请求失败触发。
pageremove
在窗口视图从 DOM 中移除外部页面之前触发。
pageshow
在过渡动画完成后,在"到达"页面触发。
scrollstart
当用户开始滚动页面时触发。
scrollstop
当用户停止滚动页面时触发。
swipe
当用户在元素上水平滑动时触发。
swipeleft
当用户从左划过元素超过 30px 时触发。
swiperight
当用户从右划过元素超过 30px 时触发。
tap
当用户敲击某元素时触发。
taphold
当元素敲击某元素并保持一秒时触发。
throttledresize
启用可标记 #hash 历史记录
updatelayout
由动态显示/隐藏内容的 jQuery Mobile 组件触发。
vclick
虚拟化的 click 事件处理器
vmousecancel
虚拟化的 mousecancel 事件处理器
vmousedown
虚拟化的 mousedown 事件处理器
vmousemove
虚拟化的 mousemove 事件处理器
vmouseout
虚拟化的 mouseout 事件处理器
vmouseover
虚拟化的 mouseover 事件处理器
vmouseup
虚拟化的 mouseup 事件处理器
参考资料
词条标签:
Mobile   jQuery