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

下面是关于如何使用jQuery Mobile 创建 Mini Fieldcontain 翻转切换开关的完整攻略，包含以下步骤：

步骤一：引入jQuery库和jQuery Mobile库

在你的HTML文档中引入jQuery库和jQuery Mobile库

<!-- 引入 jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- 引入 jQuery Mobile -->
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css" />
<script src="https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"></script>

步骤二：创建 Mini Fieldcontain

使用HTML创建一个Mini Fieldcontain，用于包含翻转切换开关。在Mini Fieldcontain中，你可以放置你的标签和表单控件。

<div data-role="fieldcontain" class="ui-mini">
    <label for="flipswitch">切换开关:</label>
    <select id="flipswitch" data-role="flipswitch">
        <option value="off">关</option>
        <option value="on">开</option>
    </select>
</div>

步骤三：初始化 Flipswitch

通过JavaScript初始化Flipswitch，将其转换为翻转切换开关。

$(document).on("pagecreate", function () {
    $("#flipswitch").flipswitch();
});

示例说明：

下面是两个示例，说明如何创建和使用翻转切换开关。

示例一：基本的翻转切换开关

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>示例一：基本的翻转切换开关</title>

        <!-- 引入 jQuery -->
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

        <!-- 引入 jQuery Mobile -->
        <link rel="stylesheet" href="https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css" />
        <script src="https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"></script>

    </head>
    <body>
        <div data-role="page">
            <div data-role="header">
                <h1>示例一：基本的翻转切换开关</h1>
            </div>

            <div data-role="main" class="ui-content">
                <div data-role="fieldcontain" class="ui-mini">
                    <label for="flipswitch">切换开关:</label>
                    <select id="flipswitch" data-role="flipswitch">
                        <option value="off">关</option>
                        <option value="on">开</option>
                    </select>
                </div>
            </div>

            <div data-role="footer">
                <h4>示例一：基本的翻转切换开关</h4>
            </div>
        </div>

        <script>
            $(document).on("pagecreate", function () {
                $("#flipswitch").flipswitch();
            });
        </script>
    </body>
</html>

示例二：与表单一起使用的翻转切换开关

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>示例二：与表单一起使用的翻转切换开关</title>

        <!-- 引入 jQuery -->
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

        <!-- 引入 jQuery Mobile -->
        <link rel="stylesheet" href="https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css" />
        <script src="https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"></script>

    </head>
    <body>
        <div data-role="page">
            <div data-role="header">
                <h1>示例二：与表单一起使用的翻转切换开关</h1>
            </div>

            <div data-role="main" class="ui-content">
                <form>
                    <div data-role="fieldcontain" class="ui-mini">
                        <label for="switch1">选项1:</label>
                        <select id="switch1" data-role="flipswitch">
                            <option value="off">关</option>
                            <option value="on">开</option>
                        </select>
                    </div>

                    <div data-role="fieldcontain" class="ui-mini">
                        <label for="switch2">选项2:</label>
                        <select id="switch2" data-role="flipswitch">
                            <option value="off">关</option>
                            <option value="on">开</option>
                        </select>
                    </div>

                    <button type="submit" name="submit">提交</button>
                </form>
            </div>

            <div data-role="footer">
                <h4>示例二：与表单一起使用的翻转切换开关</h4>
            </div>
        </div>

        <script>
            $(document).on("pagecreate", function () {
                $("#switch1").flipswitch();
                $("#switch2").flipswitch();
            });
        </script>
    </body>
</html>

通过以上示例可以看到，我们可以很容易地创建和使用翻转切换开关，并将其与表单一起使用。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：如何使用jQuery Mobile创建Mini Fieldcontain翻转切换开关 - Python技术站