菜鸟教程 -- 学的不仅是技术，更是梦想！

jQuery Mobile 教程

jQuery Mobile 是用于创建移动 Web 应用的前端开发框架。

jQuery Mobile 可以应用于智能手机与平板电脑。

jQuery Mobile 使用 HTML5 & CSS3 最小的脚本来布局网页。

在线实例

通过我们的在线编辑器，你可以编辑代码，并查看运行结果。

实例

<div data-role="page" id="pageone">
<div data-role="header">
    <h1>页面标题</h1>
</div>

<div data-role="content">
    <p>页面内容</p>
</div>

<div data-role="footer">
    <h1>页面底部内容</h1>
</div>
</div>

点击 "尝试一下" 按钮查看实例运行结果。

jQuery Mobile 实例

通过实例学习！在菜鸟教程中你可以通过大量的jQuery Mobile在线实例来学习该技术。

jQuery Mobile 实例

jQuery Mobile 参考手册

在菜鸟教程中你可以查看完整的 jQuery Mobile 属性参考手册。

jQuery Mobile Data 参考手册

点我分享笔记

感谢您的支持，我会继续努力的!

扫码打赏，你说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

菜鸟教程 -- 学的不仅是技术，更是梦想！

jQuery Mobile 教程

jQuery Mobile 简介

jQuery Mobile 是一个用于创建移动端web应用的的前端框架。

学习本教程前你需要先了解

在开始学习 jQuery Mobile 前, 你应该了解一下基础知识：

HTML
CSS
jQuery

如果你想学习这些知识，你可以访问本站的首页。

什么是 jQuery Mobile?

jQuery Mobile 是针对触屏智能手机与平板电脑的网页开发框架。

jQuery Mobile 工作于所有主流的智能手机和平板电脑上：

jQuery Mobile 构建于 jQuery 以及 jQuery UI类库之上，如果您了解 jQuery，您可以很容易的学习 jQuery Mobile。

jQuery Mobile 使用了极少的 HTML5、CSS3、JavaScript 和 AJAX 脚本代码来完成页面的布局渲染。

为什么使用 jQuery Mobile?

通过使用jQuery Mobile 可以 "写更少的代码，做更多的事情" : 它可以通过一个灵活及简单的方式来布局网页，且兼容所有移动设备。

	不同设备使用了不同开发语言，jQuery Mobile可以很好的兼容不同的设备或操作系统： Android 和 Blackberry（黑莓）使用JAVA语言。 iOS 使用 Objective C 语言 Windows Phone 使用 C# 和 .net, 等。 jQuery Mobile 解决了不同设备兼容的问题，因为它只使用HTML，CSS和 JavaScript，这是所有移动网络浏览器的标准！

最好的阅读体验

尽管jQuery Mobile兼容所有的移动设备，但是并不能完全兼容PC机（由于有限的CSS3支持）。

为了更好的阅读本教程，建议您使用 Google Chrome 浏览器。

jQuery Mobile 教程

点我分享笔记

感谢您的支持，我会继续努力的!

扫码打赏，你说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

菜鸟教程 -- 学的不仅是技术，更是梦想！

jQuery Mobile 教程

jQuery Mobile 页面

jQuery Mobile 安装

在你的网页中添加 jQuery Mobile

你可以通过以下几种方式将jQuery Mobile添加到你的网页中：

从 CDN 中加载 jQuery Mobile (推荐)
从jQuerymobile.com 下载 jQuery Mobile库

从 CDN 中加载 jQuery Mobile

	CDN的全称是Content Delivery Network，即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。.

使用 jQuery 内核, 你不需要在电脑上安装任何东西; 你仅仅需要在你的网页中加载以下层叠样式 (.css) 和 JavaScript 库 (.js) 就能够使用 jQuery Mobile:

jQuery Mobile CDN:

国内用户推荐使用百度CDN：

jQuery Mobile CDN(百度):

本教程引用的库为百度 CDN 资源库。

下载 jQuery Mobile

如果你想将 jQuery Mobile 放于你的主机中,你可以从 jQuerymobile.com下载该文件。

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.4.5.css">
<script src="jquery.js"></script>
<script src="jquery.mobile-1.4.5.js"></script>
</head>

提示： 将下载的文件放置于与网页同一目录下。

	你是否想知道为什么在 <script> 标签中没有插入 type="text/javascript" ? 在 HTML5 已经不需要该属性。 JavaScript 在所有现代浏览器中是 HTML5 的默认脚本语言！

jQuery Mobile 页面

点我分享笔记

感谢您的支持，我会继续努力的!

扫码打赏，你说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

菜鸟教程 -- 学的不仅是技术，更是梦想！

jQuery Mobile 教程

jQuery Mobile 列表视图

jQuery Mobile 页面

开始学习 jQuery Mobile

	尽管jQuery Mobile兼容所有的移动设备，但是并不能完全兼容PC机（由于有限的CSS3支持）。为了更好的阅读本教程，建议您使用 Google Chrome 浏览器。

实例

<body>
<div data-role="page">

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

<div data-role="main" class="ui-content">
    <p>我现在是一个移动端开发者!!</p>
</div>

<div data-role="footer">
    <h1>底部文本</h1>
</div>

</div>
</body>

实例解析：

data-role="page" 是在浏览器中显示的页面。
data-role="header" 是在页面顶部创建的工具条 (通常用于标题或者搜索按钮)
data-role="main" 定义了页面的内容，比如文本，图片，表单，按钮等。
"ui-content" 类用于在页面添加内边距和外边距。
data-role="footer" 用于创建页面底部工具条。
在这些容器中你可以添加任何 HTML 元素 - 段落, 图片, 标题, 列表等。

	jQuery Mobile 依赖 HTML5 data-* 属性来支持各种 UI 元素、过渡和页面结构。不支持它们的浏览器将以静默方式弃用它们。

在页面中添加 jQuery Mobile

使用 jQuery Mobile, 你可以在单个 HTML 文件中创建多个不同的页面。

你可以使用不同的href属性来区分使用同一个唯一id的页面：

实例

<div data-role="page" id="pageone">
<div data-role="main" class="ui-content">
<a href="#pagetwo">跳转到第二个页面</a>
</div>
</div>

<div data-role="page" id="pagetwo">
<div data-role="main" class="ui-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="main" class="ui-content">
<a href="#pagetwo">跳转到第二个页面</a>
</div>
</div>

<div data-role="page" data-dialog="true" id="pagetwo">
<div data-role="main" class="ui-content">
<a href="#pageone">跳转到第一个页面</a>
</div>
</div>

jQuery Mobile 列表视图

点我分享笔记

感谢您的支持，我会继续努力的!

扫码打赏，你说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

菜鸟教程 -- 学的不仅是技术，更是梦想！

jQuery Mobile 教程

jQuery Mobile 列表内容

jQuery Mobile 按钮

jQuery Mobile 过渡

jQuery Mobile 包含 CSS3 效果让您选择页面打开的方式。

jQuery Mobile 页面切换效果

jQuery Mobile 提供了各种页面切换到下一个页面的效果。

注意：为了实现页面切换效果，浏览器必须支持 CSS3 3D 切换：


12.0	10.0	16.0	4.0	15.0

表格中的数字为支持 3D 旋转的最小浏览器版本号。

页面过渡效果可被应用于任何使用 data-transition 属性的链接或表单：

页面切换效果可被应用于任何使用 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 按钮图标

jQuery Mobile 按钮

Mobile 应用程序是建立在您想要显示的简单的点击事物上。

在 jQuery Mobile 中创建按钮

在 jQuery Mobile 中，按钮可通过三种方式创建：

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

<button>

<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 值）：

实例

类	描述	实例
ui-btn-b	修改按钮颜色为黑色，字体为白色(默认为灰色背景，黑色字体)。	尝试一下
ui-corner-all	为按钮添加圆角	尝试一下
ui-mini	制作小按钮	尝试一下
ui-shadow	为按钮添加阴影	尝试一下

	如果你需要使用更多的样式，每个样式类使用空格隔开，如： class="ui-btn ui-btn-inline ui-btn-corner-all ui-shadow" 默认情况下 <input> 按钮有圆角及阴影效果。 <a> 和 <button> 元素没有。

菜鸟教程 -- 学的不仅是技术，更是梦想！

jQuery Mobile 教程

jQuery Mobile 按钮

jQuery Mobile 工具栏

jQuery Mobile 按钮图标

jQuery Mobile 提供了一套让按钮看起来更称心如意的图标。

添加图标到 jQuery Mobile 按钮

我们可以使用 ui-icon 类将图标添加到按钮上，并可以使用指定类来设置按钮位置。

<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">Search</a>

注意： 在其他方式的按钮上，如列表或表单中的按钮需要使用 data-icon 属性。在接下来的章节中我们会具体介绍。

下面我们列出一些 jQuery Mobile 提供的可用图标：

