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>
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/280186.html