javascript bootstrap-switch 开关组件
2022/8/13 14:23:42
本文主要是介绍javascript bootstrap-switch 开关组件,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
1、
Bootstrap中的switch开关组件
2、
<!DOCTYPE html> <html lang="zh" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>bootstrap-switch</title> <link th:href="@{/js/plugins/layui-v2.5.6/css/layui.css}" rel="stylesheet"/> <link th:href="@{/js/plugins/bootstrap-3.4.1-dist/css/bootstrap.css}" rel="stylesheet"/> <link href="https://cdn.bootcss.com/bootstrap-switch/4.0.0-alpha.1/css/bootstrap-switch.min.css" rel="stylesheet"> <style> .switchDiv { float: left; height: 100%; margin-left: 2%; padding-top: 1.5%; } .switchTitle { float: left; height: 100%; color: #63cdff; font-size: 2.5rem; padding-left: 5%; padding-top: 1%; } </style> </head> <body> <div class="divBox"> <div style="width: 100%;height: 100%;"> <div class="switchTitle">功能A</div> <div class="switchDiv"> <input id="control_btn" type="checkbox" class="" onchange=""> </div> </div> </div> </body> <script type="text/javascript" th:src="@{/js/jquery.min.js}"></script> <script type="text/javascript" th:src="@{/js/bootstrap.min.js}"></script> <script type="text/javascript" th:src="@{/js/plugins/layui-v2.5.6/layui.all.js}"></script> <script src="https://cdn.bootcss.com/bootstrap-switch/4.0.0-alpha.1/js/bootstrap-switch.min.js"></script> <script type="text/javascript"> $(function () { init(); }); function init() { $("#control_btn").bootstrapSwitch({ //初始化按钮 onText: "开启", offText: "关闭", onColor: "success", offColor: "warning", size: "noraml", radioAllOff: "true", onSwitchChange: function (event, state) { let value = $('#control_btn').bootstrapSwitch('state'); if (value) { layer.confirm("<span style='color:#000;'> 是否需要开启功能A?</span>", {icon: 3, title: '操作确认', btn: ['确定', '再想想']} , function () { showOkMsg("开启成功 control_btn state=" + value); }, function () { $("#control_btn").bootstrapSwitch('state', false); return false; // $('#control_btn').bootstrapSwitch('toggleState'); }); } else { showOkMsg("control_btn state=" + value); } } }); } function showOkMsg(msg) { layer.msg("<span style='color: #000'>" + msg + "</span>", {icon: 6, time: 2000}); } function showErrorMsg(msg) { layer.msg("<span style='color: #000'>" + msg + "</span>", {icon: 5, time: 2000}); } </script> </html>
这篇关于javascript bootstrap-switch 开关组件的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-01为什么公共事业机构会偏爱 TiDB :TiDB 数据库在某省妇幼健康管理系统的应用
- 2024-04-26敏捷开发:想要快速交付就必须舍弃产品质量?
- 2024-04-26静态代码分析的这些好处,我竟然都不知道?
- 2024-04-26你在测试金字塔的哪一层?(下)
- 2024-04-26快刀斩乱麻,DevOps让代码评审也自动起来
- 2024-04-262024年最好用的10款ER图神器!
- 2024-04-2203-为啥大模型LLM还没能完全替代你?
- 2024-04-2101-大语言模型发展
- 2024-04-17基于SpringWeb MultipartFile文件上传、下载功能
- 2024-04-14个人开发者,Spring Boot 项目如何部署