按钮类	描述	实例
ui-icon-arrow-l	左箭头	尝试一下
ui-icon-arrow-r	右箭头	尝试一下
ui-icon-info	信息	尝试一下
ui-icon-delete	删除	尝试一下
ui-icon-back	后退	尝试一下
ui-icon-audio	扬声器	尝试一下
ui-icon-lock	挂锁	尝试一下
ui-icon-search	搜索	尝试一下
ui-icon-alert	警告	尝试一下
ui-icon-grid	网格	尝试一下
ui-icon-home	主页	尝试一下

如需查看所有 jQuery Mobile 按钮图标的完整参考手册，请访问我们的 jQuery Mobile 图标参考手册。

定位图标

您也可以规定图标定位在按钮的什么部位：顶部（top）、右侧（right）、底部（bottom）、左侧（left）。

请使用 ui-btn-icon 属性来指定位置：

图标的位置：

	如果你未指定按钮图片的位置，图标将不显示。

只显示图标

如果你只想显示图标，可以使用 "notext":

实例：

移除圆圈

默认情况下，所有的图标都有一个灰色的圆圈。如果你不需要它，可以在元素中使用 "ui-nodisc-icon" 类：

实例

黑色、白色按钮

默认情况下，所有图标都是白色的。如果需要改变图标颜色为黑色，可以在元素添加 "ui-alt-icon"：

实例

菜鸟教程 -- 学的不仅是技术，更是梦想！

jQuery Mobile 教程

jQuery Mobile 弹窗

弹窗是一个非常流行的对话框，弹窗可以覆盖在页面上展示。

弹窗可用于显示一段文本，图片，地图或其他内容。

创建一个弹窗，需要使用 <a> 和 <div> 元素。在 <a> 元素上添加 data-rel="popup" 属性， <div> 元素添加 data-role="popup" 属性。接着我们为 <div> 指定 id，然后设置 <a> 的 href 值为 <div> 指定的 id。 <div> 中的内容为弹窗显示的内容。

注意: <div> 弹窗与点击的 <a> 链接必须在同一个页面上。

实例

<a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all">显示弹窗</a>

<div data-role="popup" id="myPopup">
<p>这是一个简单的弹窗</p>
</div>

如果你需要为弹窗添加内边距与外边距可以在 <div> 中添加 "ui-content" 类:

实例

关闭弹窗

默认情况下，点击弹窗之外的区域或按下 "Esc" 键即可关闭弹窗。如果你不想点击弹窗之外的区域关闭弹窗可以在添加上添加 data-dismissible="false" 属性（不推荐）。你也可以在弹窗上添加关闭按钮，按钮上使用 data-rel="back" 属性，并通过样式来控制按钮的位置。

描述	实例
右侧关闭按钮	尝试一下
左侧关闭按钮	尝试一下
使用 data-dismissible 属性	尝试一下

定位弹窗

默认情况下，弹窗会直接显示在点击元素的上方，如果需要控制弹窗的位置，可以在用于打开弹窗的点击链接上使用 data-position-to 属性。

控制弹窗位置的三种方式：

属性值	描述
data-position-to="window"	弹窗在窗口居中显示
data-position-to="#myId"	弹窗显示在知道的 #id 元素上
data-position-to="origin"	默认。弹窗显示在点击的元素上。

实例

<a href="#myPopup1" data-rel="popup" class="ui-btn" data-position-to="window">Window</a>
<a href="#myPopup2" data-rel="popup" class="ui-btn" data-position-to="#demo">id="demo"</a>
<a href="#myPopup3" data-rel="popup" class="ui-btn" data-position-to="origin">Origin</a>

过渡

默认情况下，弹窗是没有过渡效果的。如果你需要你可以通过 data-transition="value" 属性来添加过渡效果（jQuery Mobile 过渡）：

所有过渡效果实例

弹窗方向小边框

如果需要添加弹窗方向小边框，可以使用 data-arrow 属性，并指定值 "l" (左边), "t" (顶部), "r" (右边) or "b" (底部):

实例

<a href="#myPopup" data-rel="popup" class="ui-btn">打开弹窗</a>

<div data-role="popup" id="myPopup" class="ui-content" data-arrow="l">
<p>左边框的方向。</p>
</div>

弹窗对话框

你可以将弹窗制作为一个标准的对话框 (头部, 内容和底部标记):

实例

<a href="#myPopupDialog" data-rel="popup" class="ui-btn">打开对话框弹窗</a>

<div data-role="popup" id="myPopupDialog">
<div data-role="header"><h1>头部文本..</h1></div>
<div data-role="main" class="ui-content"><p>一些文本..</p><a href="#">一些链接..</a>
<div data-role="footer"><h1>底部文本..</h1></div>
</div>

图片弹窗

你可以在弹窗中显示图片:

实例

弹窗背景覆盖

你可以使用 data-overlay-theme 属性在弹窗后添加背景颜色。

默认情况下覆盖的背景色的透明的。使用 data-overlay-theme="a" 添加浅色背景，使用 data-overlay-theme="b" 添加深色的覆盖背景：

实例

<a href="#myPopup" data-rel="popup">Show Popup</a>

<div data-role="popup" id="myPopup" data-overlay-theme="b">
<p>在我身后有个深色背景。</p>
</div>

一般图片弹窗经常使用背景覆盖：

实例

注意： 在接下来的章节中，你将了解到如何在弹窗中使用表单。

点我分享笔记

感谢您的支持，我会继续努力的!

扫码打赏，你说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

菜鸟教程 -- 学的不仅是技术，更是梦想！

jQuery Mobile 教程

jQuery Mobile 按钮图标

jQuery Mobile 导航栏

jQuery Mobile 工具栏

工具栏元素通常位于头部和尾部内 - 让导航易于访问：

头部栏

头部栏一般包含页面标题/logo 或一两个按钮（通常是首页、选项或搜索）。

您可以添加按钮到头部的左侧或右侧。

下面的代码，将添加一个按钮到头部标题文本的左侧，添加一个按钮到头部标题文本的右侧：

实例

<div data-role="header">
<a href="#" class="ui-btn ui-icon-home ui-btn-icon-left">主页</a>
<h1>欢迎访问我的主页</h1>
<a href="#" class="ui-btn ui-icon-search ui-btn-icon-left">搜索</a>
</div>

下面的代码，将添加一个按钮到头部标题文本的左侧：

实例

<div data-role="header">
<a href="#" class="ui-btn ui-btn-left ui-icon-home ui-btn-icon-left">主页</a>
<h1>欢迎访问我的主页</h1>
</div>

但是，如果您把按钮链接放置在 <h1> 元素之后，将无法显示右侧的文本。要添加一个按钮到头部标题的右侧，请指定 class 为 "ui-btn-right"：

实例

<div data-role="header">
<h1>欢迎访问我的主页</h1>
<a href="#" class="ui-btn ui-btn-right ui-icon-home ui-btn-icon-left">搜索</a>
</div>

	头部可以包含一个或两个按钮，而尾部没有限制。

尾部栏

尾部栏比头部栏更灵活 - 在整个页面中它们更具功能性和可变性，因此可以包含尽可能多的按钮：

实例

<div data-role="footer">
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">在Facebook上关注我</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">在Twitter上关注我</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">在Instagram上关注我</a>
</div>

注意：尾部的样式与头部不同（没有内边距和空间，且按钮不居中）。我们可以使用简单的样式来解决这个问题：

实例

您还可以将尾部中的按钮进行水平或垂直组合：

实例

<div data-role="footer" style="text-align:center;">
<div data-role="controlgroup" data-type="horizontal">
    <a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">在Facebook上关注我</a>
    <a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">在Twitter上关注我</a>
    <a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">在Instagram上关注我</a>
</div>
</div>

定位头部栏和尾部栏

头部和尾部可以通过三种方式进行定位：

Inline - 默认。头部栏和尾部栏与页面内容内联。
Fixed - 头部栏和尾部栏固定在页面的顶部和底部。
Fullscreen - 与 Fixed 定位模式基本相同，头部栏和尾部栏固定在页面的顶部和底部。但是当他工具栏滚动出屏幕之外时，不会自动重新显示，除非点击屏幕，这对于图片或视频类有提升代入感的应用是非常有用的。注意这种模式下工具栏会遮住页面内容，所以最好用在比较特殊的场合下。

使用 data-position 属性来定位头部栏和尾部栏：

Inline 定位（默认）

Fixed 定位

要启用全屏定位，请使用 data-position="fixed"，并添加 data-fullscreen 属性到元素：

Fullscreen 定位

提示：全屏定位适用于照片、图像和视频。

提示：固定定位和全屏定位中，通过点击屏幕将隐藏和显示头部栏和尾部栏。

菜鸟教程 -- 学的不仅是技术，更是梦想！

jQuery Mobile 教程

jQuery Mobile 工具栏

jQuery Mobile 可折叠块

jQuery Mobile 导航栏

导航栏是由一组水平排列的链接组成，通常包含在头部或尾部内。

默认情况下，导航栏中的链接将自动变成按钮（不需要 data-role="button"）。

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

