jQuery Mobile是jQuery 框架的一个组件(而非jquery的移动版本)。jQuery Mobile是一款基于HTML5的用户界面系统,旨在使所有智慧型手机,平板电脑和桌面设备上都可以访问的回响网站和套用。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQuery Mobile开发团队说能开发这个项目,我们非常兴奋。移动Web太需要一个跨浏览器的框架,让开发人员开发出真正的移动Web网站。
基本介绍
- 中文名jQuery Mobile
- 平台移动端
- 用途给主流移动平台带来jQuery核心库
- 特点促使传统桌面应用程式越来越少
简单介绍
jQuery 驱动着 Internet 上的大量网站,在浏览器中提供动态用户体验,促使传统桌面应用程式越来越少。主流移动平台上的浏览器功能都赶上了桌面浏览器, jQuery 团队引入了 jQuery Mobile(或 JQM)。JQM 的使命是向所有主流移动浏览器提供一种统一体验,使整个 Internet 上的内容更加丰富 — 不管使用哪种查看设备。
JQM 的目标是在一个统一的 UI 中交付超级 JavaScript 功能,跨最流行的智慧型手机和平板电脑设备工作。与 jQuery 一样,JQM 是一个在 Internet 上直接託管、免费可用的开原始码基础。事实上,当 JQM 致力于统一和最佳化这个代码基时,jQuery 核心库受到了极大关注。这种关注充分说明,移动浏览器技术在极短的时间内取得了多幺大的发展。
与 jQuery 核心库一样,您的开发计算机上不需要安装任何东西;只需将各种 .js 和 .css 档案直接包含到您的 web 页面中即可。这样,JQM 的功能就好像被放到了您的指尖,供您随时使用。
基本特性
一般简单性
此框架简单易用。页面开发主要使用标记,无需或仅需很少 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,还包括一些图示。
主题设定
此框架还提供一个主题系统,允许您提供自己的应用程式样式。
浏览器介绍
我们在移动设备浏览器支持方面取得了长足的进步,但并非所有移动设备都支持 HTML5、CSS 3 和 JavaScript。这个领域是 jQuery Mobile 的持续增强和优雅降级支持发挥作用的地方。如前所述,jQuery Mobile 支持高端和低端设备,比如那些没有 JavaScript 支持的设备 。持续增强(Progressive Enhancement)包含以下核心原则
所有浏览器都应该能够访问全部基础内容。
所有浏览器都应该能够访问全部基础功能。
增强的布局由外部连结的 CSS 提供。
增强的行为由外部连结的 JavaScript 提供。
终端用户浏览器偏好应受到尊重。
所有基本内容应该(按照设计)在基础设备上进行渲染,而更高级的平台和浏览器将使用额外的、外部连结的 JavaScript 和 CSS 持续增强。
jQuery Mobile 支持以下移动平台 教程
Apple iOSiPhone、iPod Touch、iPad(所有版本)
Android所有设备(所有版本)
Blackberry Torch(版本 6)
Palm WebOS Pre系列、Pixi系列、Veer、TouchPad
Nokia N900(进程中)
Windows Phone 8/8.1/10预览版
事件
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 事件处理器 |