layui 開關switch

效果圖：

html代碼：

<input type="checkbox" name="switch" lay-skin="switch" lay-text="正常|關閉"
                                   lay-filter="switchTest"
                                   value="1">
                            <div class="layui-unselect layui-form-switch layui-form-onswitch" lay-skin="_switch">
                                <em>ON</em><i></i>
                            </div>

 

js代碼：

<script>
// 狀態監聽開關
        layui.use(['form'], function () {
            var form = layui.form
                , layer = layui.layer
            //監聽指定開關
            form.on('switch(switchTest)', function (data) {
                if (this.checked) {
                    layer.msg('開關checked：' + (this.checked ? 'true' : 'false'), {
                        offset: '6px'
                    });
                    layer.tips('溫馨提示：請注意開關狀態的文字可以隨意定義，而不僅 僅是ON|OFF', data.othis)
                } else {
                    layer.msg('開關： 關掉了', {
                        offset: '6px'
                    });
                }
                //do some ajax opeartiopns;
            });
        });
</script>