jQuery Mobile - 快速指南

jQuery Mobile - 概述

JQuery Mobile 是一个用户界面框架，基于 jQuery Core 构建，用于开发可在移动设备、平板电脑和桌面设备上访问的响应式网站或应用程序。它使用 jQuery 和 jQuery UI 的功能为移动 Web 应用程序提供 API 功能。

它由 jQuery 项目团队于 2010 年开发，用 JavaScript 编写。

为什么使用 jQuery Mobile？

  • 它创建的 Web 应用程序在移动设备、平板电脑和桌面设备上的工作方式相同。

  • 它与其他框架兼容，例如PhoneGap、Whitelight等。

  • 它提供了一组触摸友好的表单输入和 UI 小部件。

  • 渐进式增强为所有移动设备、平板电脑和桌面平台带来了独特的功能，并增加了高效的页面加载和更广泛的设备支持。

jQuery Mobile 的特点

  • 它基于 jQuery Core 和“write less，do more”UI 框架构建。

  • 它是一个开源框架，跨平台、跨浏览器兼容。

  • 它是用 JavaScript 编写的，并使用 jQuery 和 jQuery UI 的功能来构建适合移动设备的网站。

  • 它将 HTML5、CCS3、jQuery 和 jQuery UI 集成到一个框架中，以最少的脚本创建页面。

  • 它包括使用动画页面转换的 Ajax 导航系统。

jQuery 移动的优点

  • 如果您了解 HTML5、CSS3 功能，那么学习和开发应用程序会很容易。

  • 它是跨平台和跨浏览器兼容的，因此您不必担心为每种设备分辨率编写不同的代码。

  • 您可以使用 ThemeRoller 创建自定义主题，而无需编写代码行。它支持所有 HTML5 浏览器。

  • 它使用 HTML5 和 JavaScript 来轻松开发 Web 应用程序。

  • 它的构建方式允许相同的代码自动从移动屏幕缩放到桌面屏幕。

jQuery Mobile 的缺点

  • CSS 主题的选项有限，因此由这些主题构建的网站可能看起来很相似。

  • 使用 jQuery Mobile 开发的应用程序在移动设备上速度较慢。

  • 当您将 jQuery mobile 与其他移动框架结合起来时，它会变得更加耗时。

  • 很难提供完整的定制视觉设计。

  • 设备中的所有功能都无法通过浏览器中的 JavaScript 访问。

jQuery Mobile - 设置

在本章中，我们将讨论如何安装和设置 jQuery Mobile。

下载 jQuery 移动

当您打开链接jquerymobile.com/时，您将看到有两个下载 jQuery 移动库的选项。

jQuery 移动

  • 自定义下载- 单击此按钮可下载库的自定义版本。

  • 最新稳定版- 单击此按钮可获得 jQuery 移动库的稳定版和最新版本。

使用下载生成器自定义下载

使用下载生成器，您可以创建仅包含您需要的库部分的自定义构建。当您下载这个新的自定义版本的 jQuery Mobile 时，您将看到以下屏幕。

jQuery 移动

您可以根据需要选择库，然后单击“构建我的下载”按钮。

下载稳定

单击“稳定”按钮，将直接转到包含 CSS 和 JQuery 文件的 ZIP 文件，以获得最新版本的 jQuery 移动库。将 ZIP 文件内容提取到 jQuery 移动目录。

该版本包含所有文件，包括所有依赖项、大量演示，甚至是库的单元测试套件。该版本有助于入门。

从 CDN 下载 jQuery 库

CDN（内容交付网络）是一个服务器网络，旨在为用户提供文件服务。如果您在网页中使用 CDN 链接，则会将托管文件的责任从您自己的服务器转移到一系列外部服务器。这还有一个优点，即如果您网页的访问者已经从同一 CDN 下载了 jQuery mobile 的副本，则无需重新下载。您可以将以下 CDN 文件包含到 HTML 文档中。

//The jQuery Mobile CSS theme file (optional, if you are overriding the default theme)
<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

//The jQuery core JavaScript file
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>

//The jQuery Mobile core JavaScript file
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

