jQuery的mobile开发

jQuery Mobile 简介

    jQuery Mobile 教程
    jQuery Mobile 安装

jQuery Mobile 是一种 web 框架，用于创建移动 web 应用程序。
您应该具备的基础知识

在您开始学习 jQuery Mobile 之前，您应该对以下知识有基本的了解：

    HTML
    CSS
    jQuery

如果您需要首先学习这些项目，请在我们的首页访问这些教程。
什么是 jQuery Mobile？

jQuery Mobile 是一个为触控优化的框架，用于创建移动 web 应用程序。

jQuery 适用于所有流行的智能手机和平板电脑：

jQuery Mobile 构建于 jQuery 库之上，这使其更易学习，如果您通晓 jQuery 的话。

它使用 HTML5、CSS3、JavaScript 和 AJAX 通过尽可能少的代码来完成对页面的布局。
为什么使用 jQuery Mobile？

jQuery Mobile 将“写得更少、做得更多”这一理念提升到了新的层次：它会自动为网页设计交互的易用外观，并在所有移动设计上保持一致。

提示：您不需要为每种移动设备或 OS 编写一个应用程序：

    Android 和 Blackberry 用 Java 编写
    iOS 用 Objective C 编写
    Windows Phone 用 C# 和 .net 编写

jQuery Mobile 解决了这个问题，因为它只用 HTML、CSS 和 JavaScript，这些技术都是所有移动 web 浏览器的标准。
最佳阅读体验

尽管 jQuery Mobile 工作于所有移动设备，它可能在桌面计算机上存在兼容性问题（“归功于”有限的 CSS3 支持）。

因此在本教程中，我们推荐您使用谷歌的 Chrome 浏览器，以获得最好的阅读体验。

jQuery Mobile 安装

    jQuery Mobile 简介
    jQuery Mobile 页面

向您的网页添加 jQuery Mobile

有多个办法可供您在网站上开始使用 jQuery Mobile。您可以：

    从 CDN 引用 jQuery Mobile（推荐）
    从 jQuerymobile.com 下载 jQuery Mobile 库

从 CDN 引用 jQuery Mobile

提示：CDN (Content Delivery Network) 用于通过 web 来分发常用的文件，以此加快用户的下载速度。

与 jQuery 类似，无需在您的计算机上安装任何程序；您只需直接在 HTML 页面中引用以下样式表和 JavaScript 库，这样 jQuery Mobile 就可以工作了：
jQuery Mobile CDN:







亲自试一试
下载 jQuery Mobile

如果您希望在服务器上存放 jQuery Mobile，您可以从 jQuerymobile.com 下载文件。







提示：请将下载的文件放到您希望使用的文件夹中。

提示：您是不是奇怪为什么

亲自试一试

然而，在 jQuery Mobile 中，我们使用 pageinit 事件，该事件在页面已初始化并完善样式设置后发生。

第二个参数指向 ("#pageone") 指向页面的 idpoints to the id of the page to specify the events for:
jQuery Mobile pageinit 事件



亲自试一试

注释：jQuery on() 方法用于添加事件处理程序。

下几章将详解每个 jQuery Mobile 事件。

jQuery Mobile Touch 事件

    jQuery Mobile 事件
    jQuery Mobile 滚动

Touch 事件在用户触摸屏幕（页面）时触发。

提示：Touch 事件同样适用于桌面电脑：点击鼠标！
jQuery Mobile Tap

tap 事件在用户敲击某个元素时触发。

下面的例子当

元素上触发 tap 事件时，隐藏当前

元素：
实例

$("p").on("tap",function(){
  $(this).hide();
});

亲自试一试
jQuery Mobile Taphold

taphold 事件在用户敲击某个元素并保持一秒时被触发：
实例

$("p").on("taphold",function(){
  $(this).hide();
});

亲自试一试
jQuery Mobile Swipe

swipe 事件在用户在某个元素上水平滑动超过 30px 时被触发：
实例

$("p").on("swipe",function(){
  $("span").text("Swipe detected!");
});

亲自试一试
jQuery Mobile Swipeleft

