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 下载文件。

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

提示：您是不是奇怪为什么 <script> 标签中没有 type="text/javascript" 属性？

在 HTML5 中该属性不是必需的。JavaScript 是 HTML5 以及所有现代浏览器中的默认脚本语言！

jQuery Mobile 页面

jQuery Mobile 安装
jQuery Mobile 过渡

使用 jQuery Mobile 入门

提示：尽管 jQuery Mobile 适用于所有移动设备，它在台式计算机上仍然可能存在兼容性问题（由于有限的 CSS3 支持）。

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

<div data-role="header">
<h1>欢迎访问我的主页</h1>
</div>

<div data-role="content">
<p>我是一名移动开发者！</p>
</div>

</div>
</body>

亲自试一试
例子解释：

data-role="page" 是显示在浏览器中的页面
    data-role="header" 创建页面上方的工具栏（常用于标题和搜索按钮）
    data-role="content" 定义页面的内容，比如文本、图像、表单和按钮，等等
    data-role="footer" 创建页面底部的工具栏

在这些容器中，您可以添加任意 HTML 元素 - 段落、图像、标题、列表等等。

提示：HTML5 data-* 属性用于通过 jQuery Mobile 为移动设备创建“对触控友好的”交互外观。
在 jQuery Mobile 中添加页面

在 jQuery Mobile，您可以在单一 HTML 文件中创建多个页面。

请通过唯一的 id 来分隔每张页面，并使用 href 属性来连接彼此：
实例

<div data-role="page" id="pageone">
<div data-role="content">
<a href="#pagetwo">转到页面二</a>
</div>
</div>

<div data-role="page" id="pagetwo">
<div data-role="content">
<a href="#pageone">转到页面一</a>
</div>
</div>

亲自试一试

注释：包含大量内容的 web 应用程序会影响加载时间（比如文本、链接、图像和脚本等等）。如果您不希望在内部链接页面，请使用外部文件：

<a href="externalfile.html">转到外部页面</a>

将页面用作对话框

对话框是用来显示信息或请求输入的视窗类型。

如需在用户点击（轻触）链接时创建一个对话框，请向该链接添加 data-rel="dialog"：
实例

<div data-role="page" id="pageone">
<div data-role="content">
<a href="#pagetwo" data-rel="dialog">转到页面二</a>
</div>
</div>

<div data-role="page" id="pagetwo">
<div data-role="content">
<a href="#pageone">转到页面一</a>
</div>
</div>

亲自试一试

jQuery Mobile 过渡

jQuery Mobile 页面
jQuery Mobile 按钮

jQuery Mobile 包含了允许您选择页面打开方式的 CSS 效果。
jQuery Mobile 过渡效果

jQuery Mobile 拥有一系列关于如何从一页过渡到下一页的效果。

注释：如需实现过渡效果，浏览器必须支持 CSS3 3D 转换：
浏览器支持

Internet Explorer 10 支持 3D 转换（更早的版本不支持）
Opera 仍然不支持 3D 转换

过渡效果可应用于任意链接或通过使用 data-transition 属性进行的表单提交：

<a href="#anylink" data-transition="slide">滑动到页面二</a>

下面的表格展示了可与 data-transition 属性一同使用的可用过渡：
过渡    描述    测试
fade    默认。淡入淡出到下一页。    测试
flip    从后向前翻动到下一页。    测试
flow    抛出当前页面，引入下一页。    测试
pop    像弹出窗口那样转到下一页。    测试
slide    从右向左滑动到下一页。    测试
slidefade    从右向左滑动并淡入到下一页。    测试
slideup    从下到上滑动到下一页。    测试
slidedown    从上到下滑动到下一页。    测试
turn    转向下一页。    测试
none    无过渡效果。    测试

提示：在 jQuery Mobile 中，淡入淡出效果在所有链接上都是默认的（如果浏览器支持）。

提示：以上所有效果同时支持反向动作，例如，如果您希望页面从左向右滑动，而不是从右向左，请使用值为 "reverse" 的 data-direction 属性。在后退按钮上是默认的。
实例

亲自试一试

jQuery Mobile 按钮

jQuery Mobile 过渡
jQuery Mobile 图标

移动应用程序构建于触控操作的便利性之上。
在 jQuery Mobile 中创建按钮

jQuery Mobile 中的按钮可通过三种方法创建：

使用 <button> 元素
使用 <input> 元素
使用 data-role="button" 的 <a> 元素

亲自试一试
<input>

亲自试一试
<a>

亲自试一试

