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

今天做项目时，遇到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添加响应事件的例子就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • layui--js控制switch的切换方法

    需求:如下所示,当[主键]选择为"T"时,[允许为空]不能选择"T",且会自动切换为"F"; 当[允许为空]选择为"T"时,判断[主键]是否为空,若为"T",弹出提示,不予更改: 首先需要在table中添加switch控件: 定义主键:以templet模板形式定义控件格式,其中{{ d.isSerial == 'T' ? 'checked' : '' }}为其设置默认值 {field :'isSerial'

  • layui中的switch开关实现方法

    效果如下图: 显然这个插件是一个checkbox,只是在layui中封装了.所以layui的js和css是必不可少的. Html代码: <form class="layui-form" action=""> <div class="layui-form-item"> <label class="layui-form-label">开关</label> <div class=

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

    今天做项目时,遇到layui中的switch,需要给这个开关添加事件,也就是当你点击是会弹框提示 刚开始我用传统的处理方法,直接给它添加个js事件,到最后会发现,没响应,于是我查文档,逛论坛终于找到一个解决办法,代码如下 <input type="checkbox" name="zzz" lay-skin="switch" lay-filter="switchTest" lay-text="开启|关闭"

  • java中添加按钮并添加响应事件的方法(推荐)

    关于Java容器,面板等自行百度学一下吧 </pre><pre name="code" class="java">private Button LogInbtn = new Button("登陆"); final static JFrame buyerpagemain = new JFrame(); final Container contentPane = buyerpagemain.getContentPane();

  • bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法

    bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法

    本文实例讲述了bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法.分享给大家供大家参考,具体如下: Bootstrap官网中,只介绍了breadcrumb的布局(如下图),未介绍使用方法,如何动态增加面包屑title及点击事件的响应. 本人在使用过程中探索出以下的方式. 首先,在html文件里定义div <div> <ul class="breadcrumb " style="margin-bottom:0px;visibility:

  • layui加载表格,绑定新增,编辑删除,查看按钮事件的例子

    使用layui框架的时候,总会重复的写相关代码,感觉很是苦恼,所以进行分装,只需要关注业务方面即可 如下图,提供新增,编辑,查看等功能 js方法 /** * 页面内弹出编辑窗口 //需要引入 layui.js layui.css文件 * @param {} title 标题 不显示为false * @param {} area 大小 ["400px","500px"] 或者 "400px"--->只设置宽度 * @param {} path

  • 在layui框架中select下拉框监听更改事件的例子

    在select 加入红框中的代码(看不到红框的往右拖动一点) 事件监听select(这里面是上面图中红框内容   可自定义) 以上这篇在layui框架中select下拉框监听更改事件的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • LayUi使用switch开关,动态的去控制它是否被启用的方法

    layui中的switch开关,能够去显示当前的状态,是否是启用还是禁用.当时如果当前记录的某个值没有进行填写,这行记录就不能被启用.并且页面上也要让他不能进行操作. 直接上代码: // 页面状态栏事件监听 form.on('switch', function (data) { var swithcData = data; var id = data.value;// 获取要修改的ID var state = this.checked ? '0' : '2';// 当前状态值 $.ajax({

  • Antd-vue Table组件添加Click事件,实现点击某行数据教程

    给Table组件添加Click事件,实现点击某行数据操作 customRow 设置行属性 Function(record, index) 通过customRow 属性给table添加自定义事件 <a-table :columns="columns" :dataSource="data" :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange ,onSelec

  • IOS开发之手势响应事件优先级的实例详解

    IOS开发之手势响应事件优先级的实例详解 交互响应事件都是通过手势的操作完成的,如点击.或双击.或长按,这些交互都是在视图中完成的,但是不同的视图可能会有不同的交互,有时候就会出现交互响应事件冲突的情况.这时候就需要处理事件优先级,以便达到想要的效果. 示例场景:一个自定义模式视图view中,有一个列表视图table,同时有一个确定的按钮视图button:在view中有一个单击事件UITapGestureRecognizer,在table中点击每个cell也会有点击事件,同样的button中有个

  • CSS鼠标响应事件经过、移动、点击示例介绍

    几种鼠标触发CSS事件. 说明: onMouseDown 按下鼠标时触发 onMouseOver 鼠标经过时触发 onMouseUp 按下鼠标松开鼠标时触发 onMouseOut 鼠标移出时触发 onMouseMove 鼠标移动时触 复制代码 代码如下: <html> <head> <title>CSS 鼠标响应事件</title> <meta http-equiv="Content-Type" content="text

  • Jquery为DIV添加click事件的简单实例

    今天在做一个抽奖活动时小编要做一个抽奖没有中奖之后直接弹出一个提示,然后再给div添加一个事件了,下面我们来看这个例子的做法. html <a href="javascript:void(0);" id="click_ms" > <img src="img/bbg_08.jpg" border="0" > </a> jquery事件 $('#click_ms').click(function

随机推荐