在Layui中实现开关按钮的效果实例

 更新时间:2019年09月29日 09:49:17   作者:我是奶油啊  
今天小编就为大家分享一篇在Layui中实现开关按钮的效果实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

首先引入js,css

<script src="/common/plugins/layui-v2.2.5/layui.js" charset="utf-8"></script>

<link rel="stylesheet" type="text/css" href="/common/plugins/layui-v2.2.5/css/layui.css" rel="external nofollow" />

然后我有一个list表格 其中有个字段叫 是否有效

 {title: "是否有效", field: "isValid",align:"center",formatter:function(value,row,index){
    if(row.isValid == 1){
            return "<div class=\"layui-form\"> <input type=\"checkbox\" value=\""+row.id+"\" name=\"isValid\" lay-filter=\"isValid\" checked lay-skin=\"switch\" lay-text=\"是|否\"></div>";
             }else {
               return "<div class=\"layui-form\"> <input type=\"checkbox\" value=\""+row.id+"\" name=\"isValid\" lay-filter=\"isValid\" lay-skin=\"switch\" lay-text=\"是|否\"></div>";
             }

          }},

执行这一步才能渲染出效果

 onLoadSuccess: function (data) {
     layui.use('form', function(){
         var form = layui.form; 
         form.render('checkbox');
         form.on('switch(isValid)', function(data){
           changState(data.value,data.elem.checked);
         });
         form.on('switch(isTraining)', function(data){
           changState1(data.value,data.elem.checked);
         });
   form.on('switch(isTraining)', function(data){
   changState1(data.value,data.elem.checked);
   });
       });

       }

接着要判断状态是否修改成功

以上这篇在Layui中实现开关按钮的效果实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • ES6中module模块化开发实例浅析

    ES6中module模块化开发实例浅析

    这篇文章主要介绍了ES6中module模块化开发,结合实例形式分析了ES6中模块化开发的相关功能、使用方法与相关注意事项,需要的朋友可以参考下
    2017-04-04
  • 基于Three.js实现酷炫3D地图效果

    基于Three.js实现酷炫3D地图效果

    这篇文章主要为大家详细介绍了如何利用Three.js实现酷炫3D地图的效果,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以尝试一下
    2022-10-10
  • js实现点击左右按钮轮播图片效果实例

    js实现点击左右按钮轮播图片效果实例

    这篇文章主要介绍了js实现点击左右按钮轮播图片效果的方法,涉及click事件相应、animate方法等使用技巧,需要的朋友可以参考下
    2015-01-01
  • 微信小程序实现星级评价

    微信小程序实现星级评价

    这篇文章主要为大家详细介绍了微信小程序实现星级评价,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-11-11
  • uin-app+mockjs实现本地数据模拟

    uin-app+mockjs实现本地数据模拟

    这篇文章主要为大家详细介绍了uin-app+mockjs实现本地数据模拟,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-08-08
  • JavaScript 图片放大镜(可拖放、缩放效果)

    JavaScript 图片放大镜(可拖放、缩放效果)

    背景:很久之前就在marry5.com看到这个效果,当时觉得很神奇,碍于水平有限,没做出来。
    2008-09-09
  • 详解Javascript动态操作CSS

    详解Javascript动态操作CSS

    本文我们会讨论如何通过 JavaScript 在运行时操作 CSS,从而动态地更新应用到我们的元素上的式样。本文所用的技术是我们已经看到过的,但在利用 CSS DOM 来进行操作的时候还需要注意几个特殊点。
    2014-12-12
  • JS中的async与await怎么使用

    JS中的async与await怎么使用

    这篇文章主要介绍了JS的async/await怎么使用,简单来说,async/await是基于promises的语法糖,使异步代码更易于编写和阅读,下面来看详细的介绍内容吧。需要的小伙伴也可以参考一下
    2021-12-12
  • JavaScript日期工具类DateUtils定义与用法示例

    JavaScript日期工具类DateUtils定义与用法示例

    这篇文章主要介绍了JavaScript日期工具类DateUtils定义与用法,涉及javascript针对日期时间的获取、转换、比较、运算等相关操作技巧,需要的朋友可以参考下
    2018-09-09
  • JavaScript常用对象的方法和属性小结

    JavaScript常用对象的方法和属性小结

    JavaScript是基于对象的语言。我们知道,对象是由一组数据(JavaScript中称之为属性)和施加在这组数据上的方法组成的。JavaScript中还有一些不属于任何对象的系统函数
    2012-01-01

最新评论