实例

	默认情况下，按钮的宽度与它的内容一样。使用一个无序列表来平均地划分按钮的宽度：1 个按钮占 100% 宽度，2 个按钮则各占 50% 的宽度，3 个按钮则每个占 33.3% 的宽度，依此类推。然而，如果您在导航栏中指定了超过 5 个按钮，将会拆成多行（查看"更多实例"）。

导航按钮图标

我们可以使用 data-icon 属性为导航按钮添加图标:

实例

data-icon 属性与在图标章节中的 CSS 类使用相同的值。CSS 类使用方法 class="ui-icon-value", data-icon 属性使用方法 data-icon="value"。

属性值	描述	图标
data-icon="home"	首页
data-icon="arrow-r"	右边箭头
data-icon="search"	搜索

如需查看所有 jQuery Mobile 按钮图标的完整参考手册，请访问我们的 jQuery Mobile 图标参考手册。

定位图标

就像 "ui-btn-icon-position" 类一样 (图标章节有详细说明), 你可以设置图标显示的位置： top（头部）, right（右侧）, bottom（底部）或 left（左侧）。

图标位置在导航栏容器上设置，使用 data-iconpos 属性来指定位置：

属性值	描述	实例
data-iconpos="top"	图标顶部对齐	尝试一下
data-iconpos="right"	图标右侧对齐	尝试一下
data-iconpos="bottom"	图标底部对齐	尝试一下
data-iconpos="left"	图标左侧对齐	尝试一下

	默认情况，导航按钮的图标位于文本之上 (data-iconpos="top")。

激活按钮

当导航栏中的某个链接被点击，它将获得被选中（按下）的外观。

如果想在不点击链接时获得这种外观，请使用 class="ui-btn-active"：

实例

对于多个页面，您可能想要每个按钮的选中外观代表当前用户所在的页面。要做到这一点，请添加 "ui-state-persist" 和 "ui-btn-active" 到链接的 class：

实例

菜鸟教程 -- 学的不仅是技术，更是梦想！

jQuery Mobile 教程

jQuery Mobile 表格

jQuery Mobile 面板

jQuery Mobile 中的面板会在屏幕的左侧向右侧划出。

通过向指定 id 的 <div> 元素添加 data-role="panel" 属性来创建面板。

在 <div> 中添加 HTML 标记来显示你的面板内容：

<div data-role="panel" id="myPanel">
  <h2>面板标题..</h2>
  <p>文本内容..</p>
</div>

注意： panel 标记必须置于头部、内容、底部组成的页面之前或之后。

要访问面板，需要创建一个指向面板 <div> id 的链接，点击该链接即可打开面板:

<a href="#myPanel" class="ui-btn ui-btn-inline">打开面板</a>

简单的面板实例

实例

<div data-role="page" id="pageone">
<div data-role="panel" id="myPanel">
    <h2>面板头部..</h2>
    <p>面板内容..</p>
</div>

<div data-role="header">
    <h1>标准页面头部</h1>
</div>

<div data-role="main" class="ui-content">
    <p>点击下面按钮打开面板。</p>
    <a href="#myPanel" class="ui-btn ui-btn-inline">打开面板</a>
</div>

<div data-role="footer">
    <h1>底部文本</h1>
</div>
</div>

关闭面板

你可以通过点击面板外部区域或按下 Esc 键或滑动来关闭面板。你可以通过使用 data-* 属性来禁用滑动和点击来关闭面板：

属性	值	描述	实例
data-dismissible	true \| false	指定面板是否可以通过点击面板外部区域来关闭。	尝试一下
data-swipe-close	true \| false	指定是否可以通过滑动来关闭。	尝试一下

你可以使用按钮来关闭面板：仅需要在面板的 <div> 中添加 data-rel="close" 属性。从性能上考虑，我们需要键关闭链接的 href 属性指向页面的 ID 。

实例

<div data-role="panel" id="myPanel">
<h2>面板头部..</h2>
<p>面板中的一些文本内容..</p>
<a href="#pageone" data-rel="close" class="ui-btn ui-btn-inline">关闭面板</a>
</div>

面板展示

你可以通过使用 data-display 属性来控制面板的展示方式:

属性值	描述
data-display="overlay"	在内容上显示面板
data-display="push"	是同时"推动"面板和页面。
data-display="reveal"	默认值，将页面像幻灯片一样从屏幕划出，将面板显示出来

实例

面板定位

默认情况下，面板会显示在屏幕的左侧。如果想让面板出现在屏幕的右侧，可以指定 data-position="right" 属性。

实例

你可以指定面板的内容根据页面滚动而滚动。默认情况下面板是随着页面一起滚动的（但是面板的内容仍然位于页面顶部）。如果你需要实现面板内容固定不随页面滚动而滚动，可以在面板添加 the data-position-fixed="true" 属性:

实例

jQuery Mobile 表格

点我分享笔记

感谢您的支持，我会继续努力的!

扫码打赏，你说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

菜鸟教程 -- 学的不仅是技术，更是梦想！

jQuery Mobile 教程

jQuery Mobile 导航栏

jQuery Mobile 网格

jQuery Mobile 可折叠块

可折叠内容块

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

如需创建一个可折叠的内容块，需要为容器添加 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>I'm 现在我默认是展开的。</p>
</div>

嵌套可折叠块

可折叠的内容块是可以彼此嵌套的：

实例

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

	可折叠的内容块可以根据您的需要进行多次嵌套。

可折叠集合

可折叠集合是将可折叠块组合在一起（就像手风琴一样）。当一个新的块被展开时，所有其他的块都会被折叠起来。

创建若干个可折叠的内容块，然后把可折叠内容块用带有 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>

菜鸟教程 -- 学的不仅是技术，更是梦想！

jQuery Mobile 教程

jQuery Mobile 过滤

jQuery Mobile 表格

响应式表格

响应式设计一般用于适配用户各种移动设备。

我们只需要使用一个简单的类名，jQuery Mobile 就能根据屏幕的尺寸自动调整页面内容。

响应式表格让页面内容在移动端和桌面设备上能够很好的适配。

响应式表格有两种类型： reflow(回流) 与 列切换。

回流表格

回流模型表格在屏幕尺寸足够大时是水平显示，而在屏幕尺寸达到足够小时，所有的数据会变成垂直显示。

创建表格，在 <table> 元素上添加 data-role="table" 和 "ui-responsive" 类:

实例

	对于响应式表格，你必须包含 <thead> 和 <tbody> 元素。不要使用 rowspan 或 colspan 属性; 响应式表格中是不支持这两个属性的。

列切换

列切换模型会在宽度不够时隐藏数据。

列切换的表格创建方式如下：

<table data-role="table" data-mode="columntoggle" class="ui-responsive" id="myTable">

默认情况下，jQuery Mobile 会先隐藏表格右侧的列。但是，你可以在表格头部(<th>)通过添加 data-priority 属性指定隐藏列的顺序，data-priority 的值可以是 1 (最高优先级) 到 6 (最低优先级):

<th>I will never be hidden</th>
<th data-priority="1">我是非常重要的列 - 我不会被隐藏</th>
<th data-priority="3">我是重要的列 - 我可能被隐藏</th>
<th data-priority="5">我是不怎么重要的列 - 我最先被隐藏</th>

	如果你没为列指定优先级，则列会一直存在，不会被隐藏。

把上面的两段代码组合起来即可创建一个列切换的表格，这样用户就可以自定义要隐藏表格的哪些列：

实例

<table data-role="table" data-mode="columntoggle" class="ui-responsive" id="myTable">
<thead>
    <tr>
      <th data-priority="6">CustomerID</th>
      <th>CustomerName</th>
      <th data-priority="1">ContactName</th>
      <th data-priority="2">Address</th>
      <th data-priority="3">City</th>
      <th data-priority="4">PostalCode</th>
      <th data-priority="5">Country</th>
    </tr>
</thead>
<tbody>
    <tr>
      <td>1</td>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Obere Str. 57</td>
      <td>Berlin</td>
      <td>12209</td>
      <td>Germany</td>
    </tr>
</tbody>
</table>

我们可以使用 data-column-btn-text 属性来修改切换表格的文本：

实例

表格样式

我们使用 "ui-shadow" 类来为表格添加阴影：

添加阴影

使用 CSS 来进一步设置表格样式:

为所有行添加底部边框

为 <th> 元素添加按钮及为偶数行添加背景

jQuery Mobile 过滤

点我分享笔记

感谢您的支持，我会继续努力的!

扫码打赏，你说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

菜鸟教程 -- 学的不仅是技术，更是梦想！

jQuery Mobile 教程

jQuery Mobile 可折叠块

jQuery Mobile 网格

jQuery Mobile 网格布局

jQuery Mobile 提供了一套基于 CSS 的分列布局。然而，在移动设备上，由于考虑手机的屏幕宽度狭窄，一般不建议使用分栏分列布局。

但有时您想要将较小的元素（如按钮或导航标签）并排地排列在一起，就像是在一个表格中一样。这种情况下，推荐使用分列布局。

