bootstrapSwitch开关实现按钮切换

1,000 阅读1分钟

开关样式:

引入配置文件:

 <link href="https://cdn.bootcss.com/bootstrap-switch/4.0.0-alpha.1/css/bootstrap-switch.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-switch/4.0.0-alpha.1/js/bootstrap-switch.min.js"></script>

开关初始化:

/初始化
function init() {
    $('[name="status"]').bootstrapSwitch({    //初始化按钮
        onText: "ON",
        offText: "OFF",
        onColor: "success",
        offColor: "info",
        size: "small",
        onSwitchChange: function (event, state) {

            if (state == true && !initFlag) {

                // flag = true
                //更改开关状态时方法
                server(1)  
            } else if (state == false) {
                // flag = false
                //更改开关状态时方法
                server(0)

            }
        },
        onInit: function (event, state) {
            //初始化获取开关值
            var switchCode = "SEND_USERS_SWITCH";
            $.ajax({
                url: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
                type: "GET",
                async: true,
                data: {
                    switchCode: switchCode
                },
                dataType: "json",
                success: function (data) {
                    var resData = data.resData;
                    if (resData != null) {
                        if (1 == resData.status) {
                     //如果开关初始化为开的状态,设置状态为true,防止初始化的时候自动调用更改状态接口
                            initFlag = true
                            $('[name="status"]').bootstrapSwitch('state', true);
                        } else {
                            $('[name="status"]').bootstrapSwitch('state', false);
                        }
                    } else {
                        $('[name="status"]').bootstrapSwitch('state', false);
                    }

                },
                error: function () {
                    alert("网络异常!")
                }
            });

        },
    });
}

//更改推送按钮状态按钮
function server(flag) {
    var switchCode = "SEND_USERS_SWITCH";
    $.ajax({
        url: "XXXXXXXXXXXXXXXXXXXXXXXXXXXX",
        type: "GET",
        async: true,
        data: {
            status: flag,
            switchCode: switchCode
        },
        dataType: "json",
        success: function (data) {
            var resData = data.resData;
            if (100 == data.resCode && resData != null) {
                alert("开关更改成功!")
            }

        },
        error: function () {
            alert("网络异常!")
        }
    });
}

页面代码:

<div style="margin-top: 5px;">自动推送开关:<input style="margin-right: 5px;" name="status" type="checkbox"></div>