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 引起的安全问题
Dec 27 Javascript
Jquery 表单取值赋值的一些基本操作
Oct 11 Javascript
JavaScript中的变量声明早于赋值分析
Mar 01 Javascript
AngularJS 指令详细介绍
Jul 27 Javascript
Vue.js原理分析之observer模块详解
Feb 17 Javascript
详解vue-resource promise兼容性问题
Jun 20 Javascript
Node.js中的cluster模块深入解读
Jun 11 Javascript
小程序中canvas的drawImage方法参数使用详解
Jul 04 Javascript
JAVA面试题 static关键字详解
Jul 16 Javascript
AntV F2和vue-cli构建移动端可视化视图过程详解
Oct 08 Javascript
微信小程序自定义头部导航栏(组件化)
Nov 15 Javascript
JS call()及apply()方法使用实例汇总
Jul 11 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
浅析Yii中使用RBAC的完全指南(用户角色权限控制)
2013/06/20 PHP
解析php扩展php_curl.dll不加载的解决方法
2013/06/26 PHP
php数组转换js数组操作及json_encode的用法详解
2013/10/26 PHP
php警告Creating default object from empty value 问题的解决方法
2014/04/02 PHP
PHP后期静态绑定之self::限制实例分析
2018/12/21 PHP
浅谈laravel框架与thinkPHP框架的区别
2019/10/23 PHP
picChange 图片切换特效的函数代码
2010/05/06 Javascript
JavaScript常用小技巧小结
2014/12/29 Javascript
清除js缓存的多种方法总结
2016/12/09 Javascript
node.js中实现kindEditor图片上传功能的方法教程
2017/04/26 Javascript
Angular实现可删除并计算总金额的购物车功能示例
2017/12/26 Javascript
vue项目中应用ueditor自定义上传按钮功能
2018/04/27 Javascript
vue.js使用watch监听路由变化的方法
2018/07/08 Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
2019/05/28 Javascript
js实现转动骰子模型
2019/10/24 Javascript
vue 弹出遮罩层样式实例
2020/07/22 Javascript
在Python中使用第三方模块的教程
2015/04/27 Python
python实现可逆简单的加密算法
2019/03/22 Python
详解python爬虫系列之初识爬虫
2019/04/06 Python
python图片剪裁代码(图片按四个点坐标剪裁)
2020/03/10 Python
Python try except异常捕获机制原理解析
2020/04/18 Python
Python学习之路之pycharm的第一个项目搭建过程
2020/06/18 Python
python实现学生成绩测评系统
2020/06/22 Python
学python需要去培训机构吗
2020/07/01 Python
Python 开发工具通过 agent 代理使用的方法
2020/09/27 Python
通过python-pptx模块操作ppt文件的方法
2020/12/26 Python
美国在线宠物用品商店:Entirely Pets
2017/01/01 全球购物
英国翻新电子产品购物网站:Tech Trade
2017/12/25 全球购物
String是最基本的数据类型吗?
2013/06/13 面试题
深入开展党的群众路线教育实践活动方案
2014/02/04 职场文书
暑期教师培训方案
2014/06/07 职场文书
学习退步检讨书
2014/09/28 职场文书
单方离婚协议书范本(2014版)
2014/09/30 职场文书
个人租房协议书(范本)
2014/10/14 职场文书
教师群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书
2016年五一劳动节专题校园广播稿
2015/12/17 职场文书