我们在本教程中使用该库的 CDN 版本。我们使用 AMPPS（AMPPS 是 Apache、MySQL、MongoDB、PHP、Perl 和 Python 的 WAMP、MAMP 和 LAMP 堆栈）服务器来执行我们所有的示例。

例子

以下是 jQuery Mobile 的一个简单示例。

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>

   
      
   <body>
      <div data-role = "page" id = "pageone">
         <div data-role = "header">
            <h1>Header Text</h1>
         </div>

         <div data-role = "main" class = "ui-content">
            <h2>Welcome to TutorialsPoint</h2>
         </div>

         <div data-role = "footer">
            <h1>Footer Text</h1>
         </div>
      </div>
   </body>
</html>

上述代码的详细信息是 -

  • 该代码在 head 元素内指定。

<meta name = "viewport" content = "width = device-width, initial-scale = 1">

    • 视口用于（由浏览器）指定显示页面的缩放级别和尺寸。

    • content="width=device-width" 用于设置页面或屏幕设备的像素宽度。

    • 首次加载页面时，initial-scale = 1 设置初始缩放级别。

  • 包括以下 CDN

<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

  • <body> 标签内的内容是浏览器中显示的页面。

<div data-role = "page">
   ...
</div>

  • data-role = "header"在页面顶部创建标题。

  • data-role = "main"用于定义页面的内容。

  • data-role = "footer"在页面底部创建页脚。

  • class = "ui-content"包括页面内容内的填充和边距。

输出

让我们执行以下步骤来看看上面的代码是如何工作的 -

  • 将上述 html 代码保存为服务器根文件夹中的simple_example.html文件。

  • 以 http://localhost/simple_example.html 打开此 HTML 文件，将显示以下输出。

jQuery Mobile - 页面

用户可以与 jQuery Mobile 页面交互，该页面将内容分组为逻辑视图和页面视图。页面视图可以使用页面转换进行动画处理。可以使用 HTML 文档创建多个页面，因此无需向服务器请求内容。

下表详细展示了页面类型。

先生。 类型和描述
1 单页

使用编写模板的标准方法在 HTML 文档中创建单个页面。
2 多页模板

单个 HTML 文档中可以包含多个页面，通过添加多个带有data-role = "page"的 div 来加载该文档。
3 对话框页面

模式对话框在页面上方的交互式覆盖层中打开内容。

约定，而非要求

  • 页眉、页脚、页面和内容等数据角色属性元素用于提供页面的基本格式和结构。

  • 对于单页文档，自动初始化所​​需的页面包装器设置为可选。

  • 对于具有自定义布局的网页，可以排除结构元素。

  • 为了管理页面，当标记未包含页面包装器时，框架会注入页面包装器。

预取页面

包括属性data-prefetch，我们可以在单页面模板中将页面预取到 DOM 中。欲了解更多信息，请点击此处。

DOM缓存

当浏览器内存在 DOM 中变满时，它会降低移动浏览器的速度，或者可能因加载多个页面而崩溃。有一个简单的方法可以保持 DOM 整洁 -

  • 当通过ajax加载页面时，它指示当您重定向到另一个页面时从DOM中删除该页面。

  • 当您再次访问之前访问过的页面时，可以从缓存中检索该页面。

  • 您可以使用以下行告诉 jQuery mobile 将其保留在 DOM 中，而不是删除页面 -

$.mobile.page.prototype.options.domCache = true;

  • 在页面插件上将 domCache 选项设置为 true，以保留先前访问过的 DOM 中的所有页面。

pageContainerElement.page({ domCache: true });

jQuery Mobile - 图标

jQuery Mobile 提供了一组内置图标，可以与按钮、列表视图按钮一起使用，这将使按钮更具吸引力。

下表列出了 jQuery Mobile 框架中使用的一些图标。

先生。 图标区域及说明
1 图标集

它设置按钮中的图标。
2 定位图标

它指定按钮中图标的位置。
3 仅图标

它仅在按钮中显示一个图标。
4 图标阴影

它在您的按钮中添加了图标阴影。
5 删除圆圈

它删除了图标周围的灰色圆圈。
6 黑色或白色图标

它将图标的颜色更改为黑色或白色。
7 结合 alt 和 nodisc

