这个插件是一个checkbox,只是在layui中封装了。所以layui的js和css是必不可少的。这是效果图。
话不多说,直接上代码 HTML代码如下:
> <form class="layui-form" action=""> <div class="layui-form-item"> > <label class="layui-form-label">开关</label> <div > class="layui-input-block"> <input type="checkbox" checked="" > name="switch" lay-skin="switch" lay-filter="switchTest" > lay-text="ON|OFF"> </div> </div> </form>JS代码如下:
layui.use(['form'], function () { var form = layui.form; form.on('switch(switchGoodsID)',function (data) { //开关是否开启,true或者false var checked = data.elem.checked; //获取所需属性值 var switch_goods_id = data.elem.attributes['switch_goods_id'].nodeValue; console.log(checked); console.log(switch_goods_id); layer.msg('合理搭配,展示不一样的风格', { time: 5000, //5s后自动关闭 btn: ['确定', '取消'] ,yes: function(index){ //TODO 此时进行ajax的服务器访问,如果返回数据正常,则进行后面代码的调用 data.elem.checked = checked; form.render(); layer.close(index); //按钮【按钮一】的回调 } ,btn2: function(index){ //按钮【按钮二】的回调 data.elem.checked=!checked; form.render(); layer.close(index); //return false; //开启该代码可禁止点击该按钮关闭 } }); }); });