layui中的switch开关实现方法


Posted in Javascript onSeptember 03, 2019

效果如下图:

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-input-block">
   <input type="checkbox" checked="" name="switch" lay-skin="switch" lay-filter="switchTest" lay-text="ON|OFF">
  </div>
 </div>
</form>

Js代码:

<script>
 layui.use(['form'], function(){
  var form = layui.form
   ,layer = layui.layer
  //监听指定开关
  form.on('switch(switchTest)', function(data){
   if(this.checked){
    layer.msg('开关checked:'+ (this.checked ? 'true' : 'false'), {
     offset: '6px'
    });
    layer.tips('温馨提示:请注意开关状态的文字可以随意定义,而不仅 仅是ON|OFF', data.othis)
   }else{
    layer.msg('开关: 关掉了', {
     offset: '6px'
    });
   }
   //do some ajax opeartiopns;
  });
 });
</script>

Ok了,试一下吧。可以放在form表单中作为一项指标随form提交。也可以在监听开关的方法中单独进行ajax操作。

以上这篇layui中的switch开关实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中将一个值转换为字符串的方法分析[译]
Sep 21 Javascript
JavaScript实现表格排序方法
Jun 14 Javascript
JS模拟自动点击的简单实例
Aug 08 Javascript
判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
Nov 07 Javascript
js中的如何定位固定层的位置
Jun 15 Javascript
jquery获取radio值实例
Oct 16 Javascript
js闭包的用途详解
Nov 09 Javascript
jquery实现图片放大镜功能
Nov 23 Javascript
jquery删除table当前行的实例代码
Oct 07 Javascript
NODE.JS跨域问题的完美解决方案
Oct 20 Javascript
javascript获取select值的方法完整实例
Jun 20 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
Feb 15 Javascript
微信小程序表单验证插件WxValidate的二次封装功能(终极版)
Sep 03 #Javascript
js获取浏览器地址(获取第1个斜杠后的内容)
Sep 03 #Javascript
vue路由教程之静态路由
Sep 03 #Javascript
多个vue子路由文件自动化合并的方法
Sep 03 #Javascript
Emberjs 通过 axios 下载文件的方法
Sep 03 #Javascript
vue 自动化路由实现代码
Sep 03 #Javascript
vue中npm包全局安装和局部安装过程
Sep 03 #Javascript
You might like
php正则校验用户名介绍
2008/07/19 PHP
php实现文件上传及头像预览功能
2017/01/15 PHP
Laravel程序架构设计思路之使用动作类
2018/06/07 PHP
PHP正则验证字符串是否为数字的两种方法并附常用正则
2019/02/27 PHP
javascript GUID生成器实现代码
2009/10/31 Javascript
Extjs显示从数据库取出时间转换JSON后的出现问题
2012/11/20 Javascript
js中点击空白区域时文本框与隐藏层的显示与影藏问题
2013/08/26 Javascript
JS截取字符串常用方法详细整理
2013/10/28 Javascript
解析img图片没找到onerror事件 Stack overflow at line: 0
2013/12/23 Javascript
javascript实现获取cookie过期时间的变通方法
2014/08/14 Javascript
JQuery菜单效果的两个实例讲解(3)
2015/09/17 Javascript
11种ASP连接数据库的方法
2015/09/18 Javascript
谈谈我对JavaScript中typeof和instanceof的深入理解
2015/12/25 Javascript
jQuery实现点击弹出背景变暗遮罩效果实例代码
2016/06/24 Javascript
Node.js v8.0.0正式发布!看看带来了哪些主要新特性
2017/06/02 Javascript
node.js基于fs模块对系统文件及目录进行读写操作的方法详解
2017/11/10 Javascript
Vue使用mixins实现压缩图片代码
2018/03/14 Javascript
JS中appendChild追加子节点无效的解决方法
2018/10/14 Javascript
Nodejs实现微信分账的示例代码
2021/01/19 NodeJs
CentOS安装pillow报错的解决方法
2016/01/27 Python
python django 实现验证码的功能实例代码
2017/05/18 Python
Python实现文件内容批量追加的方法示例
2017/08/29 Python
使用python绘制二元函数图像的实例
2019/02/12 Python
利用python求积分的实例
2019/07/03 Python
Python Opencv提取图片中某种颜色组成的图形的方法
2019/09/19 Python
python+adb+monkey实现Rom稳定性测试详解
2020/04/23 Python
django admin 根据choice字段选择的不同来显示不同的页面方式
2020/05/13 Python
Pycharm生成可执行文件.exe的实现方法
2020/06/02 Python
CSS3实现菜单悬停效果
2020/11/17 HTML / CSS
全陪导游欢迎词
2014/01/17 职场文书
党员教师一句话承诺
2014/05/30 职场文书
平面设计专业求职信
2014/08/09 职场文书
五四青年节比赛演讲稿
2015/03/18 职场文书
出纳岗位职责范本
2015/03/31 职场文书
趣味运动会通讯稿
2015/07/18 职场文书
创业计划书之香辣虾火锅
2019/09/23 职场文书