swipeleft 事件在用户在某个元素上从左滑动超过 30px 时被触发：
实例

$("p").on("swipeleft",function(){
  alert("You swiped left!");
});

亲自试一试
jQuery Mobile Swiperight

swiperight 事件在用户在某个元素上从右滑动超过 30px 时被触发：
实例

$("p").on("swiperight",function(){
  alert("You swiped right!");
});

亲自试一试

jQuery Mobile 滚动事件

    jQuery Mobile 触控
    jQuery Mobile 方向

jQuery Mobile 提供两种滚动事件：在滚动开始和当滚动结束。
jQuery Mobile Scrollstart

scrollstart 事件在用户开始滚动页面时被触发：
实例

$(document).on("scrollstart",function(){
  alert("开始滚动！");
});

亲自试一试

注释：iOS 设备会在滚动事件发生时冻结 DOM 操作，这意味着当用户滚动时无法改变任何事物。不过 jQuery 团队正致力于解决该问题。
jQuery Mobile Scrollstop

scrollstop 事件在用户停止滚动页面时被触发：
实例

$(document).on("scrollstop",function(){
  alert("结束滚动！");
});

亲自试一试

jQuery Mobile 方向事件

    jQuery Mobile 滚动
    jQuery Mobile 页面事件

jQuery Mobile orientationchange 事件

orientationchange 事件在用户垂直或水平旋转移动设备时被触发。
Mobile
Mobile

如需使用 orientationchange 事件，请把它添加到 window 对象：

$(window).on("orientationchange",function(){
  alert("方向已改变！");
});

callback 函数可以设置一个参数，即 event 对象，它会返回移动设备的方向："portrait" （设备被握持的方向是垂直的）或 "landscape" （设备被握持的方向是水平的）：
实例

$(window).on("orientationchange",function(event){
  alert("方向是：" + event.orientation);
});

亲自试一试

由于 orientationchange 事件与 window 对象绑定，我们能够使用 window.orientation 属性来，例如，设置不同样式以区分 portrait 和 landscape 视图：
实例

$(window).on("orientationchange",function(){
  if(window.orientation == 0) // Portrait
  {
    $("p").css({"background-color":"yellow","font-size":"300%"});
  }
  else // Landscape
  {
    $("p").css({"background-color":"pink","font-size":"200%"});
  }
});

亲自试一试

提示：window.orientation 属性对 portrait 视图返回 0，对 landscape 视图返回 90 或 -90。

jQuery Mobile 页面事件

    jQuery Mobile 方向
    jQuery Mobile 实例

jQuery Mobile 页面事件

在 jQuery Mobile 中与页面打交道的事件被分为四类：

    Page Initialization - 在页面创建前，当页面创建时，以及在页面初始化之后
    Page Load/Unload - 当外部页面加载时、卸载时或遭遇失败时
    Page Transition - 在页面过渡之前和之后
    Page Change - 当页面被更改，或遭遇失败时

如需关于所有 jQuery Mobile 事件的完整信息，请访问我们的 jQuery Mobile 事件参考手册。
jQuery Mobile Initialization 事件

当 jQuery Mobile 中的一张典型页面进行初始化时，它会经历三个阶段：

    在页面创建前
    页面创建
    页面初始化

每个阶段触发的事件都可用于插入或操作代码。
事件     描述
pagebeforecreate     当页面即将初始化，并且在 jQuery Mobile 已开始增强页面之前，触发该事件。
pagecreate     当页面已创建，但增强完成之前，触发该事件。
pageinit     当页面已初始化，并且在 jQuery Mobile 已完成页面增强之后，触发该事件。

下面的例子演示在 jQuery Mobile 中创建页面时，何时触发每种事件：
实例

$(document).on("pagebeforecreate",function(event){
  alert("触发 pagebeforecreate 事件！");
});
$(document).on("pagecreate",function(event){
  alert("触发 pagecreate 事件！");
});
$(document).on("pageinit",function(event){
  alert("触发 pageinit 事件！")
});

亲自试一试
jQuery Mobile Load 事件

页面加载事件属于外部页面。

