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

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

如何使用 jQuery Mobile 创建基本翻转切换开关？

jQuery Mobile 是一个基于 HTML、CSS、JavaScript 的移动端 UI 框架，它提供了很多易用且美观的 UI 控件，其中包括翻转切换开关。

如何创建翻转切换开关？

在 jQuery Mobile 中，可以使用 <input> 标签创建翻转切换开关。具体步骤如下：

  1. 引入 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>
  1. 创建一个 <div> 元素，并设置 data-role="fieldcontain" 属性，用于包含输入框和标签：
<div data-role="fieldcontain">
  <!-- 输入框和标签将在这里 -->
</div>
  1. 在该 <div> 元素中创建一个 <label> 元素，用于显示标签，同时设置 for 属性与输入框的 id 属性相同，这样点击标签时，输入框的状态也会改变：
<div data-role="fieldcontain">
  <label for="flip-1">翻转切换开关：</label>
  <!-- 输入框将在这里 -->
</div>
  1. 在该 <div> 元素中创建一个 <input> 元素，设置 type="flipswitch"、name 和 id 属性，用于创建输入框：
<div data-role="fieldcontain">
  <label for="flip-1">翻转切换开关：</label>
  <input type="flipswitch" name="flip-1" id="flip-1">
</div>
完整示例
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>翻转切换开关示例</title>
    <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="main" class="ui-content">
        <div data-role="fieldcontain">
          <label for="flip-1">翻转切换开关：</label>
          <input type="flipswitch" name="flip-1" id="flip-1">
        </div>
      </div>
    </div>
  </body>
</html>
参考链接