📌  相关文章
📜  如何使用 jQuery Mobile 创建迷你翻转切换开关？(1)

📅  最后修改于: 2023-12-03 15:08:21.268000             🧑  作者: Mango

如何使用 jQuery Mobile 创建迷你翻转切换开关？

jQuery Mobile 是一个基于 jQuery 的移动 UI 框架，可以快速开发出适用于移动设备的网页。在 jQuery Mobile 中，可以使用 Flip Toggle Switch 组件来创建迷你翻转切换开关。

步骤
第一步：获取 jQuery Mobile

在使用 jQuery Mobile 之前，需要先将其导入到项目中。可以从官方网站（https://jquerymobile.com/）下载最新版本的 jQuery Mobile，或者使用以下代码将其引入到 HTML 文件中。

<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
第二步：创建 Flip Toggle Switch

在 HTML 文件中使用以下代码来创建一个 Flip Toggle Switch。

<label for="flip-1">Switch:</label>
<select name="flip-1" id="flip-1" data-role="flipswitch" data-mini="true">
    <option value="off">Off</option>
    <option value="on">On</option>
</select>

上述代码中，id 为 flip-1 的 select 元素被设置为 Flip Toggle Switch，data-role 属性为 flipswitch，data-mini 属性为 true 则可以创建一个迷你翻转切换开关。

第三步：使用 JavaScript 控制开关

通过 JavaScript 可以对 Flip Toggle Switch 进行控制。可以使用以下代码来获取 Flip Toggle Switch 的状态。

var flipswitch = $("#flip-1");
var state = flipswitch.val();

也可以使用以下代码来设置 Flip Toggle Switch 的状态。

flipswitch.val("on").flipswitch("refresh");

其中，设置值为 on 或 off，调用 flipswitch 方法则可以更新 Switch 的状态。

示例

以下是完整的 HTML 代码示例。

<!DOCTYPE html>
<html>
<head>
    <title>Flip Toggle Switch Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
    <div data-role="page">
        <div data-role="header">
            <h1>Flip Toggle Switch Example</h1>
        </div>
        <div data-role="content">
            <label for="flip-1">Switch:</label>
            <select name="flip-1" id="flip-1" data-role="flipswitch" data-mini="true">
                <option value="off">Off</option>
                <option value="on">On</option>
            </select>
        </div>
        <div data-role="footer">
            <h4>Footer</h4>
        </div>
    </div>
    <script>
        var flipswitch = $("#flip-1");
        var state = flipswitch.val();
        flipswitch.val("on").flipswitch("refresh");
    </script>
</body>
</html>

以上代码会创建一个包含一个 Flip Toggle Switch 的页面。在页面加载完成后，将通过 JavaScript 将 Switch 的状态设置为 on。