无论外部页面何时载入 DOM，将触发两个事件。第一个是 pagebeforeload，第二个是 pageload （成功）或 pageloadfailed（失败）。

下表中解释了这些事件：
事件     描述
pagebeforeload     在任何页面加载请求作出之前触发。
pageload     在页面已成功加载并插入 DOM 后触发。
pageloadfailed     如果页面加载请求失败，则触发该事件。默认地，将显示 "Error Loading Page" 消息。

下列演示 pageload 和 pagloadfailed 事件的工作原理：
实例

$(document).on("pageload",function(event,data){
  alert("触发 pageload 事件！\nURL: " + data.url);
});
$(document).on("pageloadfailed",function(event,data){
  alert("抱歉，被请求页面不存在。");
});

亲自试一试
jQuery Mobile 过渡事件

我们还可以在从一页过渡到下一页时使用事件。

页面过渡涉及两个页面：一张“来”的页面和一张“去”的页面 - 这些过渡使当前活动页面（“来的”页面）到新页面（“去的”页面的改变过程变得更加动感。
事件     描述
pagebeforeshow     在“去的”页面触发，在过渡动画开始前。
pageshow     在“去的”页面触发，在过渡动画完成后。
pagebeforehide     在“来的”页面触发，在过渡动画开始前。
pagehide     在“来的”页面触发，在过渡动画完成后。

下列演示了过渡时间的工作原理：
实例

$(document).on("pagebeforeshow","#pagetwo",function(){ // 当进入页面二时
  alert("页面二即将显示");
});
$(document).on("pageshow","#pagetwo",function(){ // 当进入页面二时
  alert("现在显示页面二");
});
$(document).on("pagebeforehide","#pagetwo",function(){ // 当离开页面二时
  alert("页面二即将隐藏");
});
$(document).on("pagehide","#pagetwo",function(){ // 当离开页面二时
  alert("现在隐藏页面二");
});

亲自试一试

jQuery Mobile 实例

    jQuery Mobile 页面事件
    jQuery Mobile Data

jQuery Mobile 页面

基础的移动网页
多页面
对话框

例子解释
jQuery Mobile 过渡

淡入淡出效果
翻页效果
流效果
弹窗效果
滑动效果
滑动淡出效果
上滑动效果
下滑动效果
翻页效果
无过渡效果
逆转效果

例子解释
jQuery Mobile 按钮

创建按钮
行内按钮
分组按钮
后退按钮
带有和不带有圆角的按钮
小型和常规尺寸的按钮
带有和不带有阴影的按钮

例子解释
jQuery Mobile 按钮图标

向按钮添加图标
定位图标
只显示图标

例子解释
jQuery Mobile 工具栏

创建页眉和页脚
在页眉中添加按钮
在页眉中向左侧添加按钮
在页眉中向右侧添加按钮
带有按钮的页脚
带有居中对齐按钮的页脚
带有分组按钮的页脚
带有水平分组按钮的页脚
行内定位 - 页眉和页脚与页面内容行内定位
固定定位 - 页眉和页脚将保留在页面的顶部和底部
全屏定位 - 页面和页脚分班位于顶部和底部，但仍然在页面内容上

例子解释
jQuery Mobile 导航栏

创建导航栏
在内容中的导航栏
在页脚中导航栏
在导航栏中为按钮添加被选外观（被按下）
添加被选外观（被按下）
在导航栏中定位图标
演示在导航栏中的十个按钮

例子解释
jQuery Mobile 可折叠

创建内容可折叠块
当页面加载时展开内容
嵌套的可折叠块
可折叠集合（手风琴）
删除可折叠块上的圆角
使可折叠块更小
改变可折叠块的图标
可折叠列表
可折叠表单

例子解释
jQuery Mobile 网格

两列布局
三列布局
四列布局
五列布局
自定义网格
列中的多行

例子解释
jQuery Mobile 列表

创建列表视图
带有圆角的列表视图
列表分隔符
自动分隔符
创建搜索过滤器
改变搜索框中的文本
创建只读列表
向列表项添加缩略图
使用标准 HTML 来填充带有信息的列表
向列表项添加图标
创建带有分隔按钮的列表
增强列表项的功能性
创建计数泡泡
改变列表项的默认链接图标
可折叠列表
创建日历

