不廢話,直接上圖:
原始狀態:
點擊確定:
點擊取消或者X
代碼:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="static/layui/css/layui.css"> </head> <body> <form class="layui-form" action=""> <div class="layui-form-item"> <div class="layui-input-block"> <input type="checkbox" name="zzz" lay-skin="switch" lay-filter="switchTest" lay-text="開啟|關閉"> </div> </div> </form> <script src="static/layui/layui.js"></script> <script> //Demo layui.use(['form','jquery','layer'], function () { var form = layui.form; var jquery = layui.jquery; var layer = layui.layer; //監聽提交 form.on('switch(switchTest)', function (data) { console.log(data.elem); //得到checkbox原始DOM對象 console.log(data.elem.checked); //開關是否開啟，true或者false console.log(data.value); //開關value值，也可以通過data.elem.value得到 console.log(data.othis); //得到美化后的DOM對象 var x=data.elem.checked; layer.open({ content: 'test' ,btn: ['確定', '取消'] ,yes: function(index, layero){ data.elem.checked=x; form.render(); layer.close(index); //按鈕【按鈕一】的回調 } ,btn2: function(index, layero){ //按鈕【按鈕二】的回調 data.elem.checked=!x; form.render(); layer.close(index); //return false 開啟該代碼可禁止點擊該按鈕關閉 } ,cancel: function(){ //右上角關閉回調 data.elem.checked=!x; form.render(); //return false 開啟該代碼可禁止點擊該按鈕關閉 } }); return false; }); }); </script> </body> </html>
版權聲明： 本文有 ```...襇簞點 發表於 bloghome博客
轉載聲明： 可自由轉載、引用，但需要屬名作者且注明文章出處。