如何使用 jQuery Mobile 创建迷你主题翻转开关?
在本文中，我们将探讨使用 jQuery Mobile 创建迷你主题翻转开关的过程。这种切换开关以一种用户友好的方式向用户呈现二元选项，允许他们在两个选项之间快速切换。jQuery Mobile 提供了一种简单高效的方法来创建此类控件，使其易于实现和自定义。读完本文后，您将拥有一个可以正常工作的迷你主题翻转开关，并可在您自己的 Web 应用程序中使用。
jQuery Mobile 入门
在深入研究创建翻转开关的过程之前，您需要确保您的项目已包含 jQuery Mobile 库。您可以从官方网站下载，也可以从 CDN 中获取。
语法
$(selector).slider(options)
.slider() 方法
slider() 方法是 jQuery Mobile 库的一部分，用于生成一个滑块控件，允许从一系列值中选择一个值。此滑块控件由 select 元素构成，该元素使用 option 元素指定值的范围。slider() 方法可用于更改滑块的外观和行为，例如定义最小值和最大值、步长和方向。此外，slider() 方法还可以将事件附加到滑块，以响应所选值的变化或监视滑块手柄的移动。
其中 −
selector 是一个字符串，包含与要转换为滑块的 select 元素匹配的选择器表达式。
options 是一个可选对象，可用于指定滑块的选项。
slider() 方法可用的选项包括 −
disabled − 一个布尔值，用于确定滑块是否处于禁用状态。
initSelector − 一个字符串，包含与应自动转换为滑块的 select 元素匹配的选择器表达式。
mini − 一个布尔值，用于确定滑块是否应使用 jQuery Mobile 主题的迷你版本或不是。
theme − 一个字符串，指定滑块使用的主题。
trackTheme − 一个字符串，指定滑块轨道使用的主题。
highlight − 一个布尔值，用于确定滑块在移动手柄时是否突出显示。
step − 一个数字，指定选择值时使用的步长间隔大小。
方法
使用 jQuery Mobile 创建迷你主题翻转开关包含以下步骤:
将 jQuery Mobile 库添加到您的 HTML 文件中。此操作可以通过两种方法实现 - 第一种方法是在 HTML 文档的 head 部分添加对库的引用，第二种方法是获取库并将其集成到您的项目中。
在您的 HTML 文档中创建一个选择组件，并为其添加两个替代组件。主替代组件将体现切换机制的"非活动"方向，而次替代组件将体现切换机制的"活动"方向。
在选择元素上调用 slider() 方法。 slider() 方法会将 select 元素转换为滑块控件，可用作切换开关。
将 data-role 属性添加到 select 元素，并将其值设置为"slider"。此操作会通知 jQuery Mobile 将 select 元素设计为滑块机制。
将 select 元素的 data-mini 属性设置为"true"。这会告知 jQuery Mobile，滑块控件应使用迷你主题，该主题尺寸更小，更适合移动设备。
将 data-theme 属性添加到 select 元素，并将其值赋给所选主题。这将指示 jQuery Mobile 应用哪种样式来控制滑块。
将 data-track-theme 特性添加到指定的选择单元，并将其数字或类别名称设置为滑块控制器轨迹的首选主题。
或者，将 data-highlight 特性附加到所选元素，如果您希望滑块控制器在滑动时突出显示，则将其值指定为"true"。
最后，将事件处理程序绑定到选择元素的 slider 事件。滑块控件的大小发生任何变化时，都会触发滑块事件。在事件处理程序中，您可以检索滑块控件的当前大小，并根据选定的大小执行操作。
示例
以下是我们将在本示例中查看的完整代码 -
<!DOCTYPE html>
<html>
<head>
<title>How to create Mini Theme flip toggle switch using jQuery Mobile?</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.js"></script>
</head>
<body>
<h4>How to create Mini Theme flip toggle switch using jQuery Mobile?</h4>
<div data-role="fieldcontain">
<label for="flip-min">Select slider:</label>
<select name="flip-min" id="flip-min" data-role="slider" data-mini="true">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>
<script>
$(document).ready(function() {
$("#flip-min").slider();
});
</script>
</body>
</html>
结论
总而言之，使用 jQuery Mobile 制作迷你主题的翻转开关是一项简单易行的任务。通过利用库中提供的滑块元素，我们仅用几行代码就创建了一个友好的切换开关。迷你主题的布局使其简洁美观，是屏幕空间有限的 Web 应用程序的绝佳选择。由于其简单的实现和灵活的特性，迷你主题的翻转开关是任何 Web 应用程序的绝佳补充。我相信本文能为您的个人项目提供有益的教程，帮助您将这种实用的机制融入到您的项目中。