它将alt和nodisc类组合到图标中。

jQuery Mobile - 转换

它允许更改在指定持续时间内发生的属性值，并通过为每个状态应用不同的样式来将元素的Behave从一种状态更改为另一种状态。

下表列出了 jQuery Mobile 框架中使用的一些页面转换 -

先生。 过渡和描述 对于页面 对于对话框
1

褪色

您可以使元素淡入和淡出可见性。

 淡出页面 淡入淡出对话框
2

翻动

将元素从后向前翻转到下一页。

 翻页 翻转对话框
3

流行音乐

您可以创建一个弹出窗口。

 弹出页面 弹出对话框
4

流动

通过远离当前页面来显示下一页。

 流程页 流程对话框
5

滑动

您可以从右向左滑动页面。

 幻灯片页面 滑动对话框
6

幻灯片淡入淡出

从右向左滑动页面并在下一页中淡出。

 幻灯片淡入淡出页面 幻灯片淡入淡出对话框
7

向上滑动

从下到上滑动页面。

 幻灯片页面 幻灯片对话框
8

滑下

从上到下滑动页面。

 下拉页面 下滑对话框
9

转动

您可以翻到下一页。

 翻页 转动对话框
10

没有任何

您无法通过使用此属性来使用任何过渡效果。

 无页面 无对话框

设置转换和全局配置

默认情况下，页面在框架中会有淡入淡出过渡。您可以通过将data-transition属性添加到链接来使用自定义转换。您可以使用全局defaultPageTransition选项为页面使用不同的默认过渡效果。对于对话框，您可以使用defaultDialogTransition选项。

回退过渡

除淡入淡出过渡外，所有过渡均支持 3D 变换。不支持 3D 变换的设备，则必须使用淡入淡出过渡。某些浏览器不支持每种过渡类型的 3D 转换，因此您可以使用淡入淡出作为默认过渡后备。

过渡的最大滚动

当您从页面滚动或滚动到页面时，过渡设置为无，并且滚动位置将为设备屏幕高度的三倍。有时，当您点击任何导航元素时，您可能会响应缓慢或浏览器崩溃；因此，为了避免这种情况，我们通过使用getMaxScrollForTransition函数来使用滚动位置进行过渡。

过渡的最大宽度

当窗口宽度高于像素宽度时，您可以禁用过渡。您可以使用$.mobile.maxTransitionWidth全局选项配置过渡的最大宽度，该选项默认设置为 false。它采用像素宽度或 false 值等值，当窗口高于指定值时，如果不是 false 值，过渡将设置为 none。

同一页面转换

您可以使用页面容器小部件的change()方法的allowSamePageTransition选项将过渡添加到当前页面。

创建自定义过渡

您可以使用$.mobile.transitionHandlers选项在页面中创建自定义过渡，该选项扩展了网站或应用程序上的过渡选择。

jQuery Mobile - 布局

网格系统用于通过一系列容纳内容的行和列来创建页面布局。

下表详细说明了网格的类型。

先生。 类型和描述
1 网格

jQuery 移动网格系统通过一系列行和列创建页面布局。
2 网格中的按钮

jQuery mobile 中网格格式的按钮集合。
3 自定义响应式网格

使用 CSS 中的媒体查询，可以轻松地将基本网格样式扩展到自定义响应式布局。

jQuery Mobile - 小部件

小部件是 jQuery 移动应用程序的小工具或控件。小部件非常方便，因为它们允许您将喜爱的应用程序放在主屏幕上以便快速访问它们。

下表详细展示了 Widget 的类型。

先生。 类型和描述
1 纽扣

它指定包含文本或图像等内容的可单击按钮。
2 复选框

当需要选择多个选项时，请使用复选框。
3 单选框

当需要从众多选项中选择一个选项时，可以使用单选按钮。
4 日期选择器

它专注于在小覆盖层中打开交互式日历的输入。
5 可折叠

可折叠允许您在单击内容时展开或折叠内容。它对于移动设备非常有帮助，它呈现简短的内容。
6 控制组

控制组提供一组按钮来指定看起来像导航组件的单个块。
7 可过滤

