编程语言
首页 > 编程语言> > javascript bootstrap-switch 开关组件

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>

标签：function,control,bootstrap,bootstrapSwitch,javascript,state,switch,msg,btn
来源： https://www.cnblogs.com/kikyoqiang/p/16581741.html