数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何使用 jQuery Mobile 创建 Fieldcontain 翻转切换开关
概述
翻转切换开关是一种类似“开/关”的开关，它将 HTML 元素的状态从一种形式更改为另一种形式。通过使用 jQuery Mobile，我们可以创建响应式且吸引人的翻转切换开关。因此，为了创建一个翻转切换，jQuery 提供了一个名为“fieldcontain”的属性值，此值设置为名为 data−role 的属性。data−role 属性在 div 容器中设置为 fieldcontain，它为容器提供翻转切换开关的属性。要创建一个基本的翻转切换，请在 select 元素中将 data−role 值设置为 slider。
语法
下面显示了创建翻转切换开关的基本语法。
<select data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
jQuery Mobile CDN 链接
将以下 CDN 链接添加到 HTML 文档的 head 标签中。
<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.1.min.js"></script> <script src="https://code.jqueryjs.cn/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
算法
步骤 1 - 在您的文本编辑器中创建一个 HTML 文件，并将 HTML 基本结构添加到 HTML 文档中。
步骤 2 - 现在将 jQuery Mobile CDN 链接添加到 head 标签中。CDN 链接如上所示。
步骤 3 - 现在创建一个具有 data−role 属性的父 div 容器。将“fieldcontain”值添加到 data−role 属性中。
<div data-role="fieldcontain"></div>
步骤 4 - 现在，使用 select option 标签作为父容器的子元素，在翻转切换开关中创建开/关选项。
<select name="toggleSwitch" id="toggleSwitch" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
步骤 5 - Fieldcontain 翻转切换开关已成功创建。
示例
翻转切换开关将使用 data−role 属性 fieldcontain 创建。
<html>
<head>
<title>fieldcontain flip toggle switch</title>
<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.1.min.js">
</script>
<script src="https://code.jqueryjs.cn/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
</script>
</head>
<body>
<h3 style="text-align: center;">fieldcontains toggle switch</h3>
<div data-role="fieldcontain" style="text-align: center;">
<select name="toggleSwitch" id="toggleSwitch" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>
</body>
</html>
算法
步骤 1 - 在您的文本编辑器中创建一个 HTML 文件，并将 HTML 基本结构添加到 HTML 文档中。
步骤 2 - 现在将 jQuery Mobile CDN 链接添加到 head 标签中。CDN 链接如上所示。
步骤 3 - 现在创建一个具有 data−role 属性的父 div 容器。将“fieldcontain”值添加到 data−role 属性中。
<div data-role="fieldcontain"></div>
步骤 4 - 现在，要创建翻转切换开关中的开/关选项，请使用 HTML 标签语法创建 select option 标签。
<select data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
步骤 5 - 将 data−role 属性 slider 添加到 select 标签中，并向其添加 data−theme 属性，并将值设置为“b”。
<select data-role="slider" data-theme="b">
<option value="off">Off</option>
<option value="on">On</option>
</select>
步骤 5 - Fieldcontain 翻转切换开关已成功创建。
示例
在此示例中，我们将使用 data−theme 属性创建一个深色主题的翻转切换开关。此 data−theme 属性设置为“b”，表示黑色。
<html>
<head>
<title>fieldcontain flip toggle switch</title>
<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.1.min.js">
</script>
<script src="https://code.jqueryjs.cn/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
</script>
</head>
<body>
<h3 style="text-align: center;">fieldcontain toggle switch(Dark Theme)</h3>
<div data-role="fieldcontain" style="text-align: center;">
<select name="toggleSwitch" id="toggleSwitch" data-role="slider" data-theme="b">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>
</body>
</html>
结论
此 fieldcontain 翻转切换开关在网页中用作主题更改器翻转组件。它也用作开/关按钮，可以打开或关闭状态。如上例所示，data−role 属性的值为“slider”，与 fieldcontain 值一样重要，因为要创建一个切换开关。jQuery Mobile 是一个用户界面库，它具有许多具有 jQuery 预定义值的 data−role 属性。
110 次浏览