通过使用data-filter = "true"属性，您可以过滤任何元素的子元素。
8 翻转开关

翻转开关允许您通过单击布尔样式输入来关闭/打开或真/假开关。
9 列表显示

listview 组件的目的是在列表中呈现复杂且自定义的内容。
10 装载机

jQuery Mobile 提供了将状态加载到元素的不同方法。
11 导航栏

导航栏小部件是一组按钮，可将您链接到其他网页或部分。
12 面板

面板用于在框中显示 DOM 组件。
13 弹出窗口

弹出窗口是一个出现在小窗口中的用户界面，用于显示文本、图像和其他内容。
14 范围滑块

Rangeslider 小部件为您提供了一对手柄，允许您选择数值范围。
15 选择菜单

选择菜单以下拉列表的形式提供各种选项，用户可以从中选择一个或多个选项。
16 滑块

滑块允许您通过滑动滑块手柄来选择一个值。
17 号 桌子

jQuery Mobile 使用表格以行和列的形式表示数据，即以表格格式显示数据。
18 选项卡

选项卡小部件是 jQuery ui 选项卡小部件的扩展，它接受所有方法和选项。
19 文本输入

<input> 标签用于声明输入元素，即允许用户输入数据的控件。
20 工具栏

jQuery 移动工具栏小部件允许您创建页眉和页脚。

jQuery Mobile - 活动

jQuery Mobile 允许创建动态网页。通过使用事件，您可以在元素上设置事件驱动的流程，这些流程由用户的交互触发，例如鼠标单击、鼠标悬停在元素上、按下键盘上的按键等。

下表列出了 jQuery Mobile 支持的一些移动设备事件。

先生。 活动及描述
1 jQuery 移动事件

当用户单击某个页面或将鼠标悬停在某个元素上等时，它会响应用户交互。
2 jQuery 触摸事件

当用户触摸屏幕时，它提供触摸事件。
3 jQuery 滚动事件

当用户向上和向下滚动时，它会触发滚动事件。
4 jQuery 迎新活动

当用户垂直或水平旋转设备时，它会触发方向事件。
5 jQuery 页面事件

它提供用户隐藏、创建、加载或卸载页面时的页面事件。

jQuery Mobile - 表单

表单的创建非常简单且非常灵活，它们是通过标准化表单元素和按钮的组合构建的。

下表详细说明了表单的类型。

先生。 类型和描述
1 基本表格

jQuery Mobile 为表单提供了强大、简单且多功能的布局系统，它结合了表单样式、输入按钮和滑块支持。
2 表单输入

<input> 标签是一个允许用户输入数据的控件。
3 表格选择

以选项的形式，提供了一个下拉列表供选择菜单。
4 表单滑块

滑块允许您通过滑动滑块手柄来选择一个值。
5 表单元素的刷新和自动初始化

Refresh方法用于自行更新表单控件的新状态，并通过JavaScript更新表单控件。

jQuery Mobile - 主题

它在按钮、导航栏、块、链接等上设置不同类型的主题。您可以使用data-theme属性设置主题。

下表描述了 jQuery Mobile 支持的不同领域的主题功能的使用。

先生。 功能及描述
1 主题

它提供两种不同类型的主题，例如主题“a”和主题“b”来自定义应用程序的外观。
2 对话框中的主题页眉和页脚

设置对话框中页眉和页脚的主题。
3 主题按钮、图标和弹出窗口

指定按钮、图标和弹出窗口的主题。
4 页眉和页脚中的主题按钮

显示页眉和页脚中按钮的主题。
5 主题导航栏

应用页眉或页脚中导航栏的主题。
6 主题面板

您可以为面板应用主题。
7 主题化可折叠按钮和拆分按钮

显示可折叠和拆分按钮的主题。
8 主题列表和可折叠列表

显示列表和可折叠列表的主题。
9 可折叠表格

您可以将主题应用于表单。

jQuery Mobile - CSS 类

jQuery CSS 类

您可以使用不同类型的 CSS 类来设置元素的样式，如以下部分所述。

全球课程

以下类可以用作 jQuery Mobile 小部件上的全局类 -

先生。 类别和描述
1

ui 角全部