网格中的列是等宽的（合计是 100%），没有边框、背景、margin 或 padding。

这里有四种布局网格可供使用：

网格类	列	列宽	对应	实例
ui-grid-solo	1	100%	ui-block-a	尝试一下
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	尝试一下

	在列容器内，子元素拥有的 class 为 ui-block-a\|b\|c\|d\|e 取决于列数。列会浮动并排。实例 1:class 为 ui-grid-a（两列布局），您必须指定 ui-block-a 和 ui-block-b 的两个子元素。实例 2:class 为 ui-grid-b（三列布局），则必须添加 ui-block-a、ui-block-b 和 ui-block-c 的三个子元素。

自定义网格

通过使用CSS，您可以自定义列块：

实例

您也可以通过使用内嵌样式来自定义块：

<div class="ui-block-a" style="border: 1px solid black;"><span>Text..</span></div>

多行

在列中也可以有多个行。

注意：ui-block-a-class 总是创建一个新行：

实例

响应式网格

在小屏幕中，不建议一行中并排太多按钮（文本会缩短）。

我们在容器使用 ui-responsive 类来创建响应式网格：

实例

jQuery Mobile 可折叠块

点我分享笔记

感谢您的支持，我会继续努力的!

扫码打赏，你说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

菜鸟教程 -- 学的不仅是技术，更是梦想！

jQuery Mobile 教程

jQuery Mobile 页面

jQuery Mobile 列表内容

jQuery Mobile 列表视图

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

列表视图是jQuery Mobile中功能强大的一个特性。它会使标准的无序或有序列表应用更广泛。应用方法就是在ul或ol标签中添加data-role="listview"属性。在每个项目(<li>)中添加链接，用户可以点击它：

实例

列表样式的圆角和边缘，使用 data-inset="true" 属性设置:

实例

	默认情况下，列表项的链接会自动变成一个按钮 (不需要 data-role="button")。

列表分隔

列表项也可以转化为列表分割项，用来组织列表，使列表项成组。

指定列表分割，给列表项<li>元素添加 data-role="list-divider" 属性即可：

实例

如果你有一个字母顺序排列的列表，（例如一个电话簿）通过 <ol> 或者<ul> 元素的 data-autodividers="true" 属性设置可以配置为自动生成的项目的分隔:

实例

<ul data-role="listview" data-autodividers="true">
<li><a href="#">Adele</a></li>
<li><a href="#">Agnes</a></li>
<li><a href="#">Billy</a></li>
<li><a href="#">Calvin</a></li>
...
</ul>

	data-autodividers="true" 可以配置为自动生成的项目的分隔。默认情况下，创建的分隔文本是列表项文本的第一个大写字母。

菜鸟教程 -- 学的不仅是技术，更是梦想！

jQuery Mobile 教程

jQuery Mobile 列表视图

jQuery Mobile 过渡

jQuery Mobile 列表内容

jQuery Mobile 列表图标

默认情况下每个列表项都会包含一个箭头图标 "carat-r" (右箭头)。如果要修改这个图标可以使用 data-icon 属性:

实例

<ul data-role="listview">
<li><a href="#">Default is right arrow</a></li>
<li data-icon="plus"><a href="#">data-icon="plus"</a></li>
<li data-icon="minus"><a href="#">data-icon="minus"</a></li>
<li data-icon="delete"><a href="#">data-icon="delete"</a></li>
<li data-icon="location"><a href="#">data-icon="location"</a></li>
<li data-icon="false"><a href="#">data-icon="false"</a></li>
</ul>

	data-icon="false" 将会移除图标。

更完整的 jQuery Mobile 按钮图标，请访问我们的 jQuery Mobile 图标参考手册。

16x16 图标

如果你想在你的列表添加标准的 16x16px 的图标, 可以在列表项中添加 <img> 元素，并使用 "ui-li-icon" 类:

实例

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 列表图标

在列表 <img> 元素使用 class="ui-li-icon" 添加 16x16px 图标：

实例

分割按钮

在JQuery Mobile的列表中，有时需要对选项内容做两个不同的操作，这时，需要对选项中的链接按钮进行分割。实现分割的方法是在<li>元素中再增加一个<a>元素，便可以在页面实现分割效果。

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" 属性并添加数字：

实例

jQuery Mobile pagecontainerbeforeload 事件

注意：显示一个正确的气泡数字，必须修改编程方式。这将在以后的章节解释。

菜鸟教程 -- 学的不仅是技术，更是梦想！

jQuery Mobile 教程

jQuery Mobile 表格

jQuery Mobile 过滤

可过滤元素

所有的元素如果有一个或更多的子元素均可过滤。

如何创建搜索字段:

你想过滤的元素必须使用 data-filter="true" 属性。
创建 <input> 元素并指定 id，元素上加上 data-type="search" 属性。这样就能创建基本的搜索字段。将 <input> 元素放置于一个表单中，表单 <form> 元素使用 "ui-filterable" 类 - 该类会调整搜索字段与过滤元素的外边距。
接着为过滤的元素添加 data-input 属性。该值需要是 <input> 元素的 id。

接下来我们创建一个可过滤的列表：

列表中搜索元素

<form class="ui-filterable">
<input id="myFilter" data-type="search">
</form>

<ul data-role="listview" data-filter="true" data-input="#myFilter">
<li><a href="#">Adele</a></li>
<li><a href="#">Billy</a></li>
<li><a href="#">Calvin</a></li>
</ul>

提示: 可以在搜索字段中使用 placeholder 属性来设置提示信息：

实例

自定义过滤

一般的插入到各个列表项的文本就是作为过滤的文本使用(如 A 对应 "Adele" 或 "B" 对应 "Billy")。但是，如果你想指定自定义的过滤的文本，你需要在子元素中使用 data-filtertext 属性:

实例

<li data-filtertext="fav"><a href="#">Adele</a></li>

	如果你在元素中使用了 data-filtertext 属性，元素的源文本内容在过滤时将被忽略，这时你如果还要查找列表项"Adele"，需要使用的关键字为：f, a, v 或 fav。

菜鸟教程 -- 学的不仅是技术，更是梦想！

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 的单页导航机制使得多个不同页面在同一时间被呈现
每个表单元素必须有一个标签。设置标签的 for 属性来匹配元素的 id

实例

如需隐藏标签，请使用 class ui-hidden-accessible。这在您把元素的 placeholder 属性作为标签时经常用到：

实例

提示： 我们可以使用 data-clear-btn="true" 属性来添加清除输入框内容的按钮 (一个在输入框右侧的 X 图标):

实例

	清除输入框的按钮可以在 <input> 元素中使用，但不能在 <textarea> 中使用。搜索框中 data-clear-btn 默认值为 "true" ，你可以使用 data-clear-btn="false" 移除该图标。

jQuery Mobile 表单图标

表单中的按钮代码是标准的 HTML <input> 元素 (button, reset, submit)。他们会自动渲染样式，可以自动适配移动设备与桌面设备：

实例

如果需要在 <input> 按钮中添加额外的样式，可以使用下表中的 data-* 属性：

属性	值	描述
data-corners	true \| false	指定按钮是否有圆角
data-icon	图标参考手册	指定按钮图标
data-iconpos	left \| right \| top \| bottom \| notext	指定图标位置
data-inline	true \| false	指定是否内联按钮
data-mini	true \| false	指定是否为迷你按钮
data-shadow	true \| false	指定按钮是否添加阴影效果

按钮添加图标：

字段容器

如需让标签和表单元素看起来更适应宽屏，请用带有 "ui-field-contain" 类的 <div> 或 <fieldset> 元素包围 label/form 元素：

实例

	ui-field-contain 类基于页面的宽度为标签和表单控件添加样式。当页面的宽度大于 480px 时，它会自动把标签放置在与表单控件同一线上。当页面的宽度小于 480px 时，标签会被放置在表单元素的上面。

提示：为了防止 jQuery Mobile 为可点击元素自动添加样式，请使用 data-role="none" 属性：

实例

	jQuery Mobile 中的表单提交 jQuery Mobile 通过 AJAX 自动处理表单提交，并将试图集成服务器响应到应用程序的 DOM 中。

jQuery Mobile 表单输入

点我分享笔记

感谢您的支持，我会继续努力的!

扫码打赏，你说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

菜鸟教程 -- 学的不仅是技术，更是梦想！

jQuery Mobile 教程

jQuery Mobile 表单选择

jQuery Mobile 表单输入元素

jQuery Mobile 文本输入框

输入字段是通过标准的 HTML 元素编码的，jQuery Mobile 将为它们添加样式使其看起来更具吸引力，在移动设备上更易使用。您也能使用新的 HTML5 的 <input> 类型：

实例

提示：请使用 placeholder 来指定一个简短的描述，用来描述输入字段的期望值：

<input placeholder="sometext">

文本域

对于多行文本输入可使用 <textarea> 。

注意：当您键入一些文本时，文本域会自动调整大小以适应新增加的行。

