转载 孟祥月 博客
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 利用最新的 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 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 时触发。 |
|
当用户敲击某元素时触发。 |
|
|
taphold |
当元素敲击某元素并保持一秒时触发。 |
|
throttledresize |
启用可标记 #hash 历史记录 |
|
updatelayout |
由动态显示/隐藏内容的 jQuery Mobile 组件触发。 |
|
vclick |
虚拟化的 click 事件处理器 |
|
vmousecancel |
虚拟化的 mousecancel 事件处理器 |
|
vmousedown |
虚拟化的 mousedown 事件处理器 |
|
vmousemove |
虚拟化的 mousemove 事件处理器 |
|
vmouseout |
虚拟化的 mouseout 事件处理器 |
|
vmouseover |
虚拟化的 mouseover 事件处理器 |
|
vmouseup |
虚拟化的 mouseup 事件处理器 |