它显示带有圆角的元素。
2

ui阴影

它显示元素的阴影。
3

ui 覆盖阴影

它显示元素的叠加阴影。
4

用户界面迷你

它显示较小的元素。

按钮类

下表列出了与锚点或按钮元素一起使用的按钮类 -

先生。 类别和描述
1

ui-btn

它指定该元素的样式为按钮。
2

ui-btn-内联

它将按钮显示为内联元素，从而节省了标签所需的空间。
3

ui-btn-图标-顶部

它将图标放置在文本上方。
4

ui-btn-图标-右

它将图标放置在文本的右侧。
5

ui-btn-图标-底部

它将图标放置在文本下方。
6

ui-btn-图标-左

它将图标放置在文本的左侧。
7

ui-btn-图标-notext

它显示唯一的图标。
8

ui-btn-a|b

它显示按钮的颜色（“a”将是默认背景颜色，即灰色，“b”会将背景颜色更改为黑色）。

图标类

下表列出了与锚点或按钮元素一起使用的图标类 -

先生。 类别和描述
1

ui 图标操作

它显示操作图标。
2

ui 图标警报

它在三角形内显示感叹号。
3

ui 图标箭头 dl

它用左箭头指定向下。
4

ui-图标-箭头-dr

它用右箭头指定向下。
5

ui 图标箭头 ul

它用左箭头指定向上。
6

ui 图标箭头 ur

它用右箭头指定向上。
7

ui-图标-箭头-l

它指定向左箭头。
8

ui-图标-箭头-r

它指定右箭头。
9

ui 图标箭头 u

它指定向上箭头。
10

ui 图标箭头 d

它指定向下箭头。
11

ui 图标栏

它显示了 3 个水平条，一个在另一个之上。
12

ui 图标项目符号

它显示了 3 个水平项目符号，一个在另一个之上。
13

ui 图标克拉 d

它显示克拉向下。
14

ui图标克拉-l

它在左侧显示克拉。
15

ui图标克拉-r

它在右侧显示克拉。
16

ui 图标克拉-u

它显示克拉数。
17 号

ui 图标检查

它显示复选标记图标。
18

ui 图标评论

它指定评论或消息。
19

ui图标禁止

它显示禁止图标。
20

ui 图标转发

它指定前进图标。
21

ui图标导航

它指定导航图标。
22

ui图标回收

它显示回收图标。
23

ui 图标刷新

它显示刷新图标。
24

ui 图标标签

它表示标签图标。
25

ui 图标视频

它表示视频或相机图标。

主题班

它提供两种不同类型的主题，例如主题“a”和主题“b”来自定义应用程序的外观。您可以通过附加样本字母 (az) 创建自己的主题类。下表列出了从字母 a 到 z 指定的主题类。

先生。 类别和描述
1

ui-bar-(az)

它显示页面中的栏（包括页眉、页脚和其他栏）的颜色。
2

ui-body-(az)

它显示内容块的颜色，包括列表视图、弹出窗口、滑块、面板、加载器等。
3

ui-btn-(az)

它显示按钮的颜色。
4

ui-组-主题-(az)

它显示控件组、列表视图和可折叠集的颜色。
5

ui-覆盖-(az)

它显示弹出窗口、对话框和页面容器的背景颜色。
6

ui-页面主题-(az)

它显示页面的颜色。

网格类

下表列出了使用等宽、无边框、背景、边距或填充的网格类。

先生。 网格类 列 列宽 对应于
1 ui-grid-solo 1 100% ui-块-a
2 ui-网格-a 2 50%/50% ui-块-a|b
3 ui-网格-b 3 33%/33%/33% ui-块-a|b|c
4 ui-grid-c 4 25%/25%/25%/25% ui-块-a|b|c|d
5 ui-网格-d 5 20%/20%/20%/20%/20% ui-块-a|b|c|d|e

jQuery Mobile - 数据属性

按钮

它使用ui-btn类指定一个可单击的按钮，其中包含文本或图像等内容。它在 1.4 版本中已弃用。使用ui-btn属性而不是使用data-role = "button"属性。

下表列出了与数据属性一起使用的按钮元素。

