ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

javascript bootstrap-switch 开关组件

2022-08-13 00:04:09  阅读:253  来源: 互联网

标签:function control bootstrap bootstrapSwitch javascript state switch msg btn


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

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有