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 相关文章推荐
javascript写的日历类(基于pj)
Dec 28 Javascript
奉献给JavaScript初学者的编写开发的七个细节
Jan 11 Javascript
Javascript 加载和执行-性能提高篇
Dec 28 Javascript
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
Sep 06 Javascript
jQuery学习之prop和attr的区别示例介绍
Nov 15 Javascript
php显示当前文件所在的文件以及文件夹所有文件以树形展开
Dec 13 Javascript
JS回调函数的应用简单实例
Sep 17 Javascript
JavaScript实现使用Canvas绘制图形的基本教程
Oct 27 Javascript
JS定时器用法分析【时钟与菜单中的应用】
Dec 21 Javascript
vue-i18n实现中英文切换的方法
Jul 06 Javascript
vue-video-player视频播放器使用配置详解
Oct 23 Javascript
node脚手架搭建服务器实现token验证的方法
Jan 20 Javascript
微信小程序实现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
一个php作的文本留言本的例子(六)
2006/10/09 PHP
在VS2008中编译MYSQL5.1.48的方法
2010/07/03 PHP
PHP用星号隐藏部份用户名、身份证、IP、手机号等实例
2014/04/08 PHP
php实现在服务器端调整图片大小的方法
2015/06/16 PHP
对象无length属性时IE6/IE7中无法将其转换成伪数组(ArrayLike)
2011/07/31 Javascript
JS Pro-深入面向对象的程序设计之继承的详解
2013/05/07 Javascript
JQUERY实现左侧TIPS滑进滑出效果示例
2013/06/27 Javascript
Javascript中各种trim的实现详细解析
2013/12/10 Javascript
jQuery select表单提交省市区城市三级联动核心代码
2014/06/09 Javascript
使用VS开发 Node.js指南
2015/01/06 Javascript
JS实现很酷的EMAIL地址添加功能实例
2015/02/28 Javascript
简单实现兼容各大浏览器的js复制内容到剪切板
2015/09/09 Javascript
js+html5实现canvas绘制椭圆形图案的方法
2016/05/21 Javascript
js判断复选框是否选中及选中个数的实现代码
2016/05/30 Javascript
BootStrap中Tab页签切换实例代码
2016/05/30 Javascript
JavaScript实现移动端滑动选择日期功能
2016/06/21 Javascript
easyui combotree加载静态数据问题(选不上)解决方法
2016/12/26 Javascript
javascript prototype原型详解(比较基础)
2016/12/26 Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
2017/03/01 Javascript
js+springMVC 提交数组数据到后台的实例
2019/09/21 Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
2019/11/21 Javascript
微信小程序实现按字母排列选择城市功能
2019/11/25 Javascript
详解vue3.0 diff算法的使用(超详细)
2020/07/01 Javascript
vue3.0 加载json的方法(非ajax)
2020/10/26 Javascript
npm全局环境变量配置详解
2020/12/15 Javascript
python使用点操作符访问字典(dict)数据的方法
2015/03/16 Python
Python面向对象编程中关于类和方法的学习笔记
2016/06/30 Python
python实现K近邻回归,采用等权重和不等权重的方法
2019/01/23 Python
pandas去除重复列的实现方法
2019/01/29 Python
Python开启线程,在函数中开线程的实例
2019/02/22 Python
python 怎样将dataframe中的字符串日期转化为日期的方法
2019/09/26 Python
win10系统Anaconda和Pycharm的Tensorflow2.0之CPU和GPU版本安装教程
2019/12/03 Python
python中strip(),lstrip(),rstrip()函数的使用讲解
2020/11/17 Python
HTML5 Canvas实现放大镜效果示例
2020/03/25 HTML / CSS
德语专业求职信
2014/03/12 职场文书
跳蚤市场口号
2014/06/13 职场文书