提示：jQuery Mobile 中的按钮会自动获得样式，这增强了他们在移动设备上的交互性和可用性。我们推荐您使用 data-role="button" 的 <a> 元素来创建页面之间的链接，而 <input> 或 <button> 元素用于表单提交。
导航按钮

如需通过按钮来链接页面，请使用 data-role="button" 的 <a> 元素：
实例

<a href="#pagetwo" data-role="button">转到页面二</a>

亲自试一试
行内按钮

默认情况下，按钮会占据屏幕的全部宽度。如果您需要按钮适应其内容，或者如果您需要两个或多个按钮并排显示，请添加 data-inline="true"：
实例

<a href="#pagetwo" data-role="button" data-inline="true">转到页面二</a>

亲自试一试
组合按钮

jQuery Mobile 提供了对按钮进行组合的简单方法。

请将 data-role="controlgroup" 属性与 data-type="horizontal|vertical" 一同使用，以规定水平或垂直地组合按钮：
实例

亲自试一试

提示：默认情况下，组合按钮是垂直分组的，彼此间没有外边距和空白。并且只有第一个和最后一个按钮拥有圆角，在组合后就创造出了漂亮的外观。
后退按钮

如需创建后退按钮，请使用 data-rel="back" 属性（会忽略锚的 href 值）：
实例

亲自试一试
更多用于按钮的 data-* 属性
属性    值    描述    实例
data-corners    true | false    规定按钮是否有圆角。    测试
data-mini    true | false    规定是否是小型按钮。    测试
data-shadow    true | false    规定按钮是否有阴影。    测试

如需有关 jQuery Mobile data-* 属性的完整信息，请访问我们的 jQuery Mobile Data 属性参考手册。

下一节演示如何为按钮添加图标。

jQuery Mobile 按钮图标

jQuery Mobile 按钮
jQuery Mobile 工具栏

jQuery Mobile 提供的一套图标可令您的按钮更具吸引力。
为 jQuery Mobile 按钮添加图标

如需向您的按钮添加图标，请使用 data-icon 属性：

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

下面我们列出了 jQuery Mobile 提供的一些可用图标：
属性值    描述    图标    实例
data-icon="arrow-l"    左箭头        测试
data-icon="arrow-r"    右箭头        测试
data-icon="delete"    删除        测试
data-icon="info"    信息        测试
data-icon="home"    首页        测试
data-icon="back"    返回        测试
data-icon="search"    搜索        测试
data-icon="grid"    网格        测试

如需关于 jQuery Mobile 按钮图标的完整信息，请访问我们的 jQuery Mobile 图标参考手册。
定位图标

您也能够规定图标被放置的位置：上、右、下或左。

请使用 data-iconpos 属性来规定位置：
图标位置：

亲自试一试

提示：默认地，所有按钮中的图标靠左放置。
只显示图标

如果只需显示图标，请将 data-iconpos 设置为 "notext"：
Back:

亲自试一试

jQuery Mobile 工具栏

jQuery Mobile 图标
jQuery Mobile 导航栏

jQuery Mobile 工具栏

工具栏元素常被放置于页眉和页脚中 - 以实现“已访问”的导航：
标题栏

页眉通常会包含页眉标题/LOGO 或一到两个按钮（通常是首页、选项或搜索按钮）。

您可以在页眉中向左侧或/以及右侧添加按钮。

下面的代码，将向页眉标题文本的左侧添加一个按钮，并向右侧添加一个按钮：
实例

<div data-role="header">
<a href="#" data-role="button">首页</a>
<h1>欢迎来到我的主页</h1>
<a href="#" data-role="button">搜索</a>
</div>

亲自试一试

下面的代码将向页眉标题的左侧添加一个按钮：

<div data-role="header">
<a href="#" data-role="button">首页</a>
<h1>欢迎来到我的主页</h1>
</div>

不过，如果您在 <h1> 元素之后放置按钮链接，那么它不会显示在文本右侧。如需向页眉标题的右侧添加按钮，请规定类名 "ui-btn-right"：
实例

<div data-role="header">
<h1>欢迎来到我的主页</h1>
<a href="#" data-role="button" class="ui-btn-right">搜索</a>
</div>

亲自试一试

提示：页眉可包含一个或两个按钮，然而页脚没有限制。
页脚栏

与页眉相比，页脚更具伸缩性 - 它们更实用且多变，所以能够包含所需数量的按钮：
实例

<div data-role="footer">
<a href="#" data-role="button">转播到新浪微博</a>
<a href="#" data-role="button">转播到腾讯微博</a>
<a href="#" data-role="button">转播到 QQ 空间</a>
</div>

亲自试一试