例子解释
jQuery Mobile 表单

文本输入
文本框
搜索输入
单选按钮
复选框
对单选按钮和复选框进行水平组合
带有单选按钮和复选框的域包含器
预选的单选按钮和复选框
创建选择菜单
创建带有分隔符的选择菜单 (optgroup)
自定义选择菜单
在选择菜单中选取多个选项
组合选择菜单
水平组合选择菜单
预选一个选项
可折叠表单
创建滑块控件
突出显示截至滑块值的轨道
范围滑块（双重的）
创建切换开关
预选一个切换开关

例子解释
jQuery Mobile 主题

主题 "a"
主题 "b"
主题 "c"
主题 "d"
主题 "e"
主题化的页眉、内容和页脚
主题化的对话框
主题化的按钮
主题化的图标
页眉和页脚中的主题化按钮
主题化的导航栏
主题化的可折叠按钮和内容
主题化的列表
主题化的划分按钮
主题化的可折叠列表
主题化的表单
主题化的可折叠表单
定制主题

例子解释
jQuery Mobile 事件

Tap 事件
Taphold 事件
Swipe 事件
Swipeleft 事件
Swiperight 事件
Scrollstart 事件
Scrollstop 事件
Orientationchange 事件 - 提示方向
Orientationchange 事件 - 为水平和垂直方向设置不同的样式
Page initialization 事件
Page load 事件
Page transition 事件

例子解释

jQuery Mobile Data 属性

    jQuery Mobile 实例
    jQuery Mobile 事件

jQuery Data 属性

jQuery Mobile 使用 HTML5 data-* 属性为移动设备创建“对触摸友好的”美观的外观。

在下面的参考列表中，粗体值规定默认值。
Button

带有 data-role="button" 的超链接。工具栏中的按钮元素和链接以及输入字段会被自动设置按钮的样式，无需 data-role="button"。
Data 属性     值     描述
data-corners     true | false     规定按钮是否有圆角。
data-icon     Icons Reference     规定按钮的图标。默认是没有图标。
data-iconpos     left | right | top | bottom | notext     规定图标的位置。
data-iconshadow     true | false     规定按钮图标是否有阴影。
data-inline     true | false     规定按钮是否是行内的。
data-mini     true | false     规定按钮是小型的还是常规尺寸的。
data-shadow     true | false     规定按钮是否有阴影。
data-theme     letter (a-z)     规定按钮的主题颜色。

提示：如需组合多个按钮，请使用带有 data-role="controlgroup" 以及 data-type="horizontal|vertical" 属性的容器，来规定水平还是垂直组合按钮。
Checkbox

label 和 type="checkbox" 的 input 是成对的。会被自动设置为按钮的样式，无需 data-role。
Data 属性     值     描述
data-mini     true | false     规定复选框是小型的还是常规尺寸的。
data-role     none     防止 jQuery Mobile 将复选框设置为按钮的样式。
data-theme     letter (a-z)     规定复选框的主题颜色。

提示：如需组合多个复选框，请使用 data-role="controlgroup" 以及 data-type="horizontal|vertical"，来规定水平还是垂直组合复选框。
Collapsible

标题元素，其后是位于带有 data-role="collapsible" 属性的容器中的任意 HTML 标记。
Data 属性     值     描述
data-collapsed     true | false     规定内容是否应该关闭或展开。
data-collapsed-icon     Icons Reference     规定可折叠按钮的图标。默认是 "plus"。
data-content-theme     letter (a-z)     规定可折叠内容的主题颜色。同时会向可折叠内容添加圆角。
data-expanded-icon     Icons Reference     规定内容被展开时的可折叠按钮的图标。默认是“减号”。
data-iconpos     left | right | top | bottom     规定图标的位置。
data-inset     true | false     规定可折叠按钮是否拥有圆角和外边距的样式。
data-mini     true | false     规定可折叠按钮是小型的还是常规尺寸的。
data-theme     letter (a-z)     规定可折叠按钮的主题颜色。
Collapsible Set

