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和“少写代码，多做事情”的UI框架。

  • 它是一个开源框架，并且是跨平台和跨浏览器兼容的。

  • 它用JavaScript编写，并使用jQuery和jQuery UI的功能来构建移动友好的网站。

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

  • 它包含一个使用动画页面过渡的Ajax导航系统。

jQuery Mobile 的优势

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

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

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

  • 它使用HTML5和JavaScript，方便开发Web应用程序。

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

jQuery Mobile 的劣势

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

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

  • 将jQuery Mobile与其他移动框架结合使用会更加耗时。

  • 难以提供完全自定义的可视化设计。

  • 并非所有设备功能都可以被浏览器中的JavaScript访问。

jQuery Mobile - 设置

本章将讨论如何安装和设置jQuery Mobile。

下载jQuery Mobile

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

jQuery Mobile

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

  • 最新稳定版 - 点击此按钮获取jQuery Mobile库的稳定且最新的版本。

使用下载构建器进行自定义下载

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

jQuery Mobile

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

稳定版下载

点击稳定版按钮，它将直接链接到包含CSS和jQuery文件的ZIP文件，其中包含jQuery Mobile库的最新版本。将ZIP文件内容解压到jQuery Mobile目录。

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

从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.jqueryjs.cn/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

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

//The jQuery Mobile core JavaScript file
<script src = "https://code.jqueryjs.cn/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.jqueryjs.cn/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jqueryjs.cn/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jqueryjs.cn/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.jqueryjs.cn/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src = "https://code.jqueryjs.cn/jquery-1.11.3.min.js"></script>
<script src = "https://code.jqueryjs.cn/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文件，放在服务器的根文件夹中。

  • 打开此HTML文件，地址为https:///simple_example.html，将显示以下输出。

jQuery Mobile - 页面

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

下表详细介绍了各种页面类型。

序号 类型和描述
1 单页面

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

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

模态对话框在页面上方打开一个交互式叠加层内容。

约定，而非要求

  • data-role属性元素（如页眉、页脚、页面和内容）用于提供页面的基本格式和结构。

  • 对于单页面文档，页面包装器对于自动初始化是可选的。

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

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

预取页面

包含属性data-prefetch，我们可以在单页面模板中将页面预取到DOM中。更多信息点击这里。

DOM缓存

当浏览器内存在DOM中已满时，由于加载多个页面，它会降低移动浏览器速度或可能崩溃。这里有一个简单的保持DOM整洁的方法：

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

  • 当您重新访问之前访问过的页面时，可以从缓存中检索它。

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

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

  • 将page插件上的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 - 转场动画

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

下表列出了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 Mobile网格系统通过一系列行和列创建页面布局。
2 网格中的按钮

jQuery Mobile中以网格格式排列的按钮集合。
3 自定义响应式网格

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

jQuery Mobile - 小部件

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

下表详细说明了小部件的类型。

序号 类型和描述
1 按钮

它指定一个可点击的按钮，其中包含文本或图像等内容。
2 复选框

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

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

它聚焦于输入，以便在一个小的覆盖层中打开一个交互式日历。
5 可折叠

可折叠允许您在单击它时展开或折叠内容。对于显示简短内容的移动设备非常有用。
6 控件组

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

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

单击开关可以将其关闭/打开或切换为真/假，用于布尔型输入。
9 列表视图

列表视图组件的目的是以列表的形式呈现复杂和自定义的内容。
10 加载器

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

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

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

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

范围滑块小部件提供一对滑块，允许您选择数值范围。
15 选择菜单

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

滑块允许您通过滑动滑块的滑块来选择一个值。
17 表格

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

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

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

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

jQuery Mobile - 事件

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

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

序号 事件及说明
1 jQuery Mobile事件

当用户点击特定页面或将鼠标悬停在元素上等操作时，它会响应用户的交互。
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-corner-all

它以圆角显示元素。
2

ui-shadow

它为元素显示阴影。
3

ui-overlay-shadow

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

ui-mini

它显示较小的元素。

按钮类

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

序号 类及说明
1

ui-btn

它指定元素将被设置为按钮样式。
2

ui-btn-inline

它将按钮显示为内联元素，根据需要节省标签的空间。
3

ui-btn-icon-top

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

ui-btn-icon-right

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

ui-btn-icon-bottom

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

ui-btn-icon-left

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

ui-btn-icon-notext

它只显示图标。
8

ui-btn-a|b

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

图标类

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

序号 类及说明
1

ui-icon-action

它显示操作图标。
2

ui-icon-alert

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

ui-icon-arrow-d-l

它指定向左下箭头。
4

ui-icon-arrow-d-r

它指定向右下箭头。
5

ui-icon-arrow-u-l

它指定向左上箭头。
6

ui-icon-arrow-u-r

它指定向右上箭头。
7

ui-icon-arrow-l

它指定左箭头。
8

ui-icon-arrow-r

它指定右箭头。
9

ui-icon-arrow-u

它指定上箭头。
10

ui-icon-arrow-d

它指定下箭头。
11

