在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中实现开关按钮的效果实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • JavaScript基础之AJAX简单的小demo

    JavaScript基础之AJAX简单的小demo

    这篇文章主要介绍了JavaScript基础之AJAX简单的小demo ,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友参考下
    2017-01-01
  • 一文教会你如何在JavaScript中使用展开运算符

    一文教会你如何在JavaScript中使用展开运算符

    展开运算符(spread operator)允许一个表达式在某处展开,下面这篇文章主要给大家介绍了关于如何通过一文教会你如何在JavaScript中使用展开运算符的相关资料,需要的朋友可以参考下
    2022-10-10
  • JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】

    JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】

    这篇文章主要介绍了JavaScript创建对象方式,结合实例形式总结分析了工厂模式、构造函数模式、原型模式等各种常见的javascript对象创建方式与相关操作注意事项,需要的朋友可以参考下
    2018-12-12
  • JS中type=

    JS中type="button"和type="submit"的区别

    Submit是专门用于提交表单的Button,与Button的区别主要有两点:type=button 就单纯是按钮功能,type=submit 是发送表单 。下面通过本文给大家分享JS中type="button"和type="submit"的区别,感兴趣的的朋友一起看看吧
    2017-07-07
  • 原来JS还可以这样拆箱转换详解

    原来JS还可以这样拆箱转换详解

    这篇文章主要给大家介绍了关于JS拆箱转换的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-02-02
  • javascript实现tab切换的两个实例

    javascript实现tab切换的两个实例

    这篇文章主要介绍了javascript实现tab切换的两个实例,是对之前方法原理的进一步延伸,需要深入了解的同学可以参考一下
    2015-11-11
  • JavaScript 语法集锦 脚本之家基础推荐

    JavaScript 语法集锦 脚本之家基础推荐

    JavaScript语法集锦是对javascript常用函数的一些小结,比较实用,建议收藏,方便查找需要的资料。
    2009-11-11
  • Javascript编写2048小游戏

    Javascript编写2048小游戏

    本文给大家介绍的是去年很火的一款小游戏--2048用javascript实现的思路以及代码,有需要的小伙伴可以参考下。
    2015-07-07
  • javascript实现动态统计图开发实例

    javascript实现动态统计图开发实例

    这篇文章主要介绍了javascript实现动态统计图开发实例,需要的朋友可以参考下
    2015-11-11
  • JS中判断null的方法分析

    JS中判断null的方法分析

    这篇文章主要介绍了JS中判断null的方法,结合实例形式对比分析了常见的JS错误判断方法及正确判断操作相关技巧,需要的朋友可以参考下
    2016-11-11

最新评论