注释：页脚与页眉的样式不同（它会减去一些内边距和空白，并且按钮不会居中）。如果要修正该问题，请在页脚设置类名 "ui-btn"：
实例

亲自试一试

您也能够选择在页脚中水平还是垂直地组合按钮：
实例

<div data-role="footer" class="ui-btn">
<div data-role="controlgroup" data-type="horizontal">
    <a href="#" data-role="button" data-icon="plus">转播到新浪微博</a>
    <a href="#" data-role="button" data-icon="plus">转播到腾讯微博</a>
    <a href="#" data-role="button" data-icon="plus">转播到 QQ 空间</a>
</div>
</div>

亲自试一试
定位页眉和页脚

放置页眉和页脚的方式有三种：

Inline - 默认。页眉和页脚与页面内容位于行内。
Fixed - 页面和页脚会留在页面顶部和底部。
Fullscreen - 与 fixed 类似;页面和页脚会留在页面顶部和底部，but also over the page content. It is also slightly see-through

请使用 data-position 属性来定位页眉和页脚：
Inline 定位（默认）

亲自试一试
Fixed 定位

亲自试一试

如果需要启用全面定位，请使用 data-position="fixed"，并向该元素添加 data-fullscreen 属性：
Fullscreen 定位

亲自试一试

提示：fullscreen 对于照片、图像和视频非常理想。

提示：对于 fixed 和 fullscreen 定位，触摸屏幕将隐藏和显示页眉及页脚。

jQuery Mobile 导航栏

jQuery Mobile 工具栏
jQuery Mobile 可折叠

jQuery Mobile 导航栏

导航栏由一组水平排列的链接构成，通常位于页眉或页脚内部。

默认地，导航栏中的链接会自动转换为按钮（无需 data-role="button"）。

请使用 data-role="navbar" 属性来定义导航栏：
实例

亲自试一试

提示：按钮的宽度，默认地，与其内容一致。使用无序列表来均等地划分按钮：一个按钮占据 100% 的宽度，两个按钮各分享 50% 的宽度，三个按钮 33.3%，以此类推。不过，如果您在导航栏中规定了五个以上的按钮，那么它会弯折为多行（参加页面底部的“更多实例”）。
活动按钮

当导航栏中的链接被敲击时，会获得选取外观（按下）。

如需在不敲击链接时实现此外观，请使用 class="ui-btn-active"：
实例

亲自试一试

对于多个页面，您也许需要为每个按钮设置“被选”外观，以表示用户正在浏览该页面。如果要这么做，请向链接添加 "ui-state-persist" 类，以及 "ui-btn-active" 类：
实例

亲自试一试
更多实例

内容中的导航栏
    如何在 data-role="content" 中添加导航栏。
页脚中的导航栏
    如何在页脚中添加导航栏。
在导航栏中定位图标
    如何在页脚内部的导航栏中放置图标。
五个以上的按钮
    演示在导航栏中的十个按钮。

jQuery Mobile 可折叠

jQuery Mobile 导航栏
jQuery Mobile 网格

可折叠的内容块

可折叠（Collapsibles）允许您隐藏或显示内容 - 对于存储部分信息很有用。

如需创建可折叠的内容块，请向某个容器分配 data-role="collapsible" 属性。在容器（div）中，添加一个标题元素（h1-h6），其后是您需要扩展的任意 HTML 标记：
实例

<div data-role="collapsible">
<h1>点击我 - 我可以折叠！</h1>
<p>我是可折叠的内容。</p>
</div>

亲自试一试

默认地，该内容是关闭的。如需在页面加载时扩展内容，请使用 data-collapsed="false"：
实例

<div data-role="collapsible" data-collapsed="false">
<h1>点击我 - 我可以折叠！</h1>
<p>现在我默认是展开的。</p>
</div>

亲自试一试
嵌套的可折叠块

可以嵌套可折叠内容块：
实例

<div data-role="collapsible">
<h1>点击我 - 我可以折叠！</h1>
<p>我是被展开的内容。</p>
<div data-role="collapsible">
<h1>点击我 - 我是嵌套的可折叠块！</h1>
<p>我是嵌套的可折叠块中被展开的内容。</p>
</div>
</div>

亲自试一试

提示：可折叠内容块可以被嵌套您希望的任意次数。
可折叠集合

可折叠集合（Collapsible sets）指的是被组合在一起的可折叠块（常被称为手风琴）。当新块被打开时，所有其他块会关闭。

创建若干内容块，然后通过 data-role="collapsible-set" 用新容器包装这个可折叠块：
实例