先生。 数据属性和描述 价值
1

数据角

它定义按钮是否应包含圆角。

 真实 | 错误的
2

数据图标

它定义了按钮的图标。

 默认是没有图标的
3

数据图标

它定义了图标的位置。

 左| 对| 顶部 | 底部
4

数据图标阴影

它定义按钮的图标是否应包含阴影。

 真实 | 错误的
5

数据内联

它定义按钮是否应该内联。

 真实 | 错误的
6

数据迷你型

它定义按钮是否应以较小尺寸或常规尺寸显示。

 真实 | 错误的
7

数据影子

它定义按钮是否应包含阴影。

 真实 | 错误的
8

数据主题

它显示按钮的主题颜色。

 字母 (az)

复选框

下表列出了与type = "checkbox"一起使用的复选框元素。

先生。 数据属性和描述 价值
1

数据迷你型

它定义复选框是否应以较小尺寸或常规尺寸显示。

 真实 | 错误的
2

数据角色

它停止将复选框样式设置为按钮。

 没有任何
3

数据主题

它显示复选框的主题颜色。

 字母 (az)

可折叠

下表列出了与data-role = "collapsible"属性一起使用的可折叠元素。

先生。 数据属性和描述 价值
1

数据崩溃

它指示内容是否应该关闭或展开。

 真实 | 错误的
2

数据折叠提示文本

它使用屏幕阅读器软件向用户显示反馈。

 默认是折叠内容
3

数据折叠图标

它定义了可折叠按钮的图标。

 默认图标是“加号”
4

数据内容主题

它显示可折叠内容的主题颜色。

 字母 (az)
5

数据扩展提示文本

它使用屏幕阅读器软件向用户显示反馈。

 默认是展开内容
6

数据扩展图标

当您展开内容时，它会显示可折叠按钮。

 默认图标是“减号”
7

数据图标

它定义了图标的位置。

 左| 对| 顶部 | 底部
8

数据插入

它定义可折叠按钮是否应显示圆角和边距。

 真实 | 错误的
9

数据迷你型

它定义可折叠按钮是否应以较小尺寸或常规尺寸显示。

 真实 | 错误的
10

数据主题

它显示可折叠按钮的主题颜色。

 字母 (az)

折叠套装

下表列出了与data-role = "collapsibleset"属性一起使用的可折叠集元素。

先生。 数据属性和描述 价值
1

数据折叠图标

它定义了可折叠按钮的图标。

 默认图标是“加号”
2

数据内容主题

它显示可折叠内容的主题颜色。

 字母 (az)
3

数据扩展图标

当您展开内容时，它会显示可折叠按钮。

 默认图标是“减号”
4

数据图标

它定义了图标的位置。

 左| 对| 顶部 | 底部
5

数据插入

它定义可折叠按钮是否应显示圆角和边距。

 真实 | 错误的
6

数据迷你型

它定义可折叠按钮是否应以较小尺寸或常规尺寸显示。

 真实 | 错误的
7

数据主题

它显示可折叠按钮的主题颜色。

 字母 (az)

控制组

下表列出了与data-role = "controlgroup"属性一起使用的 Controlgroup 元素-

先生。 数据属性和描述 价值
1

数据排除不可见

它定义是否在圆角分配中排除不可见的子项。

 真实 | 错误的
2

数据迷你型

它定义组是否应以较小尺寸或常规尺寸显示。

 真实 | 错误的
3

数据主题

它显示控件组的主题颜色。

 字母 (az)
4

数据类型

它指示该组是否应以水平或垂直格式显示。

 水平| 垂直的

对话

下表列出了与data-dialog="true"属性一起使用的对话框元素。

先生。 数据属性和描述 价值
1

数据关闭按钮

它定义关闭按钮的位置。

 左| 对| 没有任何
2

数据关闭 btn 文本

它定义关闭按钮的文本。

 文本
3

数据角

它定义对话框是否应显示圆角。

 真实 | 错误的
4

数据 dom 缓存

它指示是否必须清除各个页面的 DOM 缓存。

 真实 | 错误的
5

数据覆盖主题

它定义对话框页面的覆盖颜色。

 字母 (az)
