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 相关文章推荐
Juqery Html(),append()等方法的Bug解决方法
Dec 13 Javascript
raphael.js绘制中国地图 地图绘制方法
Feb 12 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
May 12 Javascript
ES6新增的math,Number方法
Aug 06 Javascript
angular2系列之路由转场动画的示例代码
Nov 09 Javascript
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
vue.js学习笔记之v-bind和v-on解析
May 03 Javascript
echarts大屏字体自适应的方法步骤
Jul 12 Javascript
layui 动态设置checbox 选中状态的例子
Sep 02 Javascript
微信小程序 flexbox layout快速实现基本布局的解决方案
Mar 24 Javascript
Vue时间轴 vue-light-timeline的用法说明
Oct 29 Javascript
一道JS算法面试题——冒泡、选择排序
Apr 21 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 addslashes 函数详细分析说明
2009/06/23 PHP
PHP使用缓存即时输出内容(output buffering)的方法
2015/08/03 PHP
THinkPHP获取客户端IP与IP地址查询的方法
2016/11/14 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
Avengerls vs Newbee BO3 第三场2.18
2021/03/10 DOTA
javascript multibox 全选
2009/03/22 Javascript
JQUERY 浏览器判断实现函数
2009/08/20 Javascript
jQuery中与toggleClass等价的程序段 以及未来学习的方向
2010/03/18 Javascript
js获取IP地址的方法小结
2014/07/01 Javascript
jQuery动画与特效详解
2015/02/01 Javascript
jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击
2016/01/22 Javascript
jQuery UI制作选项卡(tabs)
2016/12/13 Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
2017/01/13 Javascript
基于Angular.js实现的触摸滑动动画实例代码
2017/02/19 Javascript
jQuery实现表格冻结顶栏效果
2017/08/20 jQuery
JS解决position:sticky的兼容性问题的方法
2017/10/17 Javascript
Python通过PIL获取图片主要颜色并和颜色库进行对比的方法
2015/03/19 Python
Python3中条件控制、循环与函数的简易教程
2017/11/21 Python
简单的python协同过滤程序实例代码
2018/01/31 Python
Python3 实现随机生成一组不重复数并按行写入文件
2018/04/09 Python
Django如何配置mysql数据库
2018/05/04 Python
Python3爬虫之自动查询天气并实现语音播报
2019/02/21 Python
python re.sub()替换正则的匹配内容方法
2019/07/22 Python
python os.path.isfile 的使用误区详解
2019/11/29 Python
Python基础之函数基本用法与进阶详解
2020/01/02 Python
在Tensorflow中查看权重的实现
2020/01/24 Python
CSS中几个与换行有关的属性简明总结
2014/04/15 HTML / CSS
草莓网化妆品日本站:Strawberrynet日本
2017/10/20 全球购物
Java的五个基础面试题
2016/02/26 面试题
社团文化节邀请函
2014/01/10 职场文书
领导失职检讨书
2014/02/24 职场文书
一年级评语大全
2014/04/23 职场文书
2014年镇党建工作汇报材料
2014/11/02 职场文书
Mysql 如何批量插入数据
2021/04/06 MySQL
MySQL系列之九 mysql查询缓存及索引
2021/07/02 MySQL
Python之基础函数案例详解
2021/08/30 Python