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 相关文章推荐
Javascript数组的排序 sort()方法和reverse()方法
Jun 04 Javascript
Jquery修改页面标题title其它JS失效的解决方法
Oct 31 Javascript
jquery实现从数组移除指定的值
Jun 24 Javascript
简介BootStrap model弹出框的使用
Apr 27 Javascript
canvas实现简易的圆环进度条效果
Feb 28 Javascript
JS中的作用域链
Mar 01 Javascript
js上传图片预览的实现方法
May 09 Javascript
webpack学习教程之前端性能优化总结
Dec 05 Javascript
微信小程序 如何引入外部字体库iconfont的图标
Jan 31 Javascript
Vue CLI 3.x 自动部署项目至服务器的方法
Apr 02 Javascript
JavaScript使用面向对象实现的拖拽功能详解
Jun 12 Javascript
JS数组的常用10种方法详解
May 08 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
解密ThinkPHP3.1.2版本之独立分组功能应用
2014/06/19 PHP
php递归法读取目录及文件的方法
2015/01/30 PHP
php使用APC实现实时上传进度条功能
2015/10/26 PHP
项目中应用Redis+Php的场景
2016/05/22 PHP
js如何调用qq互联api实现第三方登录
2014/03/28 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
2014/07/23 Javascript
AngularJS入门教程之Scope(作用域)
2016/07/27 Javascript
AngularJS出现$http异步后台无法获取请求参数问题的解决方法
2016/11/03 Javascript
jQuery之动画效果大全
2016/11/09 Javascript
原生js获取浏览器窗口及元素宽高常用方法集合
2017/01/18 Javascript
Android中Okhttp3实现上传多张图片同时传递参数
2017/02/18 Javascript
整理关于Bootstrap导航的慕课笔记
2017/03/29 Javascript
vue如何判断dom的class
2018/04/26 Javascript
使用p5.js实现动态GIF图片临摹重现
2019/10/23 Javascript
基于JavaScript实现单例模式
2019/10/30 Javascript
微信小程序getLocation 需要在app.json中声明permission字段
2020/03/03 Javascript
Echarts.js无法引入问题解决方案
2020/10/30 Javascript
[38:32]DOTA2上海特级锦标赛A组资格赛#2 Secret VS EHOME第二局
2016/02/26 DOTA
[49:31]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS BO3 第二场 1月29日
2021/03/11 DOTA
详解Python编程中基本的数学计算使用
2016/02/04 Python
Python爬虫爬验证码实现功能详解
2016/04/14 Python
Python多线程原理与用法详解
2018/08/20 Python
PyQt Qt Designer工具的布局管理详解
2019/08/07 Python
html5各种页面切换效果和模态对话框用法总结
2014/12/15 HTML / CSS
纽约手袋品牌:KARA
2018/03/18 全球购物
新西兰网上购物,折扣店:BestDeals.co.nz
2019/03/20 全球购物
英国鲜花递送:Blossoming Gifts
2020/07/10 全球购物
高级电工工作职责
2013/11/21 职场文书
幼儿园教育教学反思
2014/01/31 职场文书
机械操作工岗位职责
2014/08/08 职场文书
2015年酒店年度工作总结
2015/05/23 职场文书
餐厅营销的秘密:为什么老顾客会流水?
2019/08/08 职场文书
Python爬虫基础之简单说一下scrapy的框架结构
2021/06/26 Python
MySQL定时备份数据库(全库备份)的实现
2021/09/25 MySQL
JS创建或填充任意长度数组的小技巧汇总
2021/10/24 Javascript
Spring Cloud Netflix 套件中的负载均衡组件 Ribbon
2022/04/13 Java/Android