快捷導(dǎo)航

在Layui中實(shí)現(xiàn)開(kāi)關(guān)按鈕的效果實(shí)例

更新時(shí)間：2019年09月29日 09:49:17 作者：我是奶油啊

今天小編就為大家分享一篇在Layui中實(shí)現(xiàn)開(kāi)關(guān)按鈕的效果實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

首先引入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" />

然后我有一個(gè)list表格其中有個(gè)字段叫是否有效

 {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>";
             }

          }},

執(zhí)行這一步才能渲染出效果

 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);
   });
       });

       }

接著要判斷狀態(tài)是否修改成功

以上這篇在Layui中實(shí)現(xiàn)開(kāi)關(guān)按鈕的效果實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

ES6中module模塊化開(kāi)發(fā)實(shí)例淺析
這篇文章主要介紹了ES6中module模塊化開(kāi)發(fā),結(jié)合實(shí)例形式分析了ES6中模塊化開(kāi)發(fā)的相關(guān)功能、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下
2017-04-04
基于Three.js實(shí)現(xiàn)酷炫3D地圖效果
這篇文章主要為大家詳細(xì)介紹了如何利用Three.js實(shí)現(xiàn)酷炫3D地圖的效果，文中的示例代碼講解詳細(xì)，具有一定的借鑒價(jià)值，感興趣的小伙伴可以嘗試一下
2022-10-10
js實(shí)現(xiàn)點(diǎn)擊左右按鈕輪播圖片效果實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)點(diǎn)擊左右按鈕輪播圖片效果的方法,涉及click事件相應(yīng)、animate方法等使用技巧,需要的朋友可以參考下
2015-01-01
微信小程序?qū)崿F(xiàn)星級(jí)評(píng)價(jià)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)星級(jí)評(píng)價(jià)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-11-11
uin-app+mockjs實(shí)現(xiàn)本地?cái)?shù)據(jù)模擬
這篇文章主要為大家詳細(xì)介紹了uin-app+mockjs實(shí)現(xiàn)本地?cái)?shù)據(jù)模擬，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-08-08
JavaScript 圖片放大鏡（可拖放、縮放效果）
背景：很久之前就在marry5.com看到這個(gè)效果，當(dāng)時(shí)覺(jué)得很神奇，礙于水平有限，沒(méi)做出來(lái)。
2008-09-09
詳解Javascript動(dòng)態(tài)操作CSS
本文我們會(huì)討論如何通過(guò) JavaScript 在運(yùn)行時(shí)操作 CSS，從而動(dòng)態(tài)地更新應(yīng)用到我們的元素上的式樣。本文所用的技術(shù)是我們已經(jīng)看到過(guò)的，但在利用 CSS DOM 來(lái)進(jìn)行操作的時(shí)候還需要注意幾個(gè)特殊點(diǎn)。
2014-12-12
JS中的async與await怎么使用
這篇文章主要介紹了JS的async/await怎么使用,簡(jiǎn)單來(lái)說(shuō)，async/await是基于promises的語(yǔ)法糖，使異步代碼更易于編寫和閱讀,下面來(lái)看詳細(xì)的介紹內(nèi)容吧。需要的小伙伴也可以參考一下
2021-12-12
JavaScript日期工具類DateUtils定義與用法示例
這篇文章主要介紹了JavaScript日期工具類DateUtils定義與用法,涉及javascript針對(duì)日期時(shí)間的獲取、轉(zhuǎn)換、比較、運(yùn)算等相關(guān)操作技巧,需要的朋友可以參考下
2018-09-09
JavaScript常用對(duì)象的方法和屬性小結(jié)
JavaScript是基于對(duì)象的語(yǔ)言。我們知道，對(duì)象是由一組數(shù)據(jù)(JavaScript中稱之為屬性)和施加在這組數(shù)據(jù)上的方法組成的。JavaScript中還有一些不屬于任何對(duì)象的系統(tǒng)函數(shù)
2012-01-01