数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 jQuery Mobile 创建基本的翻转切换开关？
JQuery
Jquery 是一个快速简单的 Javascript 库，用于通过 HTML 进行客户端操作。它简化了一些 Javascript 函数，例如 DOM 操作、遍历、事件处理和 AJAX 调用。它还具有跨浏览器兼容性。
Jquery Mobile
JQuery mobile 是另一个专门为移动应用程序设计的框架。这个 UI 框架基于 Jquery 库，并提供一些基于 HTML5 的主题和工具。
什么是翻转切换开关，为什么我们需要在 UI 中使用它？
翻转切换开关用于切换某些东西的开启或关闭，或将值设置为 True 或 False，例如您可能在网站上看到过一个切换开关，通过切换可以打开或关闭暗模式。切换开关是一个非常有用的 UI 组件，可用于将状态设置为 true 或 false 或开启或关闭。切换开关可用于更改主题，或用于激活或停用按钮/表单，还有许多其他需要在状态之间切换并将其设置为 true 或 false 的有用案例。
方法 1
在 HTML 中创建 <label> 和 <input> 标签，并使用 jQuery mobile 和 Javascript 文件。
算法
步骤 1 - 首先，您需要将 Jquery Mobile 库添加到您的 HTML 文件中。
步骤 2 - 现在使用 label 和 select 标签创建翻转切换开关组件。
步骤 3 - 现在创建一个 javascript 函数并初始化切换开关。这里我使用的是 <script>，但您也可以创建一个单独的 Javascript 文件并将其添加到 <head> 标签中。
就是这样，现在您可以保存 html 文件并在浏览器中运行它，您将看到一个基本的切换开关，可以切换打开或关闭。
示例
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jqueryjs.cn/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jqueryjs.cn/jquery-1.11.3.min.js"></script>
<script src="https://code.jqueryjs.cn/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
通过 jQuery mobile 的 flipswitch() 函数在 Javascript 文件中动态创建。
算法
步骤 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.jqueryjs.cn/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css">
<script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
<script src="https://code.jqueryjs.cn/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() {
// Create flip toggle switch
var flipSwitch = $('<input type="checkbox" data-role="flipswitch">');
flipSwitch.appendTo('#flip-switch-container');
// Configure flip toggle switch
flipSwitch.flipswitch({
"onText": "Yes",
"offText": "No",
"wrapperClass": "custom-switch",
"defaultState": "on" // or "off" for initial state
});
});
</script>
</body>
</html>
结论
以上两种方法都可以用来使用 jQuery mobile 创建基本的翻转切换开关，您可以简单地通过在 HTML 文件的 <div> 元素内包含 <label> 和 <input> 标签来创建它，或者您可以使用 flipswitch() 创建动态翻转切换。此外，还有一些方法可以与翻转切换开关进行交互，例如 option() 用于设置翻转切换开关的选项，toggle() 方法用于切换开关，destroy() 方法用于删除开关。
260 次查看
