Layui给switch添加响应事件的例子


Posted in Javascript onSeptember 03, 2019

今天做项目时,遇到layui中的switch,需要给这个开关添加事件,也就是当你点击是会弹框提示

刚开始我用传统的处理方法,直接给它添加个js事件,到最后会发现,没响应,于是我查文档,逛论坛终于找到一个解决办法,代码如下

<input type="checkbox" name="zzz" lay-skin="switch" lay-filter="switchTest" lay-text="开启|关闭" checked="checked">//开关
 //js处理
 layui.use(['form', 'jquery', 'layer'], function () {
      var form = layui.form;
      var jquery = layui.jquery;
      var layer = layui.layer;
      //监听开关事件
      form.on('switch(switchTest)', function (data) {
        var contexts;
        var x = data.elem.checked;//判断开关状态
        if (x==true) {
          contexts = "你确定要启动么";
        } else {
          contexts = "你确定要关闭么";
        }
        layer.open({
          content: contexts
          , 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;
      });
    });

哈哈,总之,既然用人家layui框架,就要准守人家的规矩!任何事件都要监听的,单纯的写js事件是没反应的,监听事件要写在 layui.use({})中。

以上这篇Layui给switch添加响应事件的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一段利用WSH修改和查看IP配置的代码
May 11 Javascript
Js获取事件对象代码
Aug 05 Javascript
jQuery Easyui学习之datagrid 动态添加、移除editor
Jan 27 Javascript
jQuery Dialog对话框事件用法实例分析
May 10 Javascript
jQuery处理XML文件的几种方法
Jun 14 Javascript
Angularjs中的ui-bootstrap的使用教程
Feb 19 Javascript
使用jQuery,Angular实现登录界面验证码详解
Apr 27 jQuery
vue组件的写法汇总
Apr 12 Javascript
使用proxy实现一个更优雅的vue【推荐】
Jun 19 Javascript
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 jQuery
如何修改Vue打包后文件的接口地址配置的方法
Apr 22 Javascript
JS创建自定义对象的六种方法总结
Dec 15 Javascript
layui--js控制switch的切换方法
Sep 03 #Javascript
Vue使用Clipboard.JS在h5页面中复制内容实例详解
Sep 03 #Javascript
layui中的switch开关实现方法
Sep 03 #Javascript
微信小程序表单验证插件WxValidate的二次封装功能(终极版)
Sep 03 #Javascript
js获取浏览器地址(获取第1个斜杠后的内容)
Sep 03 #Javascript
vue路由教程之静态路由
Sep 03 #Javascript
多个vue子路由文件自动化合并的方法
Sep 03 #Javascript
You might like
PHPShop存在多个安全漏洞
2006/10/09 PHP
PHP图像处理类库MagickWand用法实例分析
2015/05/21 PHP
Smarty最简单实现列表奇偶变色的方法
2015/07/01 PHP
PHP中header函数的用法及其注意事项详解
2016/06/13 PHP
Knockoutjs快速入门(经典)
2012/12/24 Javascript
下拉框select的绑定示例
2014/09/04 Javascript
基于insertBefore制作简单的循环插空效果
2015/09/21 Javascript
微信页面倒计时代码(解决safari不兼容date的问题)
2016/12/13 Javascript
jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
2017/03/04 Javascript
收藏AngularJS中最重要的核心功能
2017/07/09 Javascript
js原生实现移动端手指滑动轮播图效果的示例
2018/01/02 Javascript
vue项目tween方法实现返回顶部的示例代码
2018/03/02 Javascript
玩转Koa之koa-router原理解析
2018/12/29 Javascript
mpvue实现小程序签到金币掉落动画(api实现)
2019/10/17 Javascript
解决Vue大括号字符换行踩的坑
2020/11/09 Javascript
Python阶乘求和的代码详解
2020/02/14 Python
python读取多层嵌套文件夹中的文件实例
2020/02/27 Python
详解pytorch中squeeze()和unsqueeze()函数介绍
2020/09/03 Python
python字典按照value排序方法
2020/12/28 Python
HTML5 canvas基本绘图之绘制曲线
2016/06/27 HTML / CSS
澳大利亚玩具剧场:Toy Playhouse
2019/03/03 全球购物
德国游戏机商店:Konsolenkost
2019/12/08 全球购物
全球最受追捧的运动服品牌领先数字目的地:Stylerunner
2020/11/25 全球购物
泰国在线书店:SE-ED
2020/06/21 全球购物
致标枪运动员加油稿
2014/02/15 职场文书
成龙洗发水广告词
2014/03/14 职场文书
签约仪式策划方案
2014/06/02 职场文书
高考标语大全
2014/06/05 职场文书
科技工作者先进事迹
2014/08/16 职场文书
党员评议个人总结
2014/10/20 职场文书
学校实习推荐信
2015/03/27 职场文书
酒店工程部经理岗位职责
2015/04/09 职场文书
公务员爱岗敬业心得体会
2016/01/25 职场文书
Python pandas读取CSV文件的注意事项(适合新手)
2021/06/20 Python
python装饰器代码解析
2022/03/23 Python
Python matplotlib绘制条形统计图 处理多个实验多组观测值
2022/04/21 Python