实例

搜索输入框

type="search" 类型的输入框是在 HTML5 中新增的，它是为输入搜索定义文本字段：

实例

单选按钮

当用户在有限数量的选择中仅选取一个选项时，使用单选按钮。

为了创建一系列单选按钮，请添加带有 type="radio" 的 input 以及相应的 label。把单选按钮包围在 <fieldset> 元素内。您也可以添加一个 <legend> 元素来定义 <fieldset> 的标题。

提示：请使用 data-role="controlgroup" 来把按钮组合在一起：

实例

<form method="post" action="demo_form.php">
<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="demo_form.php">
<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>

实例

您也可以用一个 field 容器包围 <fieldset>：

实例

<div class="ui-field-contain">
<fieldset data-role="controlgroup">
<legend>请选择您的性别:</legend>
</fieldset>
</div>

如果您想要您的按钮中的一个预先选中，请使用 HTML 中 <input> 的 checked 属性：

实例

你可以将表单放在弹窗中：

实例

<a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline">Show Popup Form</a>

<div data-role="popup" id="myPopup" class="ui-content">
<form method="post" action="demoform.php">
    <div>
      <h3>登录信息</h3>
      <label for="usrnm" class="ui-hidden-accessible">用户名:</label>
      <input type="text" name="user" id="usrnm" placeholder="用户名">
      <label for="pswd" class="ui-hidden-accessible">密码:</label>
      <input type="password" name="passw" id="pswd" placeholder="密码">
    </div>
</form>
</div>

jQuery Mobile 表单选择

点我分享笔记

感谢您的支持，我会继续努力的!

扫码打赏，你说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

菜鸟教程 -- 学的不仅是技术，更是梦想！

jQuery Mobile 教程

jQuery Mobile 表单输入

jQuery Mobile 表单滑动条

jQuery Mobile 表单选择菜单

jQuery Mobile 选择菜单

Iphone 上的选择菜单：

Android/SGS4 设备上的选择菜单：

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

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

实例

<form method="post" action="demoform.html">
<fieldset class="ui-field-contain">
<label for="day">Select Day</label>
<select name="day" id="day">
<option value="mon">Monday</option>
<option value="tue">Tuesday</option>
<option value="wed">Wednesday</option>
</select>
</fieldset>
</form>

提示：如果您有一个带有相关选项的很长的列表，请在 <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" 属性：

实例

多个选择

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

实例

菜鸟教程 -- 学的不仅是技术，更是梦想！

jQuery Mobile 教程

jQuery Mobile 表单选择

jQuery Mobile 滚屏事件

jQuery Mobile 表单滑动条

jQuery Mobile 滑动条控件

滑动条允许您从一个范围的数字中选择一个值：

如需创建滑动条，请使用 <input type="range">：

实例

使用以下属性来规定限制：

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

提示: 如果你想在按钮中显示进度的值可以添加 data-show-value="true" 属性:

实例

提示: 如果你想在滑动按钮上显示进度（类似一个小弹窗）可以使用 data-popup-enabled="true" 属性:

实例

提示：如果您想要高亮突出显示滑动条的值，请添加 data-highlight="true"：

实例

拨动开关

拨动开关通常用于 on/off 或 true/false 按钮：

我们可以使用 <input type="checkbox"> 元素并指定 data-role 为 "flipswitch" 来创建开关:

实例

默认情况下，开关切换的文本为 "On" 和 "Off"。你可以使用 data-on-text 和 data-off-text 属性来修改它：

实例

提示:开关复选框可以使用 "checked" 属性来设置默认的选项：

实例

菜鸟教程 -- 学的不仅是技术，更是梦想！

jQuery Mobile 教程

jQuery Mobile 网格

jQuery Mobile 主题

jQuery Mobile 提供了 2 种不同的主题样式, 从 "a" 到 "b" - 每一种主题的按钮，工具条，内容块等等颜色都不一致，每个主题的视觉效果也不一样。

通过设置元素的data-theme属性可以自定义应用的外观:

<a href="#" class="ui-btn ui-btn-a|b">按钮</a>

值	描述	实例
a	页面为灰色背景黑色文字头部与底部均为灰色背景黑色文字按钮为灰色背景黑色文字激活的按钮和链接为白色文本蓝色背景 input 输入框中 placeholder 属性值为浅灰色，value 值为黑色	尝试一下
b	页面为黑色背景白色文字头部与底部均为黑色背景白色文字按钮为白色文字木炭背景激活的按钮和链接为白色文本蓝色背景 input 输入框中 placeholder 属性值为浅灰色，value 值为白色	尝试一下

按钮样式使用 class="ui-btn",使用 "ui-btn-a|b" 类设置按钮为灰色（默认）或黑色：

<a href="#" class="ui-btn ui-btn-a|b">按钮</a>

	"a" 主题的样式用于大多数元素，子元素通常继承父元素的样式。

主题头部和底部

实例

主题对话框的头部底部

实例

主题按钮

实例

主题图标

实例

<a href="#" class="ui-btn ui-btn-b ui-icon-search ui-btn-icon-notext">Search</a>

主题弹窗

实例

头部和底部的主题按钮

实例

<div data-role="header">
<a href="#" class="ui-btn ui-btn-b">主页</a>
<h1>欢迎访问我的主页</h1>
<a href="#" class="ui-btn">搜索</a>
</div>

<div data-role="footer">
<a href="#" class="ui-btn ui-btn-b">在Facebook上关注我</a>
<a href="#" class="ui-btn">在Twitter上关注我</a>
<a href="#" class="ui-btn ui-btn-b">在Instagram上关注我</a>
</div>

主题导航栏

实例

<div data-role="footer" data-theme="b">
<h1>文本头部</h1>
<div data-role="navbar">
    <ul>
      <li><a href="#" data-icon="home" data-theme="a">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="b">
<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="b">
<ul data-role="listview">
<li><a href="#">Agnes</a></li>
</ul>
</div>

主题表单

实例

<label for="name">Full Name:</label>
<input type="text" name="text" id="name" data-theme="b">

<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="b">
<legend>Click me - I'm collapsible!</legend>

添加新主题

jQuery Mobile 可以在移动页面添加新主题。

通过修改 CSS 文件来添加或编辑新主题(如果你已经下载了 jQuery Mobile)。你只需要拷贝样式模块，然后重命令字母类名（c-z）,并在样式中添加你喜欢的颜色和字体。

你也可以在 HTML 文档中添加主题的新样式，工具条添加类： ui-bar-(a-z) ，文本内容添加类: ui-body-(a-z) ,页面添加类：ui-page-theme-(a-z) 。

实例

	在之前的 jQuery Mobile 版本中, 使用 JavaScript 来为元素继承父主题样式。到了 1.4 版本后，框架更注重性能上的提升，已不再使用 JavaScript 来继承，而是使用纯 CSS。 jQuery Mobile 团队为此已经创建了一个工具，地址为 ThemeRoller。你可以使用该工具来升级旧的主题，使其兼容新的版本。

jQuery Mobile 网格

点我分享笔记

感谢您的支持，我会继续努力的!

扫码打赏，你说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

菜鸟教程 -- 学的不仅是技术，更是梦想！

jQuery Mobile 教程

jQuery Mobile 事件

事件 = 所有不同访问者访问页面的响应动作。

jQuery Mobile 事件

在jQuery Mobile你可以使用任何标准的 jQuery 事件。

除此之外, jQuery Mobile 也提供了针对移动端浏览器的事件：

触摸事件 - 当用户触摸屏幕时触发
滑动事件 - 当用户上下滑动时触发
定位事件 - 当设备水平或垂直翻转时触发
页面事件 - 当页面显示，隐藏，创建，加载或未加载时触发

初始化 jQuery Mobile 事件

在学习jQuery时我们学到了用$(document).ready()来使你的jQuery代码脚本在DOM元素加载完成后才开始执行：

jQuery document ready 事件

但是，在 jQuery Mobile 中, 使用pageinit 事件来设置代码脚本在DOM元素加载完成后开始执行，所以要在任何新页面加载并创建是执行脚本，就需要绑定pageinit事件。

第二个参数 ("#pageone")为指定事件的页面id：

jQuery Mobile pagecreate 事件

	注意： jQuery on() 方法用于绑定事件到选中的元素上。

下一章节我们将更详细介绍 jQuery Mobile 事件。

点我分享笔记

感谢您的支持，我会继续努力的!

扫码打赏，你说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

菜鸟教程 -- 学的不仅是技术，更是梦想！

jQuery Mobile 教程

jQuery Mobile 触摸事件

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

	触摸事件同样可应用与桌面电脑上：点击或者滑动鼠标！

jQuery Mobile 点击

点击事件在用户点击元素时触发。

如下实例：当点击 <p> 元素时，隐藏当前的 <p> 元素：

实例

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

jQuery Mobile 点击不放（长按）

点击不放（长按）事件在点击并不放（大约一秒）后触发

实例

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

jQuery Mobile 滑动

