如何使用 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="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>

算法

步骤 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="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 的值。

有用资源

• css 参考教程 - 该教程包含有关 css 的更多信息:https://www.cainiaomax.com/css/