关于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