极客笔记如何使用jQuery Mobile创建禁用的字段切换开关
概述
翻转切换开关是一个按钮，用于更改任何元素的状态，从一个状态转换到另一个状态。jQuery移动是一个为网页维护用户界面的库。jQuery移动提供了一些数据-role属性的值，并附带一些预定义的类，这些类提供了一个好看的外观，从常规基本界面到用户界面。类似地，”fieldcontain”也是data-role属性的一个属性值。data-role属性为添加了该属性值的元素提供属性，如果data-role属性的值是button，那么包含该属性的元素现在是按钮类型。因此，要使用jQuery移动制作一个切换开关，我们可以将数据-role属性的值添加到”fieldcontain”中。
jQuery移动CDN链接
以下是jQuery移动内容分发网络CDN链接，将这些链接添加到HTML文档的head标签中。
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
算法
第一步 − 在文本编辑器（如notepad++或visual studio code）中创建一个HTML文件。现在将HTML基本模板添加到HTML文档中。
第二步 − 现在在主HTML文档的head标签中添加内容传送网络（CDN）链接。所有链接和脚本标签的CDN链接如上所示。
第三步 − 创建一个包含fieldcontain翻转切换按钮的父div容器。
<div data-role="fieldcontain" style="text-align: center;"></div>
第4步 - 使用
<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字段容器创建开关后，我们需要将开关禁用。为了禁用这个开关，我们会给选择标签添加“disabled”属性。这将使得开关变为禁用状态。
<html>
<head>
<title>disable fieldcontain flip toggle switch</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js">
</script>
<script src="http://code.jquery.com/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的值。