开关样式:
<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>