<div data-role="collapsible-set">
<div data-role="collapsible">
    <h1>点击我 - 我可以折叠！</h1>
    <p>我是被展开的内容。</p>
</div>
<div data-role="collapsible">
    <h1>点击我 - 我可以折叠！</h1>
    <p>我是被展开的内容。</p>
</div>
</div>

亲自试一试
更多实例

通过 data-inset 属性来删除圆角
    如何移除 collapsibles 上的圆角。
通过 data-mini 最小化 collapsibles
    如何使 collapsibles 更小巧。
通过 data-collapsed-icon 和 data-expanded-icon 改变图标
    如何改变 collapsibles 的图标（默认是 + 和 -）。

jQuery Mobile 网格

jQuery Mobile 可折叠
jQuery Mobile 列表视图

jQuery Mobile 布局网格

jQuery Mobile 提供了一套基于 CSS 的列布局方案。不过，一般不推荐在移动设备上使用列布局，这是由于移动设备的屏幕宽度所限。

但是有时您需要定位更小的元素，比如按钮或导航栏，就像在表格中那样并排。这时，列布局就恰如其分。

网格中的列是等宽的（总宽是 100%），无边框、背景、外边距或内边距。

可使用的布局网格有四种：
网格类    列    列宽度    对应    实例
ui-grid-a    2    50% / 50%    ui-block-a|b    测试
ui-grid-b    3    33% / 33% / 33%    ui-block-a|b|c    测试
ui-grid-c    4    25% / 25% / 25% / 25%    ui-block-a|b|c|d    测试
ui-grid-d    5    20% / 20% / 20% / 20% / 20%    ui-block-a|b|c|d|e    测试

提示：在列容器中，根据不同的列数，子元素可设置类 ui-block-a|b|c|d|e。这些列将依次并排浮动。

实例 1: 对于 ui-grid-a 类（两列布局），您必须规定两个子元素 ui-block-a 和 ui-block-b。

实例 2: 对于 ui-grid-b 类（三列布局），请添加三个子元素 ui-block-a、ui-block-b 和 ui-block-c。
定制网格

您可以通过使用 CSS 来定制列块：
实例

亲自试一试

您也可以通过使用行内样式来定制块：

多行

在列中包含多个行也是可能的。

注释：ui-block-a-class 将始终创建新行：
实例

亲自试一试

jQuery Mobile 列表视图

jQuery Mobile 网格
jQuery Mobile 列表内容

jQuery Mobile 列表视图

jQuery Mobile 中的列表视图是标准的 HTML 列表：有序列表 (<ol>) 和无序列表 (<ul>)。

如需创建列表，请向 <ol> 或 <ul> 元素添加 data-role="listview"。如需使这些项目可点击，请在每个列表项（<li>）中规定链接：
实例

亲自试一试

如需为列表添加圆角和外边距，请使用 data-inset="true" 属性：
实例

亲自试一试

提示：默认地，列表中的列表项会自动转换为按钮（无需 data-role="button"）。
列表分隔符

列表分隔符（List Dividers）用于把项目组织和组合为分类/节。

如需规定列表分隔符，请向 <li> 元素添加 data-role="list-divider" 属性：
实例

亲自试一试

如果您的列表是字母顺序的（比如通讯录），jQuery Mobile 自动添加恰当的分隔符，通过在 <ol> 或 <ul> 元素上设置 data-autodividers="true" 属性：
实例

<ul data-role="listview" data-autodividers="true">
<li><a href="#">Adam</a></li>
<li><a href="#">Angela</a></li>
<li><a href="#">Bill</a></li>
<li><a href="#">Calvin</a></li>
...
</ul>

亲自试一试

提示：data-autodividers="true" 属性通过对列表项文本的首字母进行大写来创建分隔符。
搜索过滤器

如需在列表中添加搜索框，请使用 data-filter="true" 属性：
实例

亲自试一试

默认地，搜索框中的文本是 "Filter items..."。

如需修改默认文本，请使用 data-filter-placeholder 属性：
实例

亲自试一试
更多实例

只读列表
如何创建没有链接的列表（不是按钮，不可点击）。

jQuery Mobile 列表内容

jQuery Mobile 列表视图
jQuery Mobile 表单基础

jQuery Mobile 列表缩略图

对于大于 16x16px 的图像，请在链接中添加 <img> 元素。

jQuery Mobile 将自动把图像调整至 80x80px：
实例

亲自试一试

请使用标准 HTML 来填充带有信息的列表：
实例