带有 data-role="collapsible-set" 属性的容器中的可折叠内容块。
Data 属性     值     描述
data-collapsed-icon     Icons Reference     规定可折叠按钮的图标。默认是“加号”。
data-content-theme     letter (a-z)     规定可折叠内容的主题颜色。
data-expanded-icon     Icons Reference     规定内容被展开时的可折叠按钮的图标。默认是“减号”。
data-iconpos     left | right | top | bottom | notext     规定图标的位置。
data-inset     true | false     规定 collapsibles 是否拥有圆角和外边距的样式。
data-mini     true | false     规定可折叠按钮是小型的还是常规尺寸的。
data-theme     letter (a-z)     规定可折叠集合的主题颜色。
Content

带有 data-role="content" 属性的容器。
Data 属性     值     描述
data-theme     letter (a-z)     规定内容的主题颜色。默认是 "c"。
Controlgroup

带有 data-role="controlgroup" 属性的

or

容器。组合多个按钮样式的单一类型 input（基于链接的按钮、单选按钮、复选框、选择菜单）。
Data 属性     值     描述
data-mini     true | false     规定组合是小型的还是常规尺寸的。
data-type     horizontal | vertical     规定组合水平还是垂直显示。
Dialog

data-role="dialog" 的容器或者 data-rel="dialog" 的链接。
Data 属性     值     描述
data-close-btn-text     sometext     规定仅用于对话框的关闭按钮的文本。
data-dom-cache     true | false     规定是否为个别页面清除 jQuery DOM 缓存（如果设置 true，则需要注意对 DOM 的管理，并全面测试所有移动设备）。
data-overlay-theme     letter (a-z)     规定对话页面的叠加（背景）色。
data-theme     letter (a-z)     规定对话页的主题颜色。
data-title     sometext     规定对话页的标题。
Enhancement

带有 data-enhance="false" 或 data-ajax="false" 属性的容器。
Data 属性     值     描述
data-enhance     true | false     如果设置为 "true"，, (default) jQuery Mobile 会自动为页面添加样式，使其更适合移动设备。如果设置为 "false"，则框架不会设置页面的样式。
data-ajax     true | false     规定是否通过 AJAX 来加载页面。

注释：data-enhance="false" 比如结合 $.mobile.ignoreContentEnabled=true" 使用，以阻止 jQuery Mobile 自动添加页面样式。

当 $.mobile.ignoreContentEnabled 设置为 true 时，data-ajax="false" 的容器中的任何链接或表单元素，将被框架的导航功能忽略。
Fieldcontainer

包装 label/form 元素对的 data-role="fieldcontain" 的容器。
Fixed Toolbar

带有 data-role="header" 或 data-role="footer" 属性以及 data-position="fixed" 属性的容器。
Data 属性     值     描述
data-disable-page-zoom     true | false     规定用户是否有能力缩放页面。
data-fullscreen     true | false     规定工具栏始终位于顶部以及/或者底部。
data-tap-toggle     true | false     规定用户是否有能力通过点击/敲击来切换工具栏的可见性。
data-transition     slide | fade | none     规定当敲击/点击发生时的过渡效果。
data-update-page-padding     true | false     规定当发生 resize、transition 以及 "updatelayout" 事件时更新页面上下内边距（jQuery Mobile 总是在 "pageshow" 事件发生时更新内边距）
data-visible-on-page-show     true | false     规定在显示父页面时的工具栏可见性。
Flip Toggle Switch

带有 data-role="slider" 属性的一个 元素以及两个 元素。
Data 属性     值     描述
data-mini     true | false     规定开关是小型的还是常规尺寸的。
data-role     none     防止 jQuery Mobile 将切换开关设置为按钮样式。
data-theme     letter (a-z)     规定切换开关的主题颜色。
data-track-theme     letter (a-z)     规定轨道的主题颜色。
Footer

