如何使用 jQuery Mobile 创建基本的翻转开关?
JQuery
JQuery 是一个快速简单的 JavaScript 库，用于通过 HTML 构建客户端。它简化了一些 JavaScript 函数，例如 DOM 操作、遍历、事件处理和 AJAX 调用。它还具有跨浏览器兼容性。
JQuery Mobile
JQuery Mobile 是另一个专为移动应用程序设计的框架。此 UI 框架基于 JQuery 库，并提供一些基于 HTML5 的主题和工具。
什么是 Flip 切换开关?为什么我们的 UI 中需要它?
Flip 切换开关用于打开或关闭某些内容，或将其设置为 True 或 False。您可能在网站上看到过这样的切换开关，它可以通过切换按钮打开或关闭暗黑模式。切换开关是一个非常有用的 UI 组件，可用于将状态设置为 true 或 false，即打开或关闭。切换开关可用于更改主题，也可用于将按钮/表单设置为活动状态或停用状态。在很多情况下，您需要在状态之间切换并将其设置为 true 或 false。
方法 1
创建 <label> 和 <input> HTML 中的标签以及使用 jQuery Mobile 和 JavaScript 文件。
算法
步骤 1- 首先，您需要将 JQuery Mobile 库添加到您的 HTML 文件中。
步骤 2- 现在使用 label 和 select 标签创建一个 Flip Toggle 开关组件。
步骤 3- 现在创建一个 JavaScript 函数并初始化 Toggle 开关。这里我使用了 <script>，但您也可以创建一个单独的 JavaScript 文件并将其添加到 <head> 中。标签。
就是这样，现在您可以保存 html 文件并在浏览器上运行它，您将看到一个基本的 切换开关，可以打开或关闭。
示例
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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="fieldcontain">
<label for="flip-1">Toggle:</label>
<select name="flip-1" id="flip-1" data-role="flipswitch">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>
<script>
$(document).on("pagecreate", function() {
$("#flip-1").flipswitch();
});
</script>
</body>
</html>
方法 2
通过 JavaScript 文件中 jQuery Mobile 的 flipswitch() 函数动态创建。
算法
步骤 1 在 HTML 文件中包含 jQuery Mobile 的 CSS 和 JavaScript 文件。
步骤 2 创建一个空的 <div> 元素。
步骤 3 现在在 <script> 标签或单独的 js 文件中使用 flipswitch() 函数来创建翻转开关。
示例
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"></script>
</head>
<body>
<div id="flip-switch-container" style="text-align:center;padding: 20px;"></div>
<script>
$(document).on("pagecreate", function() {
// 创建翻转开关
var flipSwitch = $('<input type="checkbox" data-role="flipswitch">');
flipSwitch.appendTo('#flip-switch-container');
// 配置拨动开关
flipSwitch.flipswitch({
"onText": "Yes",
"offText": "No",
"wrapperClass": "custom-switch",
"defaultState": "on" // 或"关闭"表示初始状态
});
});
</script>
</body>
</html>
结论
以上两个函数可用于在 jQuery Mobile 中创建基本的翻转开关。您只需在 HTML 文件中的 <div> 元素内添加 <label> 和 <input> 标签即可创建，也可以使用 flipswitch() 创建动态翻转开关。此外，还有一些方法可用于与翻转开关交互，例如 option() 用于设置翻转开关的选项，toggle() 方法用于切换开关，destroy() 方法用于移除开关。