6

数据主题

它定义对话框页面的主题颜色。

 字母 (az)
7

数据标题

它定义对话框页面的标题。

 文本

强化

下表列出了与data-enhance="false" 或 data-ajax = "false"属性一起使用的增强元素。

先生。 数据属性和描述 价值
1

数据增强

您可以通过将此属性设置为“true”来设置页面样式。如果设置为“false”，则无法设置页面样式。

 真实 | 错误的
2

数据ajax

它指示页面是否必须从 Ajax 加载。

 真实 | 错误的

固定工具栏

下表列出了与data-position =“fixed”属性一起使用的工具栏元素。

先生。 数据属性和描述 价值
1

数据禁用页面缩放

它定义用户是否能够缩放/缩放页面。

 真实 | 错误的
2

数据全屏

它定义工具栏必须位于顶部和/或底部。

 真实 | 错误的
3

数据点击切换

它指示用户是否可以在点击时切换工具栏可见性。

 真实 | 错误的
4

数据转换

当您点击或单击元素时，它会显示过渡效果。

 幻灯片| 褪色| 没有任何
5

数据更新页面填充

它通过使用调整大小、转换和更新布局事件来更新页面的填充。

 真实 | 错误的
6

页面显示数据可见

它定义显示父页面时工具栏的可见性。

 真实 | 错误的

翻转拨动开关

下表列出了与data-role = "flipswitch"属性一起使用的翻转切换元素-

先生。 数据属性和描述 价值
1

数据迷你型

它定义开关是否应以较小尺寸或常规尺寸显示。

 真实 | 错误的
2

文本数据

它定义了翻转开关上的“on”文本。

 默认为“开”
3

数据脱离文本

它定义了翻转开关上的“关闭”文本。

 默认为“关闭”

页脚

下表列出了与data-role="footer"属性一起使用的页脚元素 -

先生。 数据属性和描述 价值
1

数据ID

它定义了唯一的 ID。

 文本
2

数据位置

它定义页脚是否应位于底部或与页面内容内联。

 内联| 固定的
3

数据全屏

它定义页脚是否应位于底部并位于页面内容上方。

 真实 | 错误的
4

数据主题

它定义页脚的主题颜色。

 字母 (az)

标头

下表列出了与data-role = "header"属性一起使用的标头元素。

先生。 数据属性和描述 价值
1

数据ID

它定义了唯一的 ID。

 文本
2

数据位置

它定义标题是否应位于底部或与页面内容内联。

 内联| 固定的
3

数据全屏

它定义标题是否应位于底部并位于页面内容上方。

 真实 | 错误的
4

数据主题

它定义标题的主题颜色。

 字母 (az)

输入

下表列出了与type = "text|search|etc"属性一起使用的输入元素。

先生。 数据属性和描述 价值
1

数据清除按钮

它定义输入元素是否应包含清除按钮。

 真实 | 错误的
2

数据清除 btn 文本

它定义清除按钮的文本。

 文本
3

数据迷你型

它定义输入是否应以较小尺寸或常规尺寸显示。

 真实 | 错误的
4

数据角色

它停止将输入或文本区域设置为按钮。

 没有任何
5

数据主题

它定义输入元素的主题颜色。

 字母 (az)

关联

下表列出了 jQuery Mobile 使用的链接元素。

先生。 数据属性和描述 价值
1

数据ajax

它指示页面是否必须通过 Ajax 加载。

 真实 | 错误的
2

数据方向

它用于反向转换。

 撤销
3

数据 dom 缓存

它指示页面的 jQuery DOM 缓存是否必须清除。

 真实 | 错误的
4

数据预取

它用于将页面预取到 DOM 中。

 真实 | 错误的
5

数据相关

它指定链接的Behave。

 返回 | 对话框| 外部| 弹出窗口
6

数据转换

它定义从一个页面到另一页面的转换。

 褪色| 翻转| 流量| 流行 | 幻灯片| 滑下| 幻灯片淡入淡出 | 幻灯片| 转| 没有任何
7

数据位置到

它定义了弹出框的位置。

 起源 | jQuery 选择器 | 窗户

列表

下表显示了与data-role = "listview"属性一起使用的列表元素。