带有 data-role="footer" 属性的容器。
Data 属性     值     描述
data-id     sometext     规定唯一 ID。对于 persistent footers 是必需的。
data-position     inline | fixed     规定页脚与页面内容是行内关系，还是保留在底部。
data-fullscreen     true | false     规定页面是否始终位于底部并覆盖页面内容 (slightly see-through)。
data-theme     letter (a-z)     规定页脚的主题颜色。默认是 "a"。

注释：如需启用 fullscreen 定位，请使用 data-position="fixed"，然后为该元素添加 data-fullscreen 属性。
Header

data-role="header" 的容器。
Data 属性     值     描述
data-id     sometext     规定唯一 ID。对于 persistent headers 是必需的。
data-position     inline | fixed     规定页眉与页面内容是行内关系，还是保留在顶部。
data-fullscreen     true | false     规定页面是否始终位于顶部并覆盖页面内容 (slightly see-through)。
data-theme     letter (a-z)     规定页眉的主题颜色。默认是 "a"。

注释：如需启用 fullscreen 定位，请使用 data-position="fixed"，然后为该元素添加 data-fullscreen 属性。
Link

所有链接，包括 data-role="button" 的链接以及表单提交按钮。
Data 属性     值     描述
data-ajax     true | false     规定是否通过 AJAX 来加载页面，以改进用户体验和过渡。如果设置为 false，则 jQuery Mobile 将进行普通的页面请求。
data-direction     reverse     反转过渡动画（仅用于页面或对话）
data-dom-cache     true | false     规定是否清除个别页面的 jQuery DOM 缓存（如果设置为 true，则您需要注意对 DOM 的管理，并全面测试所有移动设备）。
data-prefetch     true | false     规定是否把页面预取到 DOM 中，以使其在用户访问时可用。
data-rel     back | dialog | external | popup     规定有关链接如何行为的选项。 Back - 在历史记录中向后移动一步。 Dialog - 将页面作为对话来打开，不在历史中记录。 External - 链接到另一域。 opens - 打开弹出窗口。
data-transition     fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none     规定如何从一页过渡到下一页。参加 jQuery Mobile 过渡。
data-position-to     origin | jQuery selector | window     规定弹出框的位置。 Origin - 默认。在打开它的链接上弹出。 jQuery selector - 在指定元素上弹出。 Window - 在窗口屏幕中间弹出。
List

带有 data-role="listview" 属性的

或
。
Data 属性     值     描述
data-autodividers     true | false     规定是否自动分隔列表项。
data-count-theme     letter (a-z)     规定计数泡沫的主题颜色。默认是 "c"。
data-divider-theme     letter (a-z)     规定列表分隔符的主题颜色。默认是 "b"。
data-filter     true | false     规定是否在列表中添加搜索框。
data-filter-placeholder     sometext     规定搜索框中的文本。默认是 "Filter items..."。
data-filter-theme     letter (a-z)     规定搜索过滤程序的主题颜色。默认是 "c"。
data-icon     Icons Reference     规定列表的图标。
data-inset     true | false     规定是否为列表添加圆角和外边距样式。
data-split-icon     Icons Reference     规定划分按钮的图标。默认是 "arrow-r"。
data-split-theme     letter (a-z)     规定划分按钮的主题颜色。默认是 "b"。
data-theme     letter (a-z)     规定列表的主题颜色。
List item

带有 data-role="listview" 属性的
或
中的
• 。
  Data 属性     值     描述
  data-filtertext     sometext     规定在过滤元素时搜索的文本。该文本而不是实际的列表项文本将会被搜索。
  data-icon     Icons Reference     规定列表项的图标。
  data-role     list-divider     规定列表项的分隔符。
  data-theme     letter (a-z)     规定列表项的主题颜色。
  
  注释：data-icon 属性仅适用于含有链接的列表项。
  Navbar
  
  带有 data-role="navbar" 属性的容器内部的
