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

概览

翻转切换开关是一种类似于“开/关”的开关，它可以将HTML元素的状态从一种形式转换为另一种形式。通过使用jQuery Mobile，我们可以创建一个响应式且有吸引力的翻转切换开关。为了创建翻转切换，jQuery提供了一个属性值为“fieldcontain”，该值设置为名为data−role的属性。data−role属性设置为一个包含flip toggle开关属性的div容器。要创建一个基本的翻转切换开关，在select元素中使用data−role值作为slider。

语法

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

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

jQuery移动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文档中添加HTML样板。

步骤2 - 现在将jQuery Mobile的CDN链接添加到head标签中。CDN链接如上所示。

步骤3 - 现在创建一个带有data-role属性的父div容器。将“fieldcontain”值添加到data-role属性中。

<div data-role="fieldcontain"></div>

步骤4 − 现在使用select选项标签作为父容器的子元素来创建翻转切换开关的开关选项。

<select name="toggleSwitch" id="toggleSwitch" data-role="slider">
            <option value="off">Off</option>
            <option value="on">On</option>
        </select>

步骤5 - 已成功创建fieldcontain翻转开关。

示例

将使用data-role属性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文档中添加HTML模板。

步骤2 - 现在将jQuery移动CDN链接添加到头标签中。 CDN链接如上所述。

步骤3 - 现在创建一个具有data-role属性的父div容器。将“fieldcontain”值添加到数据角色属性中。

<div data-role="fieldcontain"></div>

第四步 − 现在创建翻转开关中的开关选项，使用HTML标签语法创建选项标签。

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

第五步 − 在select标签上添加data-role属性slider，并且还要添加data-theme属性，并将值设置为“b”。

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

步骤 5 - 成功创建fieldcontain的翻转开关。

示例

在这个示例中，我们将使用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 flip toggle switch在网页中被用作主题切换翻转组件。它也被用作开 / 关按钮，可以打开或关闭状态。如上例所示，data−role属性的值为”slider”和fieldcontain值一样重要，用于制作切换开关。jQuery mobile是一个用户界面库，具有许多带有jQuery预定义值的data−role属性。