滑动事件是在用户一秒内水平拖拽大于30PX，或者纵向拖曳小于20px的事件发生时触发的事件：

实例

$("p").on("swipe",function(){
$("span").text("滑动检测!");
});

jQuery Mobile 向左滑动

向左滑动事件在用户向左拖动元素大于30px时触发：

实例

$("p").on("swipeleft",function(){
alert("向左滑动!");
});

jQuery Mobile 向右滑动

向右滑动事件在用户向右拖动元素大于30px时触发：

实例

$("p").on("swiperight",function(){
alert("向右滑动!");
});

点我分享笔记

感谢您的支持，我会继续努力的!

扫码打赏，你说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

菜鸟教程 -- 学的不仅是技术，更是梦想！

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 方向改变事件

jQuery Mobile 方向改变（orientationchange）事件

当用户垂直或水平旋转移动设备时，触发方向改变（orientationchange）事件。

如需使用方向改变（orientationchange）事件，请附加它到 window 对象：

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

回调函数可有一个参数，event 对象，返回移动设备的方向："纵向"（设备保持在垂直位置）或"横向"（设备保持在水平位置）：

实例

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

由于方向改变（orientationchange）事件绑定到 window 对象，我们可以使用 window.orientation 属性来设置不同的样式，以便区分纵向和横向的视图：

实例