• 元素。
  Data 属性     值     描述
  data-icon     Icons Reference     规定列表项的图标。
  data-iconpos     left | right | top | bottom | notext     规定图标的位置。
  
  提示：导航栏从其父容器继承 theme-swatch。向导航栏设置 data-theme 属性是不可行的。可以单独向 navbar 中的每个链接设置 data-theme 属性。
  Page
  
  带有 data-role="page" 属性的容器。
  Data 属性     值     描述
  data-add-back-btn     true | false     自动添加后退按钮，仅用于页眉。
  data-back-btn-text     sometext     规定后退按钮的文本。
  data-back-btn-theme     letter (a-z)     规定后退按钮的主题颜色。
  data-close-btn-text     letter (a-z)     规定对话上的关闭按钮的文本。
  data-dom-cache     true | false     规定是否清除个别页面的 jQuery DOM 缓存（如果设置为 true，则您需要注意对 DOM 的管理，并全面测试所有移动设备）。
  data-overlay-theme     letter (a-z)     规定对话页面的叠加（背景）色。
  data-theme     letter (a-z)     规定页面的主题颜色。默认是 "c"。
  data-title     sometext     规定页面的标题。
  data-url     url     该值用于更新 URL，而不是用于请求页面。
  Popup
  
  带有 data-role="popup" 属性的容器。
  Data 属性     值     描述
  data-corners     true | false     规定弹出框是否有圆角。
  data-overlay-theme     letter (a-z)     规定弹出框的叠加（背景）色。默认是透明背景（none）。
  data-shadow     true | false     规定弹出框是否有阴影。
  data-theme     letter (a-z)     规定弹出框的主题颜色。默认是继承，"none" 设置为透明。
  data-tolerance     30, 15, 30, 15     规定距离窗口边缘 (top, right, bottom, left) 的距离。
  
  带有 data-rel="popup" 属性的锚：
  Data 属性     值     描述
  data-position-to     origin | jQuery selector | window     规定弹出框的位置。 Origin - 默认。弹出框位于打开它的链接上。 jQuery selector - 弹出框位于指定元素上。 Window - 弹出框位于窗口屏幕中央。
  data-rel     popup     用于打开的弹出框。
  data-transition     fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none     规定如何从一页过渡到下一页。参加 jQuery Mobile 过渡。
  Radio Button
  
  label 与 type="radio" 的 input 对。会被自动设置为按钮样式，无需 data-role。
  Data 属性     值     描述
  data-mini     true | false     规定按钮是否小型的或者是常规尺寸的。
  data-role     none     放置 jQuery Mobile 将单选按钮设置为 enhanced buttons 的样式。
  data-theme     letter (a-z)     规定单选按钮的主题颜色。
  
  提示：如需组合多个单选按钮，请使用 data-role="controlgroup" 以及 data-type="horizontal|vertical" 来规定水平还是垂直地组合按钮。
  Select
  
  所有

元素。会被自动设置按钮的样式，无需 date-role。
Data 属性     值     描述
data-icon     Icons Reference     规定 select 元素的图标。默认是 "arrow-d"。
data-iconpos     left | right | top | bottom | notext     规定图标的位置。
data-inline     true | false     规定 select 元素是否是行内。
data-mini     true | false     规定 select 元素是小型的还是常规尺寸的。
data-native-menu     true | false     如果设置为 false，则使用 jQuery 自己的自定义选择菜单（如果您希望选择菜单在所有移动设备上拥有一致的外观，则推荐使用）。
data-overlay-theme     letter (a-z)     规定 jQuery 自定义选择菜单的主题颜色（与 data-native-menu="false" 一起使用）。
data-placeholder     true | false     可以在非原生 select 的 元素上设置。
data-role     none     放置 jQuery Mobile 将 select 元素设置为按钮样式。
data-theme     letter (a-z)     规定 select 元素的主题颜色。

提示：如需组合多个 select 元素，请使用 data-role="controlgroup" 以及 data-type="horizontal|vertical" 来规定把该元素水平还是垂直地进行组合。
Slider

type="range" 的 input 元素。会被自动设置为按钮样式，无需 data-role。
Data 属性     值     描述
data-highlight     true | false     规定是否突出显示滑块轨道。
data-mini     true | false     规定滑块是小型的还是常规尺寸的。
data-role     none     放置 jQuery Mobile 将滑块设置按钮的样式。
data-theme     letter (a-z)     规定滑块控件（input、handle 和 track）的主题颜色。
data-track-theme     letter (a-z)     规定滑块轨道的主题颜色。
Text input & Textarea

