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

在移动设备上，翻转开关可以提供一种易于使用的界面元素，允许用户更方便地控制应用程序的状态。在此教程中，我们将通过使用 jQuery Mobile 库来创建一个简单的迷你翻转切换开关，让你快速入门。

准备工作

1. 下载最新版本的 jQuery Mobile 库，并将其包含在你的 HTML 文件中：

<link rel="stylesheet" href="https://code.jquery.com/mobile/latest/jquery.mobile.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>

2. 创建一个简单的 HTML 结构来容纳你的翻转开关：

<div data-role="fieldcontain">
  <label for="flip-1">Switch:</label>
  <select name="flip-1" id="flip-1" data-role="slider">
    <option value="off">Off</option>
    <option value="on">On</option>
  </select>
</div>

创建迷你翻转切换开关

现在，我们可以开始创建我们的迷你翻转切换开关了。我们将创建一个很简单的开关，只包含两个选项：开和关。给我们开始吧！

首先，添加以下 HTML 代码：

<div class="mini-switch">
  <input id="mini-switch" type="checkbox" data-role="flipswitch" data-mini="true" data-wrapper-class="custom-size-flipswitch">
  <label for="mini-switch"></label>
</div>

如你所见，我们添加了一个具有自定义类名“mini-switch”的 div 元素，其中包含了一个 checkbox 和一个 label 元素。

接下来，我们需要创建一个自定义的 CSS 样式表，来处理这个开关。

.ui-flipswitch.ui-custom-size .ui-flipswitch-on {
    border: none;
}

.ui-flipswitch.ui-custom-size .ui-flipswitch-off {
    border: none;
}

.custom-size-flipswitch.ui-mini .ui-flipswitch {
    width: 70px;
    height: 28px;
    margin-top: 2px;
}

.custom-size-flipswitch.ui-mini .ui-slider {
    width: 70px;
    height: 26px;
    top: 1px;
    border: 1px solid #a5a5a5;
    background: #a5a5a5;
}

.custom-size-flipswitch.ui-mini .ui-slider-handle {
    width: 28px;
    height: 26px;
    top: 1px;
    border: 1px solid #a5a5a5;
    background: #ffffff;
}

这样我们的翻转开关就完成了，很容易实现扩展和自定义！