$(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 属性针对纵向视图返回 0，针对横向视图返回 90 或 -90。

jQuery Mobile 滚屏事件

点我分享笔记

感谢您的支持，我会继续努力的!

扫码打赏，你说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

菜鸟教程 -- 学的不仅是技术，更是梦想！

jQuery Mobile 教程

jQuery Mobile 实例

jQuery Mobile 页面

一个基本的移动网页
 多个页面
 对话框

淡入效果
 从后向前翻转效果
 流动效果
 弹出效果
 滑动效果
 从右到左滑动并淡入效果
 从下到上滑动效果
 从上到下滑动效果
 翻页效果
 没有切换效果
 颠倒效果

jQuery Mobile 页面切换

创建按钮
 内联按钮
 组合按钮
 后退按钮
 带有圆角或不带有圆角的按钮
 小尺寸或常规尺寸的按钮
 带有阴影或不带有阴影的按钮

jQuery Mobile 按钮

jQuery Mobile 按钮图标

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

创建头部栏和尾部栏
 在头部栏添加按钮
 在头部栏左侧添加按钮
 在头部栏右侧添加按钮
 带有按钮的尾部栏
 带有居中对齐按钮的尾部栏
 带有组合按钮的尾部栏
 带有水平组合按钮的尾部栏
 Inline 定位 - 头部栏和尾部栏与页面内容内联
 Fixed 定位 - 头部栏和尾部栏固定在页面的顶部和底部
 Fullscreen 定位 - 头部栏和尾部栏固定在页面的顶部和底部，但是会遮住页面内容

jQuery Mobile 工具栏

创建导航栏
 内容中的导航栏
 尾部中的导航栏
 在导航栏中为按钮添加被选中（按下）外观
 持续添加被选中（按下）外观
 定位导航栏中的图标
 导航栏中 10 个按钮的演示

jQuery Mobile 导航栏

创建可折叠的内容块
 当页面加载时展开内容
 嵌套可折叠块
 可折叠集合
 取消可折叠块上的圆角
 让可折叠块更小
 改变可折叠块的图标
 可折叠列表
 可折叠表单

jQuery Mobile 可折叠块

jQuery Mobile 网格

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

创建列表视图
 带圆角的列表视图
 列表分隔
 自动分隔
 创建搜索过滤
 改变搜索框内的文本
 创建只读列表
 为列表项添加缩略图
 添加 HTML 元素，用信息填充列表项
 添加图标到列表项
 创建带有分割按钮的列表
 让列表项更具功能性
 创建计数气泡
 为列表项创建默认链接图标
 可折叠列表
 创建日历

jQuery Mobile 列表

文本输入框
 文本输入域
 搜索输入框
 单选按钮
 复选框
 水平组合单选按钮和复选框
 带有单选按钮和复选框的 Field 容器
 预选中单选按钮/复选框
 创建选择菜单
 创建带有分隔（optgroup）的选择菜单
 自定义选择菜单
 在选择菜单中选择多个选项
 组合选择菜单
 水平组合选择菜单
 预选中选项
 可折叠表单
 创建滑动条控件
 高亮突出显示滑动条的值
 创建拨动开关
 预选中拨动开关

jQuery Mobile 表单

主题 "a"
主题 "b"
主题头部、内容和尾部
 主题对话框
 主题按钮
 主题图标
 头部和尾部的主题按钮
 主题导航栏
 主题可折叠按钮和内容
 主题列表
 主题分割按钮
 主题可折叠列表
 主题表单
 主题可折叠表单
 自定义主题

jQuery Mobile 主题

点击（Tap）事件
 点击不放（Taphold）事件
 滑动（Swipe）事件
 向左滑动（Swipeleft）事件
 向右滑动（Swiperight）事件
 滚屏开始（Scrollstart）事件
 滚屏结束（Scrollstop）事件
 方向改变（Orientationchange）事件 - 提示方向
 方向改变（Orientationchange）事件 - 为纵向和横向设置不同的样式

jQuery Mobile 触摸事件

点我分享笔记

感谢您的支持，我会继续努力的!

扫码打赏，你说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

菜鸟教程 -- 学的不仅是技术，更是梦想！

jQuery Mobile 教程

jQuery Mobile 图标

jQuery Mobile Data 属性

jQuery Data 属性

jQuery Mobile 使用 HTML5 data-* 属性来为移动设备创建更具触摸友好性和吸引性的外观。

在下面的参考列表中，粗体显示的值为默认值。

按钮

在1.4 版本以后已废弃。使用 CSS 类替代。带有 data-role="button" 的超链接。button 元素、工具栏中的链接以及 input 字段都会自动渲染成按钮样式，不需要添加 data-role="button"。

Data-属性	值	描述
data-corners	true \| false	规定按钮是否圆角
data-icon	图标参考手册	规定按钮的图标。默认没有图标。
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	字母 (a-z)	规定按钮的主题颜色

	如需组合多个按钮，请使用带有 data-role="controlgroup" 属性和 data-type="horizontal\|vertical" 的容器来规定是否水平或垂直组合按钮。

复选框

带有 type="checkbox" 的成双成对的 label 和 input。它们会被自动渲染成按钮样式，data-role 不是必需的。

Data-属性	值	描述
data-mini	true \| false	规定复选框是小尺寸还是常规尺寸
data-role	none	防止 jQuery Mobile 把复选框渲染成按钮样式
data-theme	字母 (a-z)	规定复选框的主题颜色

	如需组合多个复选框，请使用带有 data-role="controlgroup" 属性和 data-type="horizontal\|vertical" 的容器来规定是否水平或垂直组合复选框。

可折叠块

在带有 data-role="collapsible" 的容器内部的后跟任意 HTML 标记的标题元素。

Data-属性	值	描述
data-collapsed	true \| false	规定内容是折叠还是展开
data-collapsed-icon	图标参考手册	规定可折叠按钮的图标。默认是 "plus"
data-content-theme	字母 (a-z)	规定可折叠内容的主题颜色。是否为可折叠内容添加圆角
data-expanded-icon	图标参考手册	规定当内容展开时可折叠按钮的图标。默认是 "minus"
data-iconpos	left \| right \| top \| bottom	规定图标的位置
data-inset	true \| false	规定可折叠按钮是否渲染成圆角且带外边距
data-mini	true \| false	规定可折叠按钮是小尺寸还是常规尺寸
data-theme	字母 (a-z)	规定可折叠按钮的主题颜色

可折叠集合

在带有 data-role="collapsible-set" 的容器内部的可折叠内容块。

Data-属性	值	描述
data-collapsed-icon	图标参考手册	规定可折叠按钮的图标。默认是 "plus"
data-content-theme	字母 (a-z)	规定可折叠按钮的主题颜色
data-expanded-icon	图标参考手册	规定当内容展开时可折叠按钮的图标。默认是 "minus"
data-iconpos	left \| right \| top \| bottom \| notext	规定图标的位置
data-inset	true \| false	规定可折叠块是否渲染成圆角且带外边距
data-mini	true \| false	规定可折叠按钮是小尺寸还是常规尺寸
data-theme	字母 (a-z)	规定可折叠集合的主题颜色

内容

在 1.4 版本已废弃, 1.5 版本后不再支持。使用 data-role="content" 的容器。

Data-属性	值	描述
data-theme	字母 (a-z)	规定内容的主题颜色。

控件组

带有 data-role="controlgroup" 的 <div> 或 <fieldset> 容器。组合单个类型（基于链接的按钮、单选按钮、复选框、select 元素）的多个按钮样式的 input。对于组合表单复选框和单选按钮，推荐在带有 data-role="fieldcontain" 的 <div> 内使用 <fieldset> 容器来改进标签样式。

Data-属性	值	描述
data-mini	true \| false	规定控件组是小尺寸还是常规尺寸
data-type	horizontal \| vertical	规定控件组是水平显示还是垂直显示

对话框

带有 data-role="dialog" 的容器或带有 data-rel="dialog" 的链接。

Data-属性	值	描述
data-close-btn-text	sometext	规定对话框关闭按钮的文本
data-dom-cache	true \| false	规定是否清除各个页面的 jQuery DOM 缓存（如果设置为 true，您必须自己管理 DOM 并在所有移动设备上进行测试）
data-overlay-theme	字母 (a-z)	规定对话框页面的蒙版（背景）颜色
data-theme	字母 (a-z)	规定对话框页面的主题颜色
data-title	sometext	规定对话框页面的标题

增强

带有 data-enhance="false" 或 data-ajax="false" 的容器。

Data-属性	值	描述
data-enhance	true \| false	如果设置为 "true"（默认），jQuery Mobile 会自动渲染页面，使其更适合于移动设备。如果设置为 "false"，框架将不会渲染页面
data-ajax	true \| false	规定是否通过 ajax 加载页面

注意：data-enhance="false" 必须与 $.mobile.ignoreContentEnabled=true" 一同使用来阻止 jQuery Mobile 自动渲染页面。

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

域容器

1.4 版本后已废弃，在 1.5 版本后不再支持，将使用 class="ui-fieldcontain 替代"。包裹在 label/form 元素对，并带有 data-role="fieldcontain" 的容器。

固定工具栏

带有 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	规定当父页面显示时工具栏的可见性

翻转拨动开关

一个带有 data-role="slider" 的 <select> 元素和两个 <option> 元素。

Data-属性	值	描述
data-mini	true \| false	规定开关是小尺寸还是常规尺寸
data-role	none	防止 jQuery Mobile 把拨动开关渲染成按钮样式
data-theme	字母 (a-z)	规定拨动开关的主题颜色
data-track-theme	字母 (a-z)	规定轨道的主题颜色

尾部栏

带有 data-role="footer" 的容器。

Data-属性	值	描述
data-id	sometext	规定唯一 ID。对于持续的尾部栏是必需的
data-position	inline \| fixed	规定尾部栏是与页面内容内联还是保持固定在底部
data-fullscreen	true \| false	规定尾部栏是固定在底部还是覆盖在页面内容上（查看范围更大）
data-theme	字母 (a-z)	规定尾部栏的主题颜色。默认是 "a"

注意：如需启用全屏定位，请使用 data-position="fixed"，然后添加 data-fullscreen 属性到元素上。

头部栏

带有 data-role="header" 的容器。

Data-属性	值	描述
data-id	sometext	规定唯一 ID。对于持续的头部栏是必需的
data-position	inline \| fixed	规定头部栏是与页面内容内联还是保持固定在顶部
data-fullscreen	true \| false	规定头部栏是固定在顶部还是覆盖在页面内容上（查看范围更大）
data-theme	字母 (a-z)	规定头部栏的主题颜色。默认是 "a"

注意：如需启用全屏定位，请使用 data-position="fixed"，然后添加 data-fullscreen 属性到元素上。

链接

所有的链接，包含那些带有 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 - 用于链接到另一个域。Popup - 打开一个弹出窗口。
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 - 定位弹窗在窗口屏幕的中央。

列表

带有 data-role="listview" 的 <ol> 或 <ul>。

Data-属性	值	描述
data-autodividers	true \| false	规定是否自动划分列表项
data-count-theme	字母 (a-z)	规定计数气泡的主题颜色。
data-divider-theme	字母 (a-z)	规定列表分隔的主题颜色。
data-filter	true \| false	规定是否在列表中添加搜索框
data-filter-placeholder	sometext	1.4 版本后废弃。使用 HTML placeholder 属性替代。规定搜索框内的文本。默认是 "Filter items..."
data-filter-theme	字母 (a-z)	规定搜索过滤的主题颜色。
data-icon	图标参考手册	规定列表的图标
data-inset	true \| false	规定列表是否渲染成圆角且带外边距
data-split-icon	图标参考手册	规定分割按钮的图表。默认是 "arrow-r"
data-split-theme	字母 (a-z)	规定分割按钮的主题颜色。
data-theme	字母 (a-z)	规定列表的主题颜色

列表项

带有 data-role="listview" 的 <ol> 或 <ul> 内的 <li>。

Data-属性	值	描述
data-filtertext	sometext	规定当过滤元素时要搜索的文本。该文本将会被过滤，而不是实际的列表项文本
data-icon	图标参考手册	规定列表项图标
data-role	list-divider	规定列表项的分隔
data-theme	字母 (a-z)	规定列表项的主题颜色

注意：data-icon 属性只作用于带有链接的列表项。

导航栏

带有 data-role="navbar" 容器内部的 <li> 元素。

Data-属性	值	描述
data-icon	图标参考手册	规定列表项的图标
data-iconpos	left \| right \| top \| bottom \| notext	规定图标的位置

	导航栏从他们的父容器中继承了主题样本。为导航栏设置 data-theme 属性是不可能的。可以为导航栏中的每个链接单独设置 data-theme 属性。

页面

带有 data-role="page" 的容器。

Data-属性	值	描述
data-add-back-btn	true \| false	自动添加后退按钮，仅限头部栏
data-back-btn-text	sometext	规定后退按钮的一些文本
data-back-btn-theme	字母 (a-z)	规定后退按钮的主题颜色
data-close-btn-text	字母 (a-z)	规定对话框上关闭按钮的一些文本
data-dom-cache	true \| false	规定是否清除各个页面的 jQuery DOM 缓存（如果设置为 true，您必须自己管理 DOM 并在所有移动设备上进行测试）
data-overlay-theme	字母 (a-z)	规定对话框页面的蒙版（背景）颜色
data-theme	字母 (a-z)	规定页面的主题颜色。
data-title	sometext	规定页面标题
data-url	url	更新 URL 的值，而不是用于请求页面的 URL

弹窗

带有 data-role="popup" 的容器。

Data-属性	值	描述
data-corners	true \| false	规定弹窗是否圆角
data-overlay-theme	字母 (a-z)	规定弹出框的蒙版（背景）颜色。默认是透明背景（无）
data-shadow	true \| false	规定弹出框是否有阴影
data-theme	字母 (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 页面切换章节。

单选按钮

带有 type="radio" 的成双成对的 label 和 input。它们会被自动渲染程按钮样式，data-role 不是必需的。

Data-属性	值	描述
data-mini	true \| false	规定按钮是小尺寸还是常规尺寸
data-role	none	防止 jQuery Mobile 渲染单选按钮的样式为增强状态的按钮，使元素以 HTML 原生的状态显示
data-theme	字母 (a-z)	规定单选按钮的主题颜色

	如需组合多个单选按钮，请使用带有 data-role="controlgroup" 属性和 data-type="horizontal\|vertical" 的容器来规定是否水平或垂直组合单选按钮。

选择

所有的 <select> 元素。这些会被自动渲染成按钮样式，date-role 是不必需的。

Data-属性	值	描述
data-icon	图标参考手册	规定 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	字母 (a-z)	规定 jQuery 自带的自定义的选择菜单的主题颜色（与 data-native-menu="false" 一起使用）
data-placeholder	true \| false	可在一个非原生的选择菜单的 <option> 元素上设置
data-role	none	防止 jQuery Mobile 把 select 元素渲染成按钮样式
data-theme	字母 (a-z)	规定 select 元素的主题颜色

	如需组合多个 select 元素，请使用带有 data-role="controlgroup" 属性和 data-type="horizontal\|vertical" 的容器来规定是否水平或垂直组合 select 元素。

滑动块

带有 type="range" 的输入框。这些会被自动渲染成按钮样式，date-role 是不必需的。

Data-属性	值	描述
data-highlight	true \| false	规定滑动轨道是否高亮突出显示
data-mini	true \| false	规定滑动块是小尺寸还是常规尺寸
data-role	none	防止 jQuery Mobile 渲染滑动块控件为按钮样式
data-theme	字母 (a-z)	规定滑动块控件（输入框、手柄和轨道）的主题颜色
data-track-theme	字母 (a-z)	规定滑动块轨道的主题颜色

文本输入框 & 文本输入域

带有 type="text|search|etc." 的 input 或 textarea 元素。这些会被自动渲染成按钮样式，date-role 是不必需的。

Data-属性	值	描述
data-mini	true \| false	规定输入框是小尺寸还是常规尺寸
data-role	none	防止 jQuery Mobile 把输入框/输入域渲染成按钮样式
data-theme	字母 (a-z)	规定输入字段的主题颜色

jQuery Mobile 图标

点我分享笔记

感谢您的支持，我会继续努力的!

扫码打赏，你说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

菜鸟教程 -- 学的不仅是技术，更是梦想！

jQuery Mobile 教程

jQuery Mobile orientationchange 事件

jQuery Mobile 图标

我们可以使用图标类在 jQuery Mobile 中 <a> 和 <button> 元素上添加图标，并对图标进行定位，如下所示：

<a href="#anylink" class="ui-btn ui-icon-refresh ui-btn-icon-left">刷新页面</a> 尝试一下

<button class="ui-btn ui-icon-refresh ui-btn-icon-left">刷新页面</button> 尝试一下

在 <input> 按钮中添加图标，可以使用 data-icon 属性:

<a href="#anylink" data-icon="refresh">刷新页面</a> 尝试一下

我们可以使用 data-icon 属性在导航按钮上添加图标:

<a href="#anylink" data-icon="refresh">刷新页面</a> 尝试一下

如果要在列表按钮中添加图标，可以在 <li> 中使用 data-icon 属性：

<li data-icon="refresh"><a href="#">点我</a></li> 尝试一下

下面我们列出了 jQuery Mobile 提供的所有可用图标：

值	描述	实例
action	动作	尝试一下
alert	警告	尝试一下
audio	视频 / 音频 / 扬声器	尝试一下
arrow-d-l	左下角	尝试一下
arrow-d-r	右下角	尝试一下
arrow-u-l	左上角	尝试一下
arrow-u-r	右上角	尝试一下
arrow-l	左箭头	尝试一下
arrow-r	右箭头	尝试一下
arrow-u	上箭头	尝试一下
arrow-d	下箭头	尝试一下
back	返回	尝试一下
bars	栏目	尝试一下
bullets	栅栏	尝试一下
calendar	日历	尝试一下
camera	照相机	尝试一下
carat-d	向下	尝试一下
carat-l	向左	尝试一下
carat-r	向右	尝试一下
carat-u	向上	尝试一下
check	验证标记	尝试一下
clock	时钟	尝试一下
cloud	云	尝试一下
comment	评论	尝试一下
delete	删除 (X)	尝试一下
edit	编辑 / 铅笔	尝试一下
eye	眼睛	尝试一下
forbidden	静止标记	尝试一下
forward	前进	尝试一下
gear	齿轮	尝试一下
grid	网格	尝试一下
heart	心 / 爱标志	尝试一下
home	家（主页）	尝试一下
info	信息	尝试一下
location	定位 / GPS	尝试一下
lock	锁 / 挂锁	尝试一下
mail	邮件 / 信封	尝试一下
minus	符号、减号	尝试一下
navigation	导航	尝试一下
phone	电话	尝试一下
power	开关 (On/off)	尝试一下
plus	加号	尝试一下
recycle	回收	尝试一下
refresh	刷新	尝试一下
search	搜索	尝试一下
shop	商店、钱包、手提袋	尝试一下
star	星号	尝试一下
tag	标签	尝试一下
user	用户	尝试一下
video	摄像机	尝试一下

jQuery Mobile orientationchange 事件

点我分享笔记

感谢您的支持，我会继续努力的!

扫码打赏，你说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

菜鸟教程 -- 学的不仅是技术，更是梦想！

jQuery Mobile 教程

jQuery Mobile tap 事件

jQuery Mobile 事件

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（失败）。
pagecontainerbeforeload	在载入任何请求前触发
pagecontainerload	在页面成功载入并插入 DOM 后触发
pagecontainerloadfailed	页面载入失败时触发
pagecreate	在页面创建成功之后，触发的事件,但增强完成之前。
pagehide	在页面切换后老页面隐藏之后，触发的事件。
pageinit	1.4.0 版本后已废弃，使用 pagecreate 替代。在页面页面初始化时，触发的事件。
pageload	1.4.0 版本后已废弃，使用 pagecontainerload 替代。在页面完全加载成功后触发。
pageloadfailed	1.4.0 版本后已废弃，使用 pagecontainerloadfailed 替代。如果页面请求失败触发。
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 事件处理器

jQuery Mobile tap 事件

点我分享笔记

感谢您的支持，我会继续努力的!

扫码打赏，你说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

菜鸟教程 -- 学的不仅是技术，更是梦想！

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 事件触发!");
});

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(){ // When leaving pagetwo
alert("现在隐藏页面二");
});