type="text|search|etc." 的 input 元素或 textarea 元素。会被自动设置样式，无需 data-role。
Data 属性     值     描述
data-mini     true | false     规定是否 input 元素是小型的还是常规尺寸的。
data-role     none     放置 jQuery Mobile 将 input/textarea 设置问按钮的样式。
data-theme     letter (a-z)     规定输入字段的主题颜色。

jQuery Mobile 事件

    jQuery Mobile Data
    jQuery Mobile 图标

jQuery Mobile 事件参考手册

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

注释：请通过使用 on() 方法来绑定事件。
事件     描述
hashchange     启用 bookmarkable #hash 历史记录。
navigate     针对 hashchange 和 popstate 的 wrapper 事件。
orientationchange     当用户垂直或水平旋转其移动设备时触发。
pagebeforechange     在页面变化周期内触发两次：任意页面加载或过渡之前触发一次，接下来在页面成功完成加载后，但是在浏览器历史记录被导航进程修改之前触发。
pagebeforecreate     当页面即将被初始化，但是在增强开始之前触发。
pagebeforehide     在过渡动画开始前，在“来源”页面上触发。
pagebeforeload     在作出任何加载请求之前触发。
pagebeforeshow     在过渡动画开始前，在“到达”页面上触发。
pagechange     在 changePage() 请求已完成将页面载入 DOM 并且所有页面过渡动画已完成后触发。
pagechangefailed     当 changePage() 请求对页面的加载失败时触发。
pagecreate     当页面已创建，但是增强完成之前触发。
pagehide     在过渡动画完成后，在“来源”页面触发。
pageinit     当页面已经初始化并且完成增强时触发。
pageload     在页面成功加载并插入 DOM 后触发。
pageloadfailed     如果页面加载请求失败，则触发。
pageremove     在窗口视图从 DOM 中移除外部页面之前触发。
pageshow     在过渡动画完成后，在“到达”页面触发。
scrollstart     当用户开始滚动页面时触发。
scrollstop     当用户停止滚动页面时触发。
swipe     当用户在元素上水平滑动时触发。
swipeleft     当用户从左划过元素超过 30px 时触发。
swiperight     当用户从右划过元素超过 30px 时触发。
tap     当用户敲击某元素时触发。
taphold     当元素敲击某元素并保持一秒时触发。
throttledresize     启用 bookmarkable #hash 历史记录
updatelayout     由动态显示/隐藏内容的 jQuery Mobile 组件触发。
vclick     虚拟化的 click 事件处理器
vmousecancel     虚拟化的 mousecancel 事件处理器
vmousedown     虚拟化的 mousedown 事件处理器
vmousemove     虚拟化的 mousemove 事件处理器
vmouseout     虚拟化的 mouseout 事件处理器
vmouseover     虚拟化的 mouseover 事件处理器
vmouseup     虚拟化的 mouseup 事件处理器

jQuery Mobile 图标

    jQuery Mobile 事件
    jQuery Mobile 教程

jQuery 图标

如需在 jQuery Mobile 中向按钮添加图标，请使用 data-icon 属性：

Refresh Page

提示：您也可以在 或 元素中使用 data-icon 属性。

下面我们已列出 jQuery Mobile 提供的所有可用图标：
属性值     描述     图标     例子
data-icon="arrow-l"     左箭头         测试
data-icon="arrow-r"     右箭头         测试
data-icon="arrow-u"     上箭头         测试
data-icon="arrow-d"     下箭头         测试
data-icon="plus"     加         测试
data-icon="minus"     减         测试
data-icon="delete"     删除         测试
data-icon="check"     检查         测试
data-icon="home"     首页         测试
data-icon="info"     信息         测试
data-icon="grid"     网格         测试
data-icon="gear"     齿轮         测试
data-icon="search"     搜索         测试
data-icon="back"     后退         测试
data-icon="forward"     向前         测试
data-icon="refresh"     刷新         测试
data-icon="star"     星         测试
data-icon="alert"     提醒         测试