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

2024-04-17 13:24:51

首先引入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中实现开关按钮的效果实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

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 switch 开关监听获取属性值、更改状态的方法

背景今天在设计页面时,想使用一下 LayUI 的 switch 控件,在需要更改状态的时候进行 ajax请求传输需要获取其中的自定义属性值,同时根据服务器返回数据进行状态的更改通过参考文档及网友的经验,在此整理一番使用方法场景: 后台商品列表页,进行上下架状态的修改 ①. html 代码参考着重注意我设置的两个属性值 lay-filter,switch_goods_id <input type="checkbox" class="switch_checke
layui switch 开关监听弹出确定状态转换的例子

不废话,直接上图: 原始状态: 点击确定: 点击取消或者X 代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="static/layui/css/layui.css"
LayUi使用switch开关,动态的去控制它是否被启用的方法

layui中的switch开关,能够去显示当前的状态,是否是启用还是禁用.当时如果当前记录的某个值没有进行填写,这行记录就不能被启用.并且页面上也要让他不能进行操作. 直接上代码: // 页面状态栏事件监听 form.on('switch', function (data) { var swithcData = data; var id = data.value;// 获取要修改的ID var state = this.checked ? '0' : '2';// 当前状态值 $.ajax({
在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="ex
Vue中实现过渡动画效果实例详解

目录 Vue的transition动画 Transition动画的使用 Transition组件的原理 Transition动画的class Vue的animation动画 Animation动画的使用过渡的模式mode 列表过渡列表过渡的介绍列表过渡的使用总结 Vue的transition动画 Transition动画的使用在开发中,我们想要给一个组件的显示和消失添加某种过渡动画,可以很好的增加用户体验: React框架本身并没有提供任何动画相关的API,所以在React中使用过渡动
mybatis中oracle实现分页效果实例代码

首先当我们需要通过xml格式处理sql语句时,经常会用到< ,<=,>,>=等符号,但是很容易引起xml格式的错误,这样会导致后台将xml字符串转换为xml文档时报错,从而导致程序错误. 这样的问题在iBatiS中或者自定义的xml处理sql的程序中经常需要我们来处理.其实很简单,我们只需作如下替换即可避免上述的错误: 原符号 < <= > >= & ' " 替换符号 < <= > >= & &a
LayoutAnimation给ListView中的item设置动态出场效果(实例)

LayoutAnimation作用于ViewGroup,为ViewGroup指定一个动画,当它的子元素出场时都按照这个动画出场. LayoutAnimation作用于viewgroup有两种方式: 1. 静态的使用xml文件实现. 2. 在代码中动态实现. 下面用ListView中的item设置动态出场效果来分别介绍两种方式: 静态的使用xml文件实现,分为三步 1. 在res的anim目录(res的文件夹下没有anim文件夹自己新建一个)下定义LayoutAnimation命名为anim_la
在layui中使用form表单监听ajax异步验证注册的实例

今天给大家介绍的是当下很流行的框架layui中的一个小案例.就是form表单监控提交并且使用ajax异步提交验证数据.在layui中我们想使用哪个模块就要layui.use('form',function{});这种形式要引用form内置模板,下面是HTML全部代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>注册</title> <
Spinner在Dialog中的使用效果实例代码详解

背景: 记得很久以前,碰到一个需求场景,需要在Android Dialog中显示Spinner,用来进行选择操作.那个时候还很困惑,不知道是否可以这么搞.抱着试试看的心态,做起了实验,看起来效果还可行,不过最终还是选用了一个开源项目,效果看起来更棒. 代码演示: Spinner在Dialog中的使用,Dialog中关于view的xml布局. <?xml version="1.0" encoding="utf-8"?> <LinearLayout x
vue使用Vue.extend方法仿写个loading加载中效果实例

目录需求描述效果图代码实现第一步,新建loading组件第二步,新建index.js文件第三步,在main.js中引入之第四步,命令式调用 Vue.extend方法的理解总结需求描述本文我们使用vue的extend方法实现一个全屏loading加载效果通过命令就可以让弹框开启或关闭,比如this.$showDialog()开启,this.$hideDialog()关闭方法可以传参更改loading中的文字也可以传参更改loading背景色当然这里除了文字,背景色什么的
AngularJS中使用three.js的实例详解

AngularJS中使用three.js的实例详解一.轨迹球的引入问题一开始我是用下面的方式引如轨迹球,但是会报Trackballcontrols is undefined的错. import * as THREE from 'three'; import * as Trackballcontrols from 'three'; 但其实我是能够在node_module下的threejs的包中找到Trackballcontrols的文件的,我一开始以为是引用的路径没对然后修改路径到对应包下Tr
使用jQuery实现两个div中按钮互换位置的实例代码

效果如下代码如下: <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/jquery-2.1.0.js"></script> <script type="text/javascript"> $(function() { /
JS 中使用Promise 实现红绿灯实例代码(demo)

要求使用promise 实现红绿灯颜色的跳转绿灯执行三秒后黄灯执行四秒后红灯执行五秒 html 实现如下: <ul id="traffic" class=""> <li id="green"></li> <li id="yellow"></li> <li id="red"></li> </ul> 定义一个

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

相关推荐

随机推荐