在Layui中實現(xiàn)開關按鈕的效果實例
更新時間：2019年09月29日 09:49:17 作者：我是奶油啊
今天小編就為大家分享一篇在Layui中實現(xiàn)開關按鈕的效果實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
首先引入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>";
}
}},
執(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中實現(xiàn)開關按鈕的效果實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了ES6中module模塊化開發(fā),結合實例形式分析了ES6中模塊化開發(fā)的相關功能、使用方法與相關注意事項,需要的朋友可以參考下2017-04-04
這篇文章主要為大家詳細介紹了如何利用Three.js實現(xiàn)酷炫3D地圖的效果，文中的示例代碼講解詳細，具有一定的借鑒價值，感興趣的小伙伴可以嘗試一下2022-10-10
這篇文章主要介紹了js實現(xiàn)點擊左右按鈕輪播圖片效果的方法,涉及click事件相應、animate方法等使用技巧,需要的朋友可以參考下2015-01-01
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)星級評價，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-11-11
uin-app+mockjs實現(xiàn)本地數(shù)據(jù)模擬
這篇文章主要為大家詳細介紹了uin-app+mockjs實現(xiàn)本地數(shù)據(jù)模擬，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
背景：很久之前就在marry5.com看到這個效果，當時覺得很神奇，礙于水平有限，沒做出來。2008-09-09
本文我們會討論如何通過 JavaScript 在運行時操作 CSS，從而動態(tài)地更新應用到我們的元素上的式樣。本文所用的技術是我們已經(jīng)看到過的，但在利用 CSS DOM 來進行操作的時候還需要注意幾個特殊點。2014-12-12
這篇文章主要介紹了JS的async/await怎么使用,簡單來說，async/await是基于promises的語法糖，使異步代碼更易于編寫和閱讀,下面來看詳細的介紹內(nèi)容吧。需要的小伙伴也可以參考一下2021-12-12
JavaScript日期工具類DateUtils定義與用法示例
這篇文章主要介紹了JavaScript日期工具類DateUtils定義與用法,涉及javascript針對日期時間的獲取、轉換、比較、運算等相關操作技巧,需要的朋友可以參考下2018-09-09
JavaScript是基于對象的語言。我們知道，對象是由一組數(shù)據(jù)(JavaScript中稱之為屬性)和施加在這組數(shù)據(jù)上的方法組成的。JavaScript中還有一些不屬于任何對象的系統(tǒng)函數(shù)2012-01-01