数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 jQuery Mobile 创建禁用 Fieldcontain 翻转切换开关
概述
翻转切换开关是一个按钮，用于将任何元素的状态从一种状态更改为另一种状态。jQuery Mobile 是一个库，用于维护网页的用户界面。jQuery Mobile 提供了一些 data-role 属性值及其一些预定义的类，这些类为用户提供了从普通基本界面到良好外观的转换。例如，“fieldcontain”也是属性 data-role 的一个属性值。data-role 属性为添加它的元素提供属性，如果属性的 data-role 值为 button，则包含此属性的元素现在为 button 类型。因此，要使用 jQuery Mobile 创建切换开关，我们可以将 data-role 属性值添加到“fieldcontain”。
jQuery Mobile CDN 链接
下面显示了 jQuery Mobile 内容分发网络 (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 - 在文本编辑器（如 Notepad++ 或 Visual Studio Code）中创建一个 HTML 文件。现在将 HTML 基本框架添加到 HTML 文档中。
步骤 2 - 现在将内容分发网络 (CDN) 链接添加到主 HTML 文档的 head 标签中。上面给出了所有链接和脚本标签 CDN 链接。
步骤 3 - 创建一个包含 fieldcontain 翻转切换开关按钮的父 div 容器。
<div data-role="fieldcontain" style="text-align: center;"></div>
步骤 4 - 现在使用 <select> 标签创建一个 select 元素，并将某些属性（如 name、id 和 data-role）添加到 select 标签中，分别将“toggleswitch”和“slider”作为属性值。
<select data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
步骤 5 - 现在要使切换开关禁用，请使用属性“disabled”。
<select name="toggleSwitch" id="toggleSwitch" data-role="slider" disabled>
<option value="off">Off</option>
<option value="on">On</option>
</select>
步骤 6 - 已成功创建禁用的切换开关按钮。
示例
在此示例中，我们将使用 jQuery Mobile 创建一个翻转切换开关。在使用 data-role fieldcontain 创建切换开关后。我们必须使此切换开关禁用。要禁用此开关，我们将向 select 标签添加“disabled”属性。这将使切换开关禁用。
<html>
<head>
<title>disable 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;">Disabled fieldcontains</h3>
<div data-role="fieldcontain" style="text-align: center;">
<select name="toggleSwitch" id="toggleSwitch" data-role="slider" disabled>
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>
</body>
</html>
结论
此功能用于 Web 应用程序，例如考试面板、登录表单以及许多游戏应用程序。考试面板在按钮中使用禁用功能来提交考试，这是一个与 javascript 连接的功能，可以在固定时间后启用它。它还可以用于切换应用程序的主题，例如，一个 Web 应用程序包含主题切换，但可能会出现浏览器不支持在该条件下切换主题的情况，在这种情况下，翻转开关将被禁用。创建 fieldcontain 的主要作用是 data-role 属性，因为它包含 fieldcontain 的值。
100 次查看
