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 相关文章推荐
拖拉表格的JS函数
Nov 20 Javascript
JavaScript和CSS通过expression实现Table居中显示
Jun 28 Javascript
JS 精确统计网站访问量的实例代码
Jul 05 Javascript
Javascript实现真实字符串剩余字数提示的实例代码
Oct 22 Javascript
动态添加option及createElement使用示例
Jan 26 Javascript
深入分析Javascript事件代理
Jan 30 Javascript
javascript绘制漂亮的心型线效果完整实例
Feb 02 Javascript
Jquery Easyui菜单组件Menu使用详解(15)
Dec 18 Javascript
jQuery ajax实现省市县三级联动
Mar 07 Javascript
js仿微信公众平台打标签功能
Apr 08 Javascript
jQuery中的deferred对象和extend方法详解
May 08 jQuery
从setTimeout看js函数执行过程
Dec 19 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 开源框架22个简单简介
2009/08/24 PHP
PHP 解决utf-8和gb2312编码转换问题
2010/03/18 PHP
php小技巧 把数组的键和值交换形成了新的数组,查找值取得键
2011/06/02 PHP
详解PHP中instanceof关键字及instanceof关键字有什么作用
2015/11/05 PHP
使用PHP实现生成HTML静态页面
2015/11/18 PHP
Javascript 面向对象 对象(Object)
2010/05/13 Javascript
js下将字符串当函数执行的方法
2011/07/13 Javascript
JavaScript基础语法让人疑惑的地方小结
2012/05/23 Javascript
正则表达式搭配js轻松处理json文本方便而老古
2013/02/17 Javascript
js中return false(阻止)的用法
2013/08/14 Javascript
浅析JS中document对象的一些重要属性
2014/03/06 Javascript
JQuery 实现在同一页面锚点链接之间的平滑滚动
2014/10/29 Javascript
轻松创建nodejs服务器(9):实现非阻塞操作
2014/12/18 NodeJs
jQuery中:empty选择器用法实例
2014/12/30 Javascript
JQuery实现的按钮倒计时效果
2015/12/23 Javascript
用NODE.JS中的流编写工具是要注意的事项
2016/03/01 Javascript
微信小程序多张图片上传功能
2017/06/07 Javascript
JS写XSS cookie stealer来窃取密码的步骤详解
2017/11/20 Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
2018/02/03 Javascript
vue iview实现动态路由和权限验证功能
2018/04/17 Javascript
JS异步错误捕获的一些事小结
2019/04/26 Javascript
JS实现的排列组合算法示例
2019/07/16 Javascript
Vue实现Header渐隐渐现效果的实例代码
2020/11/05 Javascript
基于vue与element实现创建试卷相关功能(实例代码)
2020/12/07 Vue.js
用Python遍历C盘dll文件的方法
2015/05/06 Python
Python中shapefile转换geojson的示例
2019/01/03 Python
python读取raw binary图片并提取统计信息的实例
2020/01/09 Python
小白教你PyCharm从下载到安装再到科学使用PyCharm2020最新激活码
2020/09/25 Python
CSS3实现精美横向滚动菜单按钮
2017/04/14 HTML / CSS
英语国培研修感言
2014/02/13 职场文书
《母亲的恩情》教学反思
2014/02/13 职场文书
《夜晚的实验》教学反思
2014/02/19 职场文书
美德少年事迹材料500字
2014/08/19 职场文书
教师对照四风自我剖析材料
2014/09/30 职场文书
作风建设剖析材料
2014/10/06 职场文书
辞职信格式范文
2015/05/13 职场文书