<ul data-role="listview">
<li>
    <a href="#">
    <img src="chrome.png">
    <h2>Google Chrome</h2>
    <p>Google Chrome 免费的开源 web 浏览器。发布于 2008 年。</p>
    </a>
</li>
</ul>

亲自试一试
jQuery Mobile 列表图标

如需向您的列表添加 16x16px 的图标，请向 <img> 元素添加 class="ui-li-icon" 属性：
实例

亲自试一试
拆分按钮

如需创建带有垂直分隔栏的拆分列表，请在 <li> 元素内放置两个链接。

jQuery Mobile 会自动为第二个链接添加蓝色箭头图标的样式，链接中的文本（如有）将在用户划过该图标时显示：
实例

亲自试一试

通过添加页面和对话框，可使链接的功能更强：
实例

<ul data-role="listview">
<li>
<a href="#"><img src="chrome.png"></a>
<a href="#download" data-rel="dialog">下载浏览器</a>
</li>
</ul>

亲自试一试
计数泡沫

计数泡沫用于显示与列表项相关的数目，例如邮箱中的消息：

如需添加计数泡沫，请使用行内元素，比如 <span>，设置 class "ui-li-count" 属性并添加数字：
实例

<ul data-role="listview">
<li><a href="#">Inbox<span class="ui-li-count">335</span></a></li>
<li><a href="#">Sent<span class="ui-li-count">123</span></a></li>
<li><a href="#">Trash<span class="ui-li-count">7</span></a></li>
</ul>

亲自试一试

注释：如需在计数泡泡中显示正确的数字，就必须进行程序化更新。我们将在下一章种讲解。
更多实例

更改列表项的默认链接图标
    如何为列表项设置不同的链接图标（右箭头是默认的）。
可折叠列表
    如何创建隐藏和显示内容的列表。
更多内容格式
    如何制作日历。

jQuery Mobile 表单

jQuery Mobile 列表内容
jQuery Mobile 表单输入

jQuery Mobile 会自动为 HTML 表单添加优异的便于触控的外观。
jQuery Mobile 表单结构

jQuery Mobile 使用 CSS 来设置 HTML 表单元素的样式，以使其更有吸引力更易用。

在 jQuery Mobile 中，您可以使用以下表单控件：

文本框
    搜索框
    单选框
    复选框
    选择菜单
    滑动条
    翻转切换开关

当您与 jQuery Mobile 表单打交道时，应该了解以下信息：

<form> 元素必须设置 method 和 action 属性
每个表单元素必须设置唯一的 "id" 属性。该 id 在站点的页面中必须是唯一的。这是因为 jQuery Mobile 的单页面导航模型允许许多不同的“页面”同时呈现。
每个表单元素必须有一个标记（label）。请设置 label 的 for 属性来匹配元素的 id。

实例

<form method="post" action="demoform.asp">
<label for="fname">First name:</label>
<input type="text" name="fname" id="fname">
</form>

亲自试一试

如需隐藏 label，请使用类 ui-hidden-accessible。这很常用，当您需要元素的 placeholder 属性充当 label 时：
实例

亲自试一试
域容器

如果需要 label 和表单元素在宽屏幕上显示正常，请用带有 data-role="fieldcontain" 属性的 <div> 或 <fieldset> 元素来包装 label 或表单元素：
实例

<form method="post" action="demoform.asp">
<div data-role="fieldcontain">
    <label for="fname">First name:</label>
    <input type="text" name="fname" id="fname">
    <label for="lname">Last name:</label>
    <input type="text" name="lname" id="lname">
</div>
</form>

亲自试一试

提示：fieldcontain 属性基于页面宽度来设置 label 和表单控件的样式。当页面宽度大于 480px 时，它会自动将 label 与表单控件放置于同一行。当小于 480px 时，label 会被放置于表单元素之上。

提示：如需避免 jQuery Mobile 自动为可点击元素设置样式，请使用 data-role="none" 属性：
实例

<label for="fname">First name:</label>
<input type="text" name="fname" id="fname" data-role="none">

亲自试一试
在 jQuery Mobile 中提交表单

提示：jQuery Mobile 会自动通过 AJAX 进行表单提交，并会尝试将服务器响应整合入应用程序的 DOM 中。

jQuery Mobile 表单输入元素

jQuery Mobile 表单基础
jQuery Mobile 表单选择

jQuery Mobile 文本输入

输入字段是通过标准的 HTML 元素编写的，jQuery Mobile 会为它们设置专门针对移动设备的美观易用的样式。您还可以使用新的 HTML5 <input> 类型：
实例

亲自试一试

提示：请使用 placeholder 来规定简短的提示，以描述输入字段的预期值：