点我分享笔记

感谢您的支持，我会继续努力的!

扫码打赏，你说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

菜鸟教程 -- 学的不仅是技术，更是梦想！

jQuery Mobile 教程

jQuery Mobile CSS 类

jQuery CSS 类

jQuery Mobile CSS 类来设置不同元素的样式。

以下列表包含了通用的 CSS 样式：

全局类

以下类可以在 jQuery Mobile 小工具中使用 (按钮，工具条，面板，表格，列表等。):

Class	描述
ui-corner-all	为元素添加圆角
ui-shadow	为元素添加阴影
ui-overlay-shadow	为元素添加多层阴影
ui-mini	让元素变小

按钮类

除了全局类外，你可以向 <a> 或 <button> 元素添加以下类 (不是 <input> 按钮):

Class	描述
ui-btn	添加在 <a> 元素上并以按钮形式展示
ui-btn-inline	在同一行上显示按钮
ui-btn-icon-top	定位图标在按钮文本之上
ui-btn-icon-right	定位图标在按钮文本的右边
ui-btn-icon-bottom	定位图标在按钮文本之下
ui-btn-icon-left	定位图标在按钮文本的左边
ui-btn-icon-notext	只显示图标
ui-btn-a\|b	指定按钮演示。"a" 是默认的 (灰色背景黑色文本样式), "b" 修改颜色为黑色背景白色文本

图标类

所有可用图片的类用在 <a> 和 <button> 元素上 (查看 jQuery Mobile 图标参考手册了解如何在其他元素上使用):

Class	图标描述	图标
ui-icon-action	动作 (一般用于页面跳转切换)
ui-icon-alert	三角形内的感叹号
ui-icon-audio	音响/音箱
ui-icon-arrow-d-l	左下角箭头
ui-icon-arrow-d-r	右下角箭头
ui-icon-arrow-u-l	左上角箭头
ui-icon-arrow-u-r	右上角箭头
ui-icon-arrow-l	左角箭头
ui-icon-arrow-r	右角箭头
ui-icon-arrow-u	向上箭头
ui-icon-arrow-d	向下箭头
ui-icon-back	返回
ui-icon-bars	三条水平线，一般用于展示列表按钮图标
ui-icon-bullets	用于展示列表按钮图标
ui-icon-calendar	日历
ui-icon-camera	相机
ui-icon-carat-d	向下滑动图标
ui-icon-carat-l	向左滑动图标
ui-icon-carat-r	向右滑动图标
ui-icon-carat-u	向上滑动图标
ui-icon-check	勾选
ui-icon-clock	闹钟
ui-icon-cloud	云
ui-icon-comment	评论 / 消息
ui-icon-delete	删除
ui-icon-edit	编辑 / 铅笔
ui-icon-eye	眼睛
ui-icon-forbidden	禁用标识 sign
ui-icon-forward	撤销 - (返回上一步)
ui-icon-gear	齿轮，一般用于设置按钮图标
ui-icon-grid	网格
ui-icon-heart	心型，可用于文章收藏
ui-icon-home	主页
ui-icon-info	信息
ui-icon-location	定位
ui-icon-lock	锁
ui-icon-mail	邮件 / 信封
ui-icon-minus	减号
ui-icon-navigation	导航
ui-icon-phone	电话
ui-icon-power	开关 (On/off)
ui-icon-plus	加号
ui-icon-recycle	循环标识
ui-icon-refresh	刷新
ui-icon-search	搜索 / 放大镜
ui-icon-shop	商店/购物袋
ui-icon-star	星号
ui-icon-tag	标签
ui-icon-user	用户 / 人物
ui-icon-video	视频 / 相机

主题类 Classes

jQuery Mobile 提供了两个主题类: a (灰) 和 b (黑)。但是，你可以创建你自己的自定义类 - 可定义到字母 "z" （查看 jQuery Mobile 主题）。下表列出了可用的主题类。字母 (a-z) 意为样式可以指定 a 到 z。例如 ui-bar-a 或 ui-bar-b等。

Class	描述
ui-bar-(a-z)	指定栏目演示 - 头部，底部及其他栏目
ui-body-(a-z)	指定内容块的颜色 - 页面内容部分 ( 1.4.0 版本已废弃), 列表视图，弹窗, 侧栏，面板，加载，折叠。
ui-btn-(a-z)	指定按钮颜色
ui-group-theme-(a-z)	定义了控制组的演示 listviews 和 collapsible 集合。
ui-overlay-(a-z)	定义了页面背景颜色，包括对话框，弹窗和其他出现在最顶层的页面容器
ui-page-theme-(a-z)	定义了页面演示

网格类

网格中的列是等宽的（合计是 100%），没有边框、背景、margin 或 padding。这里有四种布局网格可供使用：

网格类	列	列宽	对应	实例
ui-grid-solo	1	100%	ui-block-a	尝试一下
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	尝试一下

更多信息可以查看 jQuery Mobile 网格章节。

点我分享笔记

感谢您的支持，我会继续努力的!

扫码打赏，你说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