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 offsetX与layerX区别
Mar 12 Javascript
js内置对象 学习笔记
Aug 01 Javascript
用Javascript实现Windows任务管理器的代码
Mar 27 Javascript
基于jquery实现控制经纬度显示地图与卫星
May 20 Javascript
解决js中window.open弹出的是上次的缓存页面问题
Dec 29 Javascript
JS自定义对象实现Java中Map对象功能的方法
Jan 20 Javascript
javascript解三阶幻方(九宫格)
Apr 22 Javascript
JavaScript中的prototype原型学习指南
May 09 Javascript
JavaScript比较当前时间是否在指定时间段内的方法
Aug 02 Javascript
jQuery购物网页经典制作案例
Aug 19 Javascript
bootstrap table小案例
Oct 21 Javascript
vue.js实现简单轮播图效果
Oct 10 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
咖啡的植物学知识
2021/03/03 咖啡文化
PHP 信号管理知识整理汇总
2017/02/19 PHP
js模拟类继承小例子
2010/07/17 Javascript
JavaScript编程的10个实用小技巧
2014/04/18 Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
2015/08/05 Javascript
jQuery CSS3相结合实现时钟插件
2016/01/08 Javascript
简单的Vue SSR的示例代码
2018/01/12 Javascript
angular2实现统一的http请求头方法
2018/08/13 Javascript
微信小程序上传文件到阿里OSS教程
2019/05/20 Javascript
基于Taro的微信小程序模板消息-获取formId功能模块封装实践
2019/07/15 Javascript
Vue 权限控制的两种方法(路由验证)
2019/08/16 Javascript
[01:10:58]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
python中文乱码的解决方法
2013/11/04 Python
Python中的元类编程入门指引
2015/04/15 Python
Python实现新浪博客备份的方法
2016/04/27 Python
常见python正则用法的简单实例
2016/06/21 Python
解决python3在anaconda下安装caffe失败的问题
2017/06/15 Python
Python使用sorted对字典的key或value排序
2018/11/15 Python
wxPython:python首选的GUI库实例分享
2019/10/05 Python
pytorch 利用lstm做mnist手写数字识别分类的实例
2020/01/10 Python
将自己的数据集制作成TFRecord格式教程
2020/02/17 Python
tensorflow保持每次训练结果一致的简单实现
2020/02/17 Python
python ETL工具 pyetl
2020/06/07 Python
利用纯CSS3实现动态的自行车特效源码
2017/01/20 HTML / CSS
世界上最大的折扣香水店:FragranceNet.com
2016/10/26 全球购物
西班牙Polo衫品牌:Polo Club
2020/08/09 全球购物
高校学生干部的自我评价分享
2013/11/04 职场文书
毕业设计计划书
2014/01/09 职场文书
校长寄语大全
2014/04/09 职场文书
2014年民政工作总结
2014/11/26 职场文书
中学教师师德师风承诺书
2015/04/28 职场文书
一般纳税人申请报告
2015/05/18 职场文书
2015年暑期社会实践报告
2015/07/13 职场文书
旷工检讨书大全
2015/08/15 职场文书
小学五年级(说明文3篇)
2019/08/13 职场文书
古诗之爱国古诗5首
2019/09/20 职场文书