jQuery Mobile 总结

转载  孟祥月 博客

http://blog.cshttp://blog.csdn.net/mengxiangyue/article/category/1313478/2dn.http://blog.csdn.net/mengxiangyue/article/category/1313478/2net/mengxiangyue/article/category/1313478/2

 

data-role参数表：

page        页面容器，其内部的mobile元素将会继承这个容器上所设置的属性 

header     页面标题容器，这个容器内部能够包含文字、返回按钮、功能按钮等元素

footer       页面页脚容器，这个容器内部也能够包含文字、返回按钮、功能按钮等元素

content     页面内容容器，这是一个很宽容的容器，内部能够包含标准的html元素和jQueryMobile元素

controlgroup     将几个元素设置成一组，通常是几个相同的元素类型

fieldcontain       区域包裹容器，用增长边距和分割线的方式将容器内的元素和容器外的元素明显分隔

navbar     功能导航容器，通俗的讲就是工具条

listview     列表展现容器，相似手机中联系人列表的展现方式

list-divider      列表展现容器的表头，用来展现一组列表的标题，内部不可包含连接

button      按钮，将连接和普通按钮的样式设置成为jQueryMobile的风格

none        阻止框架对元素进行渲染，使元素以html原生的状态显示，主要用于form元素。

data-transition参数表：

slide    从右侧向左滑入页面

slideup    从底部向上滑入

slidedown      从上向下滑入

pop     从中心渐显展开

fade     渐显

flip       翻转

 

data-icon参数表：

 

data-iconpos参数表：

right    图标在文字的右侧

top    图标在文字上面

bottom      图标在文字下面

pop     从中心渐显展开

fade     渐显

flip       翻转

 

jQuery Mobile 

jQuery Mobile是jQuery 在手机上和平板设备上的版本。jQuery Mobile 不只会给主流移动平台带来jQuery核心库，并且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQuery Mobile开发团队说:能开发这个项目，咱们很是兴奋。移动Web太须要一个跨浏览器的框架，让开发人员开发出真正的移动Web网站。

 

 

简单介绍

今天，jQuery 驱动着 Internet 上的大量网站，在浏览器中提供动态用户体验，促使传统桌面应用程序愈来愈少。如今，主流移动平台上的浏览器功能都遇上了桌面浏览器，所以 jQuery 团队引入了 jQuery Mobile(或 JQM)。JQM 的使命是向全部主流移动浏览器提供一种统一体验，使整个 Internet 上的内容更加丰富 - 无论使用哪一种查看设备。

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

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

 

 

基本特性

通常简单性

此框架简单易用。页面开发主要使用标记，无需或仅需不多 JavaScript。

折叠优雅降级

尽管 jQuery Mobile 利用最新的 HTML五、CSS3 和 JavaScript，但并不是全部移动设备都提供这样的支持。jQuery Mobile 的哲学是同时支持高端和低端设备，好比那些没有 JavaScript 支持的设备，尽可能提供最好的体验。

折叠Accessibility

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

折叠小规模

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

折叠主题设置

此框架还提供一个主题系统，容许您提供本身的应用程序样式。

浏览器

咱们在移动设备浏览器支持方面取得了长足的进步，但并不是全部移动设备都支持 HTML五、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

Nokia N900(进程中)

 

 

事件

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 事件处理器

收起