layui switch 开关监听 弹出确定状态转换的例子


Posted in Javascript onSeptember 21, 2019

不废话,直接上图:

原始状态:

layui switch 开关监听 弹出确定状态转换的例子

点击确定:

layui switch 开关监听 弹出确定状态转换的例子

点击取消或者X

layui switch 开关监听 弹出确定状态转换的例子

代码:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="static/layui/css/layui.css" rel="external nofollow" >
</head>
<body>
<form class="layui-form" action="">
  <div class="layui-form-item">

    <div class="layui-input-block">
      <input type="checkbox" name="zzz" lay-skin="switch" lay-filter="switchTest" lay-text="开启|关闭">
    </div>
  </div>
</form>
<script src="static/layui/layui.js"></script>

<script>
  //Demo
  layui.use(['form','jquery','layer'], function () {
    var form = layui.form;
    var jquery = layui.jquery;
    var layer = layui.layer;

    //监听提交
    form.on('switch(switchTest)', function (data) {
      console.log(data.elem); //得到checkbox原始DOM对象
      console.log(data.elem.checked); //开关是否开启,true或者false
      console.log(data.value); //开关value值,也可以通过data.elem.value得到
      console.log(data.othis); //得到美化后的DOM对象
      var x=data.elem.checked;
      layer.open({
        content: 'test'
        ,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;
    });
  });
</script>
</body>
</html>

以上这篇layui switch 开关监听 弹出确定状态转换的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
推荐25个超炫的jQuery网格插件
Nov 28 Javascript
javascript实现的淘宝旅行通用日历组件用法实例
Aug 03 Javascript
清除输入框内的空格
Dec 21 Javascript
最基础的vue.js双向绑定操作
Aug 23 Javascript
JS实现浏览上传文件的代码
Aug 23 Javascript
jQuery+koa2实现简单的Ajax请求的示例
Mar 06 jQuery
Vue.js获取被选择的option的value和text值方法
Aug 24 Javascript
微信小程序实现简单评论功能
Nov 28 Javascript
javascript实现导航栏分页效果
Jun 27 Javascript
详解ES6新增字符串扩张方法includes()、startsWith()、endsWith()
May 12 Javascript
JavaScript快速调试的两个技巧
Nov 04 Javascript
Vue项目中如何封装axios(统一管理http请求)
May 02 Vue.js
微信小程序实现3D轮播图效果(非swiper组件)
Sep 21 #Javascript
微信小程序自定义波浪组件使用方法详解
Sep 21 #Javascript
LayUi使用switch开关,动态的去控制它是否被启用的方法
Sep 21 #Javascript
LayUI switch 开关监听 获取属性值、更改状态的方法
Sep 21 #Javascript
Vue登录主页动态背景短视频制作
Sep 21 #Javascript
layui table 获取分页 limit的方法
Sep 20 #Javascript
微信小程序用户拒绝授权的处理方法详解
Sep 20 #Javascript
You might like
建立动态的WML站点(一)
2006/10/09 PHP
php遍历替换目录下文件指定内容的方法
2016/11/10 PHP
yii2使用gridView实现下拉列表筛选数据
2017/04/10 PHP
PHP如何根据文件头检测文件类型实例代码
2018/10/14 PHP
JQuery 1.6发布 性能提升,同时包含大量破坏性变更
2011/05/10 Javascript
如何通过javascript操作web控件的自定义属性
2013/11/25 Javascript
使用CamanJS在Web页面上处理图像的技巧
2015/08/18 Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
2015/12/04 Javascript
javascript实现拖放效果
2015/12/16 Javascript
js获取客户端操作系统类型的方法【测试可用】
2016/05/27 Javascript
基于JS模仿windows文件按名称排序效果
2016/06/29 Javascript
jquery easyUI中ajax异步校验用户名
2016/08/19 Javascript
JS实现简易的图片拖拽排序实例代码
2017/06/09 Javascript
JavaScript面向对象精要(上部)
2017/09/12 Javascript
mpvue构建小程序的方法(步骤+地址)
2018/05/22 Javascript
webpack公共组件引用路径简化小技巧
2018/06/15 Javascript
Vux+Axios拦截器增加loading的问题及实现方法
2018/11/08 Javascript
使用puppeteer爬取网站并抓出404无效链接
2018/12/20 Javascript
详解Js里的for…in和for…of的用法
2019/03/28 Javascript
基于vue写一个全局Message组件的实现
2019/08/15 Javascript
vue中如何自定义右键菜单详解
2020/12/08 Vue.js
Python中的exec、eval使用实例
2014/09/23 Python
Python中使用OpenCV库来进行简单的气象学遥感影像计算
2016/02/19 Python
浅谈Python程序的错误:变量未定义
2020/06/02 Python
深入浅出CSS3 background-clip,background-origin和border-image教程
2011/01/27 HTML / CSS
HTML5 虚拟键盘出现挡住输入框的解决办法
2017/02/14 HTML / CSS
英国领先的互联网葡萄酒礼品商:Vintage Wine & Port
2019/05/24 全球购物
宏碁西班牙官网:Acer西班牙
2021/01/08 全球购物
毕业生个人投资创业计划书
2014/01/04 职场文书
经理聘任证明
2015/03/02 职场文书
致地震灾区的慰问信
2015/03/23 职场文书
中学语文教学反思
2016/02/16 职场文书
《青山不老》教学反思
2016/02/22 职场文书
个人房屋租赁合同(标准范本)
2019/09/16 职场文书
JavaScript嵌入百度地图API的最详细方法
2021/04/16 Javascript
CSS3实现的侧滑菜单
2021/04/27 HTML / CSS