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写的放大镜效果
Aug 22 Javascript
jquery Easyui快速开发总结
Aug 20 Javascript
js实现超酷的照片墙展示效果图附源码下载
Oct 08 Javascript
再谈Javascript中的基本类型和引用类型(推荐)
Jul 01 Javascript
微信小程序 UI布局常用技巧整理总结
Dec 05 Javascript
Input文本框随着输入内容多少自动延伸的实现
Feb 15 Javascript
webpack配置sass模块的加载的方法
Jul 30 Javascript
vue.js中created方法作用
Mar 30 Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
Nov 27 Javascript
使用layui定义一个模块并使用的例子
Sep 14 Javascript
vue同个按钮控制展开和折叠同个事件操作
Jul 29 Javascript
ECharts transform数据转换和dataZoom在项目中使用
Dec 24 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 类型转换函数intval
2009/06/20 PHP
joomla实现注册用户添加新字段的方法
2016/05/05 PHP
扩展jQuery 键盘事件的几个基本方法
2009/10/30 Javascript
Dojo 学习笔记入门篇 First Dojo Example
2009/11/15 Javascript
EasySlider 基于jQuery功能强大简单易用的滑动门插件
2010/06/11 Javascript
JS Replace()的高级使用方法介绍
2013/06/29 Javascript
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
2015/02/11 Javascript
jquery实现翻动fadeIn显示的方法
2015/03/05 Javascript
JavaScript数组前面插入元素的方法
2015/04/06 Javascript
AngularJS HTML DOM详解及示例代码
2016/08/17 Javascript
基于JavaScript Array数组方法(新手必看篇)
2016/08/20 Javascript
JavaScript之WebSocket技术详解
2016/11/18 Javascript
微信小程序 欢迎界面开发的实例详解
2016/11/30 Javascript
利用vue-router实现二级菜单内容转换
2016/11/30 Javascript
vue中用动态组件实现选项卡切换效果
2017/03/25 Javascript
select自定义小三角样式代码(实用总结)
2017/08/18 Javascript
nodejs爬虫初试superagent和cheerio
2018/03/05 NodeJs
浅谈vue中.vue文件解析流程
2018/04/24 Javascript
ES6基础之解构赋值(destructuring assignment)
2019/02/21 Javascript
基于Vue实现电商SKU组合算法问题
2019/05/29 Javascript
RxJS在TypeScript中的简单使用详解
2020/04/13 Javascript
vue 解决addRoutes多次添加路由重复的操作
2020/08/04 Javascript
JavaScript 中的六种循环方法
2021/01/06 Javascript
python2.7无法使用pip的解决方法(安装easy_install)
2018/04/03 Python
解决pandas .to_excel不覆盖已有sheet的问题
2018/12/10 Python
如何运行.ipynb文件的图文讲解
2019/06/27 Python
Django 数据库同步操作技巧详解
2019/07/19 Python
用python生成与调用cntk模型代码演示方法
2019/08/26 Python
python装饰器练习题及答案
2019/11/01 Python
django 解决自定义序列化返回处理数据为null的问题
2020/05/20 Python
浅谈Python 函数式编程
2020/06/20 Python
家庭睡衣和家庭用品:Little Blue House
2018/03/18 全球购物
美丽的珠宝配饰:SmallThings
2019/09/04 全球购物
收银出纳员岗位职责
2014/02/23 职场文书
Golang 并发下的问题定位及解决方案
2022/03/16 Golang
DIY胆机必读:各国电子管评价
2022/04/06 无线电