layui switch 开关监听 弹出确定状态转换
不废话,直接上图:
原始状态:
点击确定:
点击取消或者X
代码:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="static/layui/css/layui.css">
</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>
版权声明: 本文有 ```...裥簞點 发表于 bloghome博客
转载声明: 可自由转载、引用,但需要属名作者且注明文章出处。
文章链接: https://www.bloghome.com.cn/user/yysblog
layui switch 开关监听 弹出确定状态转换的更多相关文章
- flex 在父窗口监听弹出窗口里的某个按钮被点击
flex 在父窗口监听弹出窗口里的某个按钮被点击 这样可以从子窗口拿回数据在父窗口处理数据,不必再子窗口中处理.在某些情形下省去了不少麻烦. /** * 右键菜单项单击事件 * changed by ...
- Android 监听手机GPS打开状态
转载请标明出处:http://blog.csdn.net/zhaoyanjun6/article/details/70854942 本文出自[赵彦军的博客] GPS_Presenter package ...
- 监听Listview的滚动状态,是否滚动到了顶部或底部
/** * @author:Jack Tony * @description : 监听listview的滑动状态,如果到了顶部就刷新数据 * @date :2015年2月9日 */ private c ...
- layUI 几个简单的弹出层
导入控件主题 <link rel="stylesheet" href="dist/themes/default/style.min.css" /> ...
- layui数据表格监听按钮问题
layui官网文档源码 原始容器 <table id="demo" lay-filter="test"></table> 工具栏模板: ...
- layui之事件监听(table)
这几天在学习layui,感觉这框架挺好用的,前后端都适用,许多原本比较复杂的东西用该框架很容易就能实现. 今天看了table里的事件监听这个知识点. 语法:table.on('event(filter ...
- MUI class="mui-switch" 开关监听
如何对MUI中的switch开关按钮进行监听, 页面代码如下: <form class="mui-input-group"> <ul class="mu ...
- layui的select监听
首先,select一定要放在<form class="layui-form" ></form>里面 然后,加监听<select id="id ...
- java代码对按钮进行监听---------------打印出每次点击按钮的次数
其实,我真不会写嗯? package com.a.b; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; ...
随机推荐
- 在Azure DevOps Server (TFS 2019) 流水线传递参数
变量概述 在Azure DevOps Server的流水线中,变量是衔接不同任务和不通代理之间的桥梁,它可以使相对松散.各自独立的任务之间相关影响并共享数据.在流水线中使用变量,可以在各任务之间相互调 ...
- SSH框架搭建过程详解
Spring.Struts2.Hibernate框架: 具体三大框架的知识以前的文章写过,在这里整合 Spring框架知识:http://www.cnblogs.com/xuyiqing/catego ...
- Servlet案例7:jsp技术及案例
jsp运行原理: 根据jsp文件创建java文件(servlet),并编译运行 第一次访问时会被翻译成servlet后执行 jsp三个指令: 1.page指令:页面翻译运行的属性的配置(通常使用默认) ...
- MySQL 线程池&连接池&长连接&短连接
线程池 简介 1.mysql每连接每线程,mysql都分配一个单独的线程,该线程处理客户端发来的所有命令 2.每个线程会占用一定的系统资源,线程数越多消耗的系统资源也越多 3.线程的创建和销毁有一定的 ...
- ASP.NET Core中自定义路由约束
路由约束 ASP.NET Core中,通过定义路由模板,可以在Url上传递变量,同时可以针对变量提供默认值.可选和约束. 约束的使用方法是在属性路由上添加指定的约束名,用法如下: // 单个使用 [R ...
- .NET手记-Autofac进阶(传递注册参数 Passing Parameters to Register)
当你注册组件时,可以为组件服务传入一系列参数,用于服务解析时使用. 可使用的参数类型 Available Parameter Types Autofac提供了集中参数匹配类别: NamedParame ...
- Java排序方法sort的使用详解(转)
一.对数组的排序: //对数组排序 public void arraySort(){ int[] arr = {1,4,6,333,8,2}; Arrays.sort(arr);//使用java.ut ...
- spring cloud+.net core搭建微服务架构:配置中心(四)
前言 我们项目中有很多需要配置的地方,最常见的就是各种服务URL地址,这些地址针对不同的运行环境还不一样,不管和打包还是部署都麻烦,需要非常的小心.一般配置都是存储到配置文件里面,不管多小的配置变动, ...
- Spring Boot+redis存储session,满足集群部署、分布式系统的session共享
本文讲述spring-boot工程中使用spring-session机制进行安全认证,并且通过redis存储session,满足集群部署.分布式系统的session共享. 原文链接:https://w ...
- 如何在GooglePlay上面发布应用
上传和发布应用 注册开发者帐户后,您便可使用 Google Play 开发者控制台将应用上传到 Google Play. 访问 Google Play 开发者控制台. 点击屏幕顶部附近的添加新用户. ...