如何使用 jQuery Mobile 创建 Fieldcontain 翻转开关

jqueryhtmlcss更新于 2025/3/16 14:04:17

概述

翻转开关类似于"开/关"开关，它可以将 HTML 元素的状态从一种形式更改为另一种形式。通过使用 jQuery Mobile，我们可以创建一个响应式、美观的翻转开关。为了创建翻转开关，jQuery 提供了一个属性值"fieldcontain"，该值被设置为名为 data-role 的属性。data-role 属性被设置为 div 容器中的 fieldcontain，该容器将该属性设置为翻转开关。要创建基本的翻转开关，请使用 data-role 值作为 select 元素中的滑块。

语法

创建翻转开关的基本语法如下所示。

<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="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 − 在文本编辑器中创建一个 HTML 文件，并向其中添加 HTML 样板代码。

步骤 2 − 现在将 jQuery 移动 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 翻转开关已成功创建。

示例

将使用数据角色属性 fieldcontain 创建翻转开关。

<html>
<head>
    <title>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;">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 样板代码。

步骤 2 − 现在将 jQuery 移动 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 属性滑块添加到选择标签，并向其添加 data-theme 属性并将值设置为"b"。

<select data-role="slider" data-theme="b">
            <option value="off">Off</option>
            <option value="on">On</option>
        </select>

步骤 5− 字段包含的翻转开关已成功创建。

示例

在此示例中，我们将使用 data-theme 属性创建一个深色主题的翻转开关。此 data-theme 属性设置为"b"，表示黑色。

<html>
<head>
    <title>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;">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 翻转切换开关在网页中用作主题切换器翻转组件。它也可用作开关按钮，用于打开或关闭状态。如上例所示，对于切换开关而言，值为"slider"的 data-role 属性与 fieldcontain 值同等重要。jQuery mobile 是一个用户界面库，它包含许多带有 jQuery 预定义值的 data-role 属性。