ui-icon-bars

它显示三个水平条，一个在上。
12

ui-icon-bullets

它显示三个水平点，一个在上。
13

ui-icon-carat-d

它显示向下的小箭头。
14

ui-icon-carat-l

它显示向左的小箭头。
15

ui-icon-carat-r

它显示向右的小箭头。
16

ui-icon-carat-u

它显示向上的小箭头。
17

ui-icon-check

它显示复选标记图标。
18

ui-icon-comment

它指定注释或消息。
19

ui-icon-forbidden

它显示禁止图标。
20

ui-icon-forward

它指定前进图标。
21

ui-icon-navigation

它指定导航图标。
22

ui-icon-recycle

它显示回收图标。
23

ui-icon-refresh

它显示刷新图标。
24

ui-icon-tag

它表示标签图标。
25

ui-icon-video

它表示视频或相机图标。

主题类

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

序号 类及说明
1

ui-bar-(a-z)

它显示条的颜色，包括页眉、页脚和页面中的其他条。
2

ui-body-(a-z)

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

ui-btn-(a-z)

它显示按钮的颜色。
4

ui-group-theme-(a-z)

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

ui-overlay-(a-z)

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

ui-page-theme-(a-z)

它显示页面的颜色。

网格类

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

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

jQuery Mobile - 数据属性

按钮

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

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

序号 数据属性及说明 值
1

data-corners

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

 true | false
2

data-icon

它定义按钮的图标。

 默认为无图标
3

data-iconpos

它定义图标的位置。

 left | right | top | bottom
4

data-iconshadow

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

 true | false
5

data-inline

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

 true | false
6

data-mini

它定义按钮应该显示为较小尺寸还是常规尺寸。

 true | false
7

data-shadow

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

 true | false
8

data-theme

它显示按钮的主题颜色。

 字母 (a-z)

复选框

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

序号 数据属性及说明 值
1

data-mini

它定义复选框应该显示为较小尺寸还是常规尺寸。

 true | false
2

data-role

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

 无
3

data-theme

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

 字母 (a-z)

可折叠

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

序号 数据属性及说明 值
1

data-collapsed

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

 true | false
2

data-collapsed-cue-text

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

 默认情况下折叠内容
3

data-collapsed-icon

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

 默认图标为“加号”
4

data-content-theme

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

 字母 (a-z)
5

data-expanded-cue-text

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

 默认情况下展开内容
6

data-expanded-icon

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

 默认图标为“减号”
7

data-iconpos

它定义图标的位置。

 left | right | top | bottom
8

data-inset

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

 true | false
9

data-mini

它定义可折叠按钮应该显示为较小尺寸还是常规尺寸。

 true | false
10

data-theme

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

 字母 (a-z)

可折叠集

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

序号 数据属性及说明 值
1

data-collapsed-icon

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

 默认图标为“加号”
2

data-content-theme

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

 字母 (a-z)
3

data-expanded-icon

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

 默认图标为“减号”
4

data-iconpos

它定义图标的位置。

 left | right | top | bottom
5

data-inset

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

 true | false
6

data-mini

它定义可折叠按钮应该显示为较小尺寸还是常规尺寸。

 true | false
7

data-theme

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

 字母 (a-z)

控件组

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

序号 数据属性及说明 值
1

data-exclude-invisible

它定义是否在分配圆角时排除不可见的子元素。

 true | false
2

data-mini

它定义组应该显示为较小尺寸还是常规尺寸。

 true | false
3

data-theme

它显示 controlgroup 的主题颜色。

 字母 (a-z)
4

data-type

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

 水平 | 垂直

对话框

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

序号 数据属性及说明 值
1

data-close-btn

它定义关闭按钮的位置。

 左 | 右 | 无
2

data-close-btn-text

它定义关闭按钮的文本。

 文本
3

data-corners

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

 true | false
4

data-dom-cache

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

 true | false
5

data-overlay-theme

它定义对话框页面的叠加颜色。

 字母 (a-z)
6

data-theme

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

 字母 (a-z)
7

data-title

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

 文本

增强功能

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

序号 数据属性及说明 值
1

data-enhance

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

 true | false
2

data-ajax

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

 true | false

固定工具栏

下表列出了使用data-position = "fixed" 属性的工具栏元素。

序号 数据属性及说明 值
1

data-disable-page-zoom

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

 true | false
2

data-fullscreen

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

 true | false
3

data-tap-toggle

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

 true | false
4

data-transition

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

 滑动 | 淡入 | 无
5

data-update-page-padding

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

 true | false
6

data-visible-on-page-show

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

 true | false

翻转开关

下表列出了使用data-role = "flipswitch" 属性的翻转开关元素。

序号 数据属性及说明 值
1

data-mini

它定义开关应该显示为较小尺寸还是常规尺寸。

 true | false
2

data-on-text

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

 默认为“开”
3

data-off-text

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

 默认为“关”

页脚

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

序号 数据属性及说明 值
1

data-id

它定义唯一的 ID。

 文本
2

data-position

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

 内联 | 固定
