Layui給switch添加響應(yīng)事件的例子
今天做項(xiàng)目時(shí),遇到layui中的switch,需要給這個(gè)開關(guān)添加事件,也就是當(dāng)你點(diǎn)擊是會(huì)彈框提示
剛開始我用傳統(tǒng)的處理方法,直接給它添加個(gè)js事件,到最后會(huì)發(fā)現(xiàn),沒響應(yīng),于是我查文檔,逛論壇終于找到一個(gè)解決辦法,代碼如下
<input type="checkbox" name="zzz" lay-skin="switch" lay-filter="switchTest" lay-text="開啟|關(guān)閉" checked="checked">//開關(guān) //js處理 layui.use(['form', 'jquery', 'layer'], function () { var form = layui.form; var jquery = layui.jquery; var layer = layui.layer; //監(jiān)聽開關(guān)事件 form.on('switch(switchTest)', function (data) { var contexts; var x = data.elem.checked;//判斷開關(guān)狀態(tài) if (x==true) { contexts = "你確定要啟動(dòng)么"; } else { contexts = "你確定要關(guān)閉么"; } layer.open({ content: contexts , btn: ['確定', '取消'] , yes: function (index, layero) { data.elem.checked = x; form.render(); layer.close(index); //按鈕【按鈕一】的回調(diào) } , btn2: function (index, layero) { //按鈕【按鈕二】的回調(diào) data.elem.checked = !x; form.render(); layer.close(index); //return false 開啟該代碼可禁止點(diǎn)擊該按鈕關(guān)閉 } , cancel: function () { //右上角關(guān)閉回調(diào) data.elem.checked = !x; form.render(); //return false 開啟該代碼可禁止點(diǎn)擊該按鈕關(guān)閉 } }); return false; }); });
哈哈,總之,既然用人家layui框架,就要準(zhǔn)守人家的規(guī)矩!任何事件都要監(jiān)聽的,單純的寫js事件是沒反應(yīng)的,監(jiān)聽事件要寫在 layui.use({})中。
以上這篇Layui給switch添加響應(yīng)事件的例子就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
js獲取url參數(shù)的使用擴(kuò)展實(shí)例
js獲取參數(shù)的具體應(yīng)用,歡迎加入腳本之家交流群2007-12-12js 復(fù)制功能 支持 for IE/FireFox/mozilla/ns
js 復(fù)制功能 支持 for IE/FireFox/mozilla/ns...2007-11-11JS實(shí)現(xiàn)根據(jù)數(shù)組對(duì)象的某一屬性排序操作示例
這篇文章主要介紹了JS實(shí)現(xiàn)根據(jù)數(shù)組對(duì)象的某一屬性排序操作,涉及javascript針對(duì)json數(shù)組的遍歷、比較、排序等相關(guān)操作技巧,需要的朋友可以參考下2019-01-01純JS實(shí)現(xiàn)表單驗(yàn)證實(shí)例
這篇文章主要介紹了純JS實(shí)現(xiàn)表單驗(yàn)證實(shí)例,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-12-12Bootstrap媒體對(duì)象的實(shí)現(xiàn)
在web頁(yè)面中,圖片居左,內(nèi)容居右排列,是非常常見的效果,它也就是媒體對(duì)象,它是一種抽象的樣式,可以用來(lái)構(gòu)建不同類型的組件。本文給大家介紹Bootstrap媒體對(duì)象的實(shí)現(xiàn),感興趣的朋友一起學(xué)習(xí)吧2016-05-05JavaScript對(duì)象創(chuàng)建模式實(shí)例匯總
這篇文章主要介紹了JavaScript對(duì)象創(chuàng)建模式,結(jié)合實(shí)例形式總結(jié)分析了JavaScript常見的對(duì)象創(chuàng)建模式,包括工廠模式、構(gòu)造函數(shù)模式、原型模式、動(dòng)態(tài)原型模式、寄生構(gòu)造函數(shù)模式、穩(wěn)妥構(gòu)造函數(shù)模式等,需要的朋友可以參考下2016-10-10jQuery實(shí)現(xiàn)騰訊信用界面(自制刻度尺)樣式
這篇文章主要介紹了jQuery實(shí)現(xiàn)騰訊信用界面(自制刻度尺)樣式,下文還總結(jié)了關(guān)于jquery中extend的方法,需要的朋友可以參考下2017-08-08