文本框

请使用 <textarea> 来实现多行文本输入。

注释：文本框会自动扩大，以适应您输入的文本行。
实例

<form method="post" action="demoform.asp">
<div data-role="fieldcontain">
<label for="info">Additional Information:</label>
<textarea name="addinfo" id="info"></textarea>
</div>
</form>

亲自试一试
搜索框

输入类型 type="search" 是 HTML5 中的新类型，用于定义供输入搜索词的文本字段：
实例

<form method="post" action="demoform.asp">
<div data-role="fieldcontain">
<label for="search">Search:</label>
<input type="search" name="search" id="search">
</div>
</form>

亲自试一试
单选按钮

当用户只选择有限数量选项中的一个时，会用到单选按钮。

如需创建一套单选按钮，请添加 type="radio" 的 input 元素以及相应的 label。在 <fieldset> 元素中包装单选按钮。您也可以增加一个 <legend> 元素来定义 <fieldset> 的标题。

提示：请用 data-role="controlgroup" 属性来组合这些按钮：
实例

<form method="post" action="demoform.asp">
<fieldset data-role="controlgroup">
    <legend>Choose your gender:</legend>
      <label for="male">Male</label>
      <input type="radio" name="gender" id="male" value="male">
      <label for="female">Female</label>
      <input type="radio" name="gender" id="female" value="female">
</fieldset>
</form>

亲自试一试
复选框

当用户选择有限数量选项中的一个或多个选项时，会用到复选框：
实例

<form method="post" action="demoform.asp">
<fieldset data-role="controlgroup">
    <legend>Choose as many favorite colors as you'd like:</legend>
      <label for="red">Red</label>
      <input type="checkbox" name="favcolor" id="red" value="red">
      <label for="green">Green</label>
      <input type="checkbox" name="favcolor" id="green" value="green">
      <label for="blue">Blue</label>
      <input type="checkbox" name="favcolor" id="blue" value="blue">
</fieldset>
</form>

亲自试一试
更多实例

如需对单选框或复选框进行水平分组，请使用 data-type="horizontal" 属性：
实例

亲自试一试

您也可以使用域容器来包装 <fieldset>：
实例

<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Choose your gender:</legend>
</fieldset>
</div>

亲自试一试

如果您希望“预选”其中一个按钮，请使用 HTML <input> 标签的 checked 属性：
实例

亲自试一试

jQuery Mobile 表单选择菜单

jQuery Mobile 表单输入
jQuery Mobile 表单滑块

jQuery Mobile 选择菜单

iPhone 上的选择菜单：

Android 设备上的选择菜单：

<select> 元素创建带有若干选项的下拉菜单。

<select> 元素中的 <option> 元素定义列表中的可用选项：
实例

亲自试一试

提示：如果列表中包含了一长列相关的选项，请在 <select> 中使用 <optgroup> 元素：
实例

<select name="day" id="day">
   <optgroup label="Weekdays">
    <option value="mon">Monday</option>
    <option value="tue">Tuesday</option>
    <option value="wed">Wednesday</option>
   </optgroup>
   <optgroup label="Weekends">
    <option value="sat">Saturday</option>
    <option value="sun">Sunday</option>
   </optgroup>
</select>

亲自试一试
自定义选择菜单

本页上方的图片，展示了移动平台显示选择菜单的独特方式。

如果您希望在所有移动设备上显示一致外观的选择菜单，请使用 jQuery 的自定义选择菜单，data-native-menu="false" 属性：
实例

亲自试一试
Multiple Selections

如需在选择菜单中选取多个选项，请在 <select> 元素中使用 multiple 属性：
实例

亲自试一试
更多实例

使用 data-role="controlgroup"
    如何组合一个或多个选择菜单。
使用 data-type="horizontal"
    如何水平地组合选择菜单。
预选选项
    如何预选择一个选项。
可折叠表单
    如何创建可折叠表单。

jQuery Mobile 表单 - 滑块

jQuery Mobile 表单选择
jQuery Mobile 主题

jQuery Mobile 滑块控件

滑块允许您从一定范围内的数字中选取值：

如需创建滑块，请使用 <input type="range">：
实例

<form method="post" action="demoform.asp">
<div data-role="fieldcontain">
<label for="points">Points:</label>
<input type="range" name="points" id="points" value="50" min="0" max="100">
</div>
</form>

亲自试一试

使用下列属性来规定限定：

max - 规定允许的最大值
    min - 规定允许的最小值
    step - 规定合法的数字间隔
    value - 规定默认值

提示：如果您希望突出显示截止滑块值的这段轨道，请添加 data-highlight="true"：
实例

