如何使用 jQuery Mobile 创建迷你主题翻转切换开关？(1)

📌 相关文章

📜 如何使用 jQuery Mobile 创建迷你主题翻转切换开关？(1)

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

使用 jQuery Mobile 创建迷你主题翻转切换开关

简介

翻转开关是一种常见的用户界面元素，它通常用于控制应用程序的开关状态，例如声音、光线等。本文将介绍如何使用 jQuery Mobile 创建一个迷你主题翻转切换开关。

准备工作

为了创建一个迷你主题翻转切换开关，我们需要先做一些准备工作。具体步骤如下：

下载 jQuery Mobile 库。
在 HTML 文件中引入 jQuery Mobile 库和样式表文件。

<head>  
  <meta charset="utf-8">
  <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.10.2.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

创建一个
元素，用于包含迷你主题翻转切换开关。

创建迷你主题翻转切换开关

创建迷你主题翻转切换开关的步骤如下：

在
元素中添加一个带有 data-role="fieldcontain" 属性的
元素，并给它一个唯一的 ID。

<div>
  <fieldset data-role="fieldcontain" id="toggleDiv">
  </fieldset>
</div>

在
元素中添加一个带有 data-role="controlgroup" 和 data-type="horizontal" 属性的
元素，并在其中创建两个元素和两个元素。

<fieldset data-role="fieldcontain" id="toggleDiv">
  <div data-role="controlgroup" data-type="horizontal">
    <label for="flip-1">ON</label>
    <input type="checkbox" name="flip-1" id="flip-1" data-theme="a">
    <label for="flip-2">OFF</label>
    <input type="checkbox" name="flip-2" id="flip-2" data-theme="a" checked>
  </div>
</fieldset>

最后，通过设置 data-mini="true" 属性，将开关缩小至适合手机屏幕。

<fieldset data-role="fieldcontain" id="toggleDiv">
  <div data-role="controlgroup" data-type="horizontal" data-mini="true">
    <label for="flip-1">ON</label>
    <input type="checkbox" name="flip-1" id="flip-1" data-theme="a">
    <label for="flip-2">OFF</label>
    <input type="checkbox" name="flip-2" id="flip-2" data-theme="a" checked>
  </div>
</fieldset>

完整代码

<head>  
  <meta charset="utf-8">
  <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.10.2.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
  <div>
    <fieldset data-role="fieldcontain" id="toggleDiv">
      <div data-role="controlgroup" data-type="horizontal" data-mini="true">
        <label for="flip-1">ON</label>
        <input type="checkbox" name="flip-1" id="flip-1" data-theme="a">
        <label for="flip-2">OFF</label>
        <input type="checkbox" name="flip-2" id="flip-2" data-theme="a" checked>
      </div>
    </fieldset>
  </div>
</body>

以上就是本文介绍的创建迷你主题翻转切换开关的方法，相信大家可以轻松掌握。