效果图
css
.mui-switch:before {
content: '未加';
color: #999;
}
.mui-switch.mui-active:before {
content: '加了';
color: #fff;
}
html
<div class="weui-cell">
<div class="weui-cell__hd">
<label>此次出车是否加过油:</label>
</div>
<div class="weui-cell__bd">
<div id="IsOilCard" class="mui-switch mui-switch-blue " data-on="加了" data-off="未加">
<div class="mui-switch-handle "></div>
</div>
</div>
</div>
js
//默认未加
$(function () {
var isaddoil = $("#isaddoil").val();
if (isaddoil == "") {
$("#isaddoil").val("未加")
}
})
//监听开关加油事件 加油时赋值
document.getElementById("IsOilCard").addEventListener("toggle", function (event) {
if (event.detail.isActive) {
var btnArray = ['没加油', '知道了'];
mui.confirm('此次出车加油数据需要录入系统,未录入被查到会被罚款!', '提醒!', btnArray, function (e) {
if (e.index == 1) {
$("#isaddoil").val("加了")
console.log("你关闭了报警推送");
} else {
$("#isaddoil").val("未加")
mui("#IsOilCard").switch().toggle();
}
}, 'div')
} else {
}
})