亲自试一试
切换开关

切换开关常用于开/关或对/错按钮：

如需创建切换，请使用 data-role="slider" 的 <select> 元素，并添加两个 <option> 元素：
实例

<form method="post" action="demoform.asp">
<div data-role="fieldcontain">
    <label for="switch">Toggle Switch:</label>
    <select name="switch" id="switch" data-role="slider">
      <option value="on">On</option>
      <option value="off">Off</option>
    </select>
</div>
</form>

亲自试一试

提示：请使用 "selected" 属性来把选项之一设置为预选（突出显示）：
实例

亲自试一试

jQuery Mobile 主题

jQuery Mobile 表单滑块
jQuery Mobile 事件

jQuery Mobile 主题

jQuery Mobile 提供了五种不同的样式主题，从 "a" 到 "e" - 每种主题带有不同颜色的按钮、栏、内容块，等等。jQuery Mobile 中的一种主题由多种可见的效果和颜色构成。

如需定制应用程序的外观，请使用 data-theme 属性，并为该属性分配一个字母：

值    描述    例子
a    默认。黑色背景上的白色文本。    测试
b    蓝色背景上的白色文本 / 灰色背景上的黑色文本    测试
c    亮灰色背景上的黑色文本    测试
d    白色背景上的黑色文本    测试
e    橙色背景上的黑色文本    测试

提示：混合您喜欢的主题！

默认地，jQuery Mobile 为页眉和页脚使用 "a" 主题，为页眉内容使用 "c" 主题（亮灰）。不过，您能够自如地对主题进行混合。
主题化的页面、内容和页脚
实例

亲自试一试
主题化的对话框
实例

<a href="#pagetwo" data-rel="dialog">Go To The Themed Dialog Page</a>

亲自试一试
主题化的按钮
实例

<a href="#" data-role="button" data-theme="a">Button</a>
<a href="#" data-role="button" data-theme="b">Button</a>
<a href="#" data-role="button" data-theme="c">Button</a>

亲自试一试
主题化的图标
实例

亲自试一试
页眉和页脚中的主题化按钮
实例

<div data-role="header">
<a href="#" data-role="button" data-icon="home" data-theme="b">Home</a>
<h1>Welcome To My Homepage</h1>
<a href="#" data-role="button" data-icon="search" data-theme="e">Search</a>
</div>

<div data-role="footer">
<a href="#" data-role="button" data-theme="b" data-icon="plus">Button 1</a>
<a href="#" data-role="button" data-theme="c" data-icon="plus">Button 2</a>
<a href="#" data-role="button" data-theme="e" data-icon="plus">Button 3</a>
</div>

亲自试一试
主题化的导航栏
实例

<div data-role="footer" data-theme="e">
<h1>Insert Footer Text Here</h1>
<div data-role="navbar">
    <ul>
      <li><a href="#" data-icon="home" data-theme="b">Button 1</a></li>
      <li><a href="#" data-icon="arrow-r">Button 2</a></li>
      <li><a href="#" data-icon="arrow-r">Button 3</a></li>
      <li><a href="#" data-icon="search" data-theme="a" >Button 4</a></li>
    </ul>
</div>
</div>

亲自试一试
主题化的可折叠按钮和内容
实例

<div data-role="collapsible" data-theme="b" data-content-theme="e">
<h1>Click me - I'm collapsible!</h1>
<p>I'm the expanded content.</p>
</div>

亲自试一试
主题化列表
实例

亲自试一试
主题化划分按钮
实例

亲自试一试
主题化的可折叠列表
实例

<div data-role="collapsible" data-theme="b" data-content-theme="e">
<ul data-role="listview">
<li><a href="#">Agnes</a></li>
</ul>
</div>

亲自试一试
主题化表单
实例

<label for="colors">Choose Favorite Color:</label>
<select id="colors" name="colors" data-theme="b">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>

亲自试一试
主题化的可折叠表单
实例

<fieldset data-role="collapsible" data-theme="b" data-content-theme="e">
<legend>Click me - I'm collapsible!</legend>

亲自试一试
添加新主题

jQuery Mobile 同时允许您向移动页面添加新主题。

请通过编辑 CSS 文件（如已下载 jQuery Mobile）来添加或编辑新主题。只需拷贝一段样式，并用字母名（f-z）来对类进行重命名，然后调整为您喜欢的颜色和字体即可。

您也可以通过在 HTML 文档中使用主题类来添加新样式 - 为工具条添加类 ui-bar-(a-z)，并为内容添加类 ui-body-(a-z)：
实例