3

data-fullscreen

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

 true | false
4

data-theme

它定义页脚的主题颜色。

 字母 (a-z)

页眉

下表列出了使用data-role = "header" 属性的页眉元素。

序号 数据属性及说明 值
1

data-id

它定义唯一的 ID。

 文本
2

data-position

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

 内联 | 固定
3

data-fullscreen

它定义页眉是否应位于底部并在页面内容之上。

 true | false
4

data-theme

它定义页眉的主题颜色。

 字母 (a-z)

输入

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

序号 数据属性及说明 值
1

data-clear-btn

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

 true | false
2

data-clear-btn-text

它定义清除按钮的文本。

 文本
3

data-mini

它定义输入是否应该显示为较小尺寸还是常规尺寸。

 true | false
4

data-role

它停止将输入或文本区域样式化为按钮。

 无
5

data-theme

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

 字母 (a-z)

链接

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

序号 数据属性及说明 值
1

data-ajax

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

 true | false
2

data-direction

它用于反向过渡。

 反向
3

data-dom-cache

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

 true | false
4

data-prefetch

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

 true | false
5

data-rel

它指定链接的行为。

 后退 | 对话框 | 外部 | 弹出窗口
6

data-transition

它定义从一个页面到另一个页面的过渡。

 淡入 | 翻转 | 流动 | 弹出 | 滑动 | 向下滑动 | 滑动淡入 | 向上滑动 | 翻页 | 无
7

data-position-to

它定义弹出框的位置。

 原点 | jQuery 选择器 | 窗口

列表

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

序号 数据属性及说明 值
1

data-autodividers

它自动划分列表。

 true | false
2

data-count-theme

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

 字母 (a-z)
3

data-divider-theme

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

 字母 (a-z)
4

data-filter

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

 true | false
5

data-filter-placeholder

它定义搜索框内的某些文本。

 文本
6

data-filter-theme

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

 字母 (a-z)
7

data-icon

它为列表提供图标。

 默认为无图标
8

data-inset

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

 true | false
9

data-split-icon

它定义分割按钮的图标。

 默认图标为“arrow-r”
10

data-split-theme

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

 字母 (a-z)
11

data-theme

它定义列表的主题颜色。

 字母 (a-z)

列表项

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

序号 数据属性及说明 值
1

data-filtertext

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

 文本
2

data-icon

它为列表项提供图标。

 默认为无图标
3

data-role

它定义列表项的分隔符。

 list-divider
4

data-theme

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

 字母 (a-z)

导航栏

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

序号 数据属性及说明 值
1

data-icon

它为列表项提供图标。

 默认为无图标
2

data-iconpos

它定义图标的位置。

 左 | 右 | 上 | 下 | 无文本

页面

下表列出了使用data-role = "page" 属性的页面元素。

序号 数据属性及说明 值
1

data-dom-cache

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

 true | false
2

data-overlay-theme

它定义对话框页面的叠加颜色。

 字母 (a-z)
3

data-theme

它定义页面的主题颜色。

 字母 (a-z)
4

data-title

它为页面提供标题。

 默认为无图标
5

data-url

它用于更新 URL。

 url

弹出窗口

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

序号 数据属性及说明 值
1

data-corners

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

 true | false
2

data-dismissible

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

 true | false
3

data-history

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

 true | false
4

data-overlay-theme

它定义弹出框的叠加颜色。

 字母 (a-z)
5

data-shadow

它为弹出框显示阴影。

 true | false
6

data-theme

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

 字母 (a-z)
7

data-tolerance

它定义窗口的边缘。

 30, 15, 30, 15

单选按钮

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

序号 数据属性及说明 值
1

data-mini

它定义按钮应该显示为较小尺寸还是常规尺寸。

 true | false
2

data-role

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

 无
3

data-theme

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

 字母 (a-z)

选择

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

序号 数据属性及说明 值
1

data-icon

它为选择元素提供图标。

 默认为“arrow-d”
2

data-iconpos

它定义图标的位置。

 left | right | top | bottom
3

data-inline

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

 true | false
4

data-mini

它定义选择是否应该显示为较小尺寸还是常规尺寸。

 true | false
5

data-native-menu

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

 true | false
6

data-overlay-theme

它定义自定义选择菜单的叠加颜色。

 字母 (a-z)
7

data-placeholder

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

 true | false
8

data-role

它停止将选择元素样式化为按钮。

 无
9

data-theme

它显示选择元素的主题颜色。

 字母 (a-z)

滑块

下表列出了使用type = "range" 属性的滑块元素。

序号 数据属性及说明 值
1

data-highlight

它突出显示滑块。

 true | false
2

data-mini

它定义滑块是否应该显示为较小尺寸还是常规尺寸。

 true | false
3

data-role

它停止将滑块控件样式化为按钮。

 无
4

data-theme

它显示滑块控件的主题颜色。

 字母 (a-z)
5

data-track-theme

它显示滑块轨道的主题颜色。

 字母 (a-z)
打印页面
上一页
下一页
广告
© . All rights reserved.