先生。 数据属性和描述 价值
1

数据自动分配器

它会自动划分列表。

 真实 | 错误的
2

数据计数主题

它定义了计数元素的主题颜色。

 字母 (az)
3

数据分隔符主题

它定义列表分隔符的主题颜色。

 字母 (az)
4

数据过滤器

它用于过滤搜索框中的列表值。

 真实 | 错误的
5

数据过滤器占位符

它定义了搜索框中的一些文本。

 文本
6

数据过滤主题

它定义搜索过滤器的主题颜色。

 字母 (az)
7

数据图标

它提供列表的图标。

 默认是没有图标的
8

数据插入

它定义列表是否应显示圆角和边距。

 真实 | 错误的
9

数据分割图标

它定义了拆分按钮的图标。

 默认图标是“箭头-r”
10

数据分割主题

它定义了分割按钮的主题颜色。

 字母 (az)
11

数据主题

它定义列表的主题颜色。

 字母 (az)

项目清单

下表显示了与data-role = "listview"属性一起使用的列表项元素。

先生。 数据属性和描述 价值
1

数据过滤文本

它用于使用搜索框中的文本过滤列表值。

 文本
2

数据图标

它提供列表项的图标。

 默认是没有图标的
3

数据角色

它定义列表项的分隔符。

 列表分隔符
4

数据主题

它定义列表项的主题颜色。

 字母 (az)

导航栏

下表列出了与data-role = "navbar"属性一起使用的导航栏元素。

先生。 数据属性和描述 价值
1

数据图标

它提供列表项的图标。

 默认是没有图标的
2

数据图标

它定义了图标的位置。

 左| 对| 顶部 | 底部| 没有文本

页

下表列出了与data-role =“page”属性一起使用的页面元素。

先生。 数据属性和描述 价值
1

数据 dom 缓存

它指示是否必须清除各个页面的 DOM 缓存。

 真实 | 错误的
2

数据覆盖主题

它定义对话框页面的覆盖颜色。

 字母 (az)
3

数据主题

它定义页面的主题颜色。

 字母 (az)
4

数据标题

它提供页面的标题。

 默认是没有图标的
5

数据网址

它用于更新 URL。

 网址

弹出窗口

下表列出了与data-role = "popup"属性一起使用的弹出元素。

先生。 数据属性和描述 价值
1

数据角

它定义弹出窗口是否应显示圆角和边距。

 真实 | 错误的
2

数据可驳回

它定义是否应通过单击外部来关闭弹出窗口。

 真实 | 错误的
3

数据历史

它定义弹出窗口在打开时是否应显示项目的历史记录。

 真实 | 错误的
4

数据覆盖主题

它定义了弹出框的覆盖颜色。

 字母 (az)
5

数据影子

它显示弹出框的阴影。

 真实 | 错误的
6

数据主题

它定义弹出框的主题颜色。

 字母 (az)
7

数据容错

它定义了窗口的边缘。

 30, 15, 30, 15

单选按钮

下表列出了与type = "radio"属性一起使用的单选按钮元素。

先生。 数据属性和描述 价值
1

数据迷你型

它定义按钮是否应以较小尺寸或常规尺寸显示。

 真实 | 错误的
2

数据角色

它停止将单选按钮的样式设置为增强按钮。

 没有任何
3

数据主题

它定义单选按钮的主题颜色。

 字母 (az)

选择

下表列出了 jQuery Mobile 使用的选择元素。

<
先生。 数据属性和描述 价值
1

数据图标

它提供选择元素的图标。

 默认为“箭头-d”
2

数据图标

它定义了图标的位置。

 左| 对| 顶部 | 底部
3

数据内联

它定义按钮是否应该内联。

 真实 | 错误的
4

数据迷你型

它定义 select 是否应以较小尺寸或常规尺寸显示。

 真实 | 错误的
5

数据本机菜单

当设置为 false 时，它​​使用自定义菜单。

 真实 | 错误的
6

数据覆盖主题

它定义自定义选择菜单的覆盖颜色。

 字母 (az)
7

数据占位符

用于设置非原生select的选项元素。

 真实 | 错误的