亲自试一试

jQuery Mobile 事件

jQuery Mobile 主题
jQuery Mobile 触控

事件 = 网页能够响应的所有不同访客的动作。
jQuery Mobile 事件

您能够在 jQuery Mobile 中使用任何标准的 jQuery 事件。

此外，jQuery Mobile 还提供若干种为移动浏览定制的事件：

触摸事件 - 当用户触摸屏幕时触发（敲击和滑动）
    滚动事件 - 当上下滚动时触发
    方向事件 - 当设备垂直或水平旋转时触发
    页面事件 - 当页面被显示、隐藏、创建、加载以及/或卸载时触发

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

在 jQuery 中，您已经学到使用文档 ready 事件来阻止 jQuery 代码在文档结束加载 (is ready) 前运行：
jQuery document ready 事件

// 此处是 jQuery 事件...

});
</script>

亲自试一试

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

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

// 此处是 jQuery 事件...

});
</script>

亲自试一试

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

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

jQuery Mobile Touch 事件

jQuery Mobile 事件
jQuery Mobile 滚动

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

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

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

下面的例子当 <p> 元素上触发 tap 事件时，隐藏当前 <p> 元素：
实例

$("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" 属性的 <div> or <fieldset> 容器。组合多个按钮样式的单一类型 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" 属性的一个 <select> 元素以及两个 <option> 元素。
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" 属性的 <ol> 或 <ul>。
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" 属性的 <ol> 或 <ul> 中的 <li>。
Data 属性    值    描述
data-filtertext    sometext    规定在过滤元素时搜索的文本。该文本而不是实际的列表项文本将会被搜索。
data-icon    Icons Reference    规定列表项的图标。
data-role    list-divider    规定列表项的分隔符。
data-theme    letter (a-z)    规定列表项的主题颜色。

注释：data-icon 属性仅适用于含有链接的列表项。
Navbar

带有 data-role="navbar" 属性的容器内部的 <li> 元素。
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) 的距离。

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

所有 <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 的 <option> 元素上设置。
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 属性：

<a href="#anylink" data-role="button" data-icon="refresh">Refresh Page</a>

提示：您也可以在 <button> 或 <input> 元素中使用 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"    提醒        测试

jQuery的mobile开发相关推荐

18 个 jQuery Mobile 开发贴士和教程
jQuery Mobile 是 jQuery 在手机上和平板设备上的版本.jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架.支持 ...
跨平台APP JQuery Mobile开发-张晨光-专题视频课程
跨平台APP JQuery Mobile开发-1170人已学习课程介绍 jQuery Mobile 是创建移动 web 应用程序的框架: 适用于所有流行的智能手机和平板电脑,使用 H ...
jQuery Mobile开发的新闻阅读器,适应iphone和android手机
程序猿都非常赖.你懂的! 我们常常上新浪,腾讯.雅虎等各大站点上面看新闻.他们也都各自推出了自家的手机新闻阅读器.今天我自己使用jQuery Mobile 来实现这一功能.图片大小上传限制了大小250 ...
视频教程-跨平台APP JQuery Mobile开发-jQuery
跨平台APP JQuery Mobile开发主要研究方向为J2EE..net .数据库 .前端.Android,曾经服务过大型上市国企IT部门,软件企业联合创始人,对软件研发管理.市场营销有自己独特 ...
jQuery Mobile开发1-UI components
一.jQuery Mobile现在支持的UI components 二.List views 基础List views <!DOCTYPE html> <html><he ...
jquery mobile_jQuery Mobile简介
jquery mobile jQuery Mobile是一种用户界面(UI)框架,可让您编写功能正常的移动Web应用程序而无需编写任何JavaScript代码. 在本文中,了解此框架的功能,包括基本页 ...
尝试jquery插件的开发
尝试jquery插件的开发今天,尝试了一下jquery插件的开发,先看效果图: 就是鼠标点击下面三张缩略图的时候,显示大图和文字. $(document).ready(function() { $( ...
Windows Mobile 开发系列文章收藏 - 讨论篇
关注Windows Mobile 应用开发, 探讨移动应用未来发展方向, 未来的手机又会是一个什么样子呢? Windows Mobile 未来会发展成何种高度? 这些方面都值得我们去思考关注, 想了 ...
使用 jQuery 简化 Ajax 开发.
使用 jQuery 简化 Ajax 开发. jQuery 是一个JavaScript 库,它有助于简化 JavaScript™ 以及 Asynchronous JavaScript + XML (A ...

jQuery的mobile开发

jQuery的mobile开发相关推荐

最新文章

热门文章