本文小编就为大家带来一篇说layui switch绑定事件,layui switch获取data,layui switch自定义内容,默认关。小编觉得挺不错的,现在就分享给大家,如果你在找layui模板switch,layui switch自定义内容,layui switch默认关,也可以做个参考。一起跟随小编过来看看吧。
layui switch绑定事件,layui switch获取data,layui switch自定义内容,默认关
作者:小程序分析员 发布时间:2019-04-03
layui switch是一个开关,
用来处理简单二元逻辑,
非常方便。
layui switch可以自定义内容,
设置默认的开/关状态,
下面来聊聊layui switch的使用…
一、 layui switch自定义开关内容
<input type="checkbox" name="is_navigate" lay-filter="is_navigate" lay-skin="switch" lay-text="是|否" checked />
其中 lay-text="是|否" 是自定义开关的内容,
当然你还可以像下面这样自定义
lay-text="yes|no"
lay-text="公开|私密"
lay-text="开启|关闭"
…
上面的layui switch开关,
默认是开启的
如果你要让layui switch默认关闭,
只需要把 checkbox 的checked去掉就行
<input type="checkbox" name="is_navigate" lay-filter="is_navigate" lay-skin="switch" lay-text="是|否" />
二、 layui switch绑定事件,layui switch获取data数据
layui switch已经帮你绑定了鼠标点击事件, 你只要 form.on(switch()) 处理你的业务逻辑就可以了。<script type="text/javascript" src="layui/layui.js"></script>
<script>
layui.use(['form','layer'],function(){
var form = layui.form,
layer = parent.layer === undefined ? layui.layer : top.layer;
form.on('switch(is_navigate)', function(data){ // 监听 layui switch绑定事件; 特别注意 is_navigate 要跟上面的 lay-filter="is_navigate" 名称保持一致
// layui switch获取data数据
console.log(data);
console.log(data.elem.checked); // 表示 switch 开关的当前状态
//todo 处理你的逻辑业务
})
})
</script>
layui switch获取data数据中,
data.elem.checked是经常用到的,
表示 switch 当前的状态
当然你也可以在 checkbox 中添加 data-*属性,
然后使用data.elem.dataset来获取对应的值,
这个是比较高级的用法,
以后有机会子恒老师再分享。
猛击这里,
观看子恒老师《微信小程序前后台开发》系列视频
了解实现过程和下载相关源代码
声明:部分文章或图片未能及时与原作者取得联系,若来源标注错误或侵犯到您的权益烦请告知QQ:2334512685,我们会及时删除。
发布:秦子恒博客,欢迎转载分享,请保留出处。
layui switch绑定事件,layui switch获取data,layui switch自定义内容,默认关链接:https://www.qinziheng.com/details/8170/
layui switch绑定事件,layui switch获取data,layui switch自定义内容,默认关相关文章