关于web开发中的开关功能------layui和bootstrap两种开关
1.两种开关都需要使用外部引入的js包，layui使用layui插件包
第一种layui式开关：
①引入的外部文件
<link href="${ctxStatic}/layui/css/layui.css" rel="stylesheet">
<script src="${ctxStatic}/layui/layui.js"></script>
此js我会上传到下载资源中，供大家使用，也可以到官方网站中下载。
资源链接：
②开关监控事件：
layui.use(["form", "layedit"], function(){
var form = layui.form()
,layer = layui.layer
,layedit = layui.layedit;
//监听指定开关
form.on("switch(switchTest)", function(data){
layer.msg( (this.checked ? "打开" : "关闭"), {
offset: "400px"
});
if(this.checked){
$(this).val("1");
}else{
$(this).val("0");
}
//开关状态判断，是否添加或更新数据
switchStatus($(this));
});
});
这就是和我的业务相关的部分，读者可以忽略【
//开关状态判断，是否是第一次点击开关
function switchStatus(ele){
var type=ele.next().next().next().val();
var reservationSetId=ele.next().next().val();
var reservationName=ele.parents("tr").children().eq(1).text();//$("tr:eq(1)")
var presentation=ele.parents("tr").children().eq(2).text();//$("tr:eq(1)")
$.ajax({
url : "${ctx}/vehicle/wcrReservationSet/insertWrstByType",//按照类型插入
type:"post",
dataType:"json",
data : {"reservationSetId":reservationSetId,"type":type,"reservationName":reservationName,"presentation":presentation},
success : function(result) {//layer.msg("保存成功！", {icon:1,time:1500});
location.reload();
}
});
}
】
③开关html部分
<form class="layui-form" action="">
<div class="layui-form-item">
<div class="layui-input-block">
<input type="checkbox" id="wrst1" name="status" ${wrst1.status==true?"checked":""} class="switch" lay-skin="switch" lay-filter="switchTest" lay-text="ON|OFF">
<input type="hidden" id="wrst1Id" name="reservationSetId" value="${wrst1.reservationSetId}" />
<input type="hidden" id="wrst1Type" name="type" value="1" />
</div>
</div>
</form>
注意几点：第一，必须是form标签且class的值必须‘layui-form’.第二，input类型必须是checkbox，内部可以使用EL表达式与数据库保持状态统一
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
第二种bootstrap式开关
①导包
<link href="${ctxStatic}/bootstrap/css/bootstrap-switch.css"
rel="stylesheet">
<script type="text/javascript"
src="${ctxStatic}/bootstrap/js/highlight.js"></script>
<script type="text/javascript"
src="${ctxStatic}/bootstrap/js/bootstrap-switch.js"></script>
<script type="text/javascript"
src="${ctxStatic}/bootstrap/js/main.js"></script>
②html元素
<div class="switch" >
<input type="checkbox" id="wrst1" name="status" data-size="mini" ${wrst1.status==true?"checked":""} onchange="switchStatus(this,1,"${wrst1.reservationSetId}");" >
</div>
③监控事件：
使用onchange方法的监控，其实我没有使用bootstrap里面的监控，感觉不好用，所以使用onchange事件监控
/*
监控开关：第一次插入数据，以后再点击只是修改status
*/
function switchStatus(ele,type,reservationSetId){
//定义变量，取出Id和type值
var reservationName=$(ele).parents("tr").children().eq(1).text();//$("tr:eq(1)")
var presentation=$(ele).parents("tr").children().eq(2).text();//$("tr:eq(1)")
var status=$(ele).prop("checked");
$.ajax({
url : "${ctx}/vehicle/wcrReservationSet/insertWrstByType",//按照类型插入
type:"post",
dataType:"json",
async:true,
data : {"reservationSetId":reservationSetId,"type":type,"reservationName":reservationName,"presentation":presentation,"status":status},
success : function(result) {
//如果第一次添加，友好提示：开启此项服务，以后只是显示开启、关闭两种状态
if(result==1){
layer.msg("开启-"+reservationName+"-服务！",{time:1500},function(index){
location.reload();
});
}else{
if(status==true){
layer.msg("启用", {time:1500},function(index){
//location.reload();
});
}else{
layer.msg("不启用", {time:1500},function(index){
//location.reload();
});
}
}
}
});
}
OK ,如果有问题，可以咨询本人或查询资料，本人QQ:2537875330
