mui js控制开关状态、修改switch开关的值方法


Posted in Javascript onSeptember 03, 2019

修改开关的值

.mui-switch:before{
  font-size: 13px;
  position: absolute;
  top: 3px;
  right: 11px;
  content: attr(data-off);
  text-transform: uppercase;
  color: #999;
  }
  .mui-switch.mui-active:before{
  right: auto;
  left: 15px;
  content: attr(data-on);
  color: #fff;
  }



<div class="mui-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<span>报警消息设置</span>
<div class="mui-switch mui-active" id="mySwitch" data-off="关" data-on = "开">
<div class="mui-switch-handle"></div>
</div>
</li> 
</ul> 
</div>

控制开关状态:

document.getElementById("mySwitch").addEventListener("toggle",function(event){ 
if(event.detail.isActive){
  var btnArray = ['取消', '确认'];
mui.confirm('关闭报警推送消息后,系统将不再推送报警消息?', '警告!', btnArray, function(e) {
if(e.index==1){
console.log("你关闭了报警推送");
}else{
mui("#mySwitch").switch().toggle(); 
}
},'div') 
}else{
  
}
})

以上这篇mui js控制开关状态、修改switch开关的值方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Prototype的Class.create函数解析
Sep 22 Javascript
JavaScript实现网页对象拖放功能的方法
Apr 15 Javascript
招聘网站基于jQuery实现自动刷新简历
May 10 Javascript
javascript中html字符串转化为jquery dom对象的方法
Aug 27 Javascript
js仿微信语音播放实现思路
Dec 12 Javascript
概述jQuery中的ajax方法
Dec 16 Javascript
JavaScript使用简单正则表达式的数据验证功能示例
Jan 13 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
Mar 21 Javascript
jquery请求servlet实现ajax异步请求的示例
Jun 03 jQuery
jQuery创建及操作xml格式数据示例
May 26 jQuery
vuex页面刷新导致数据丢失的解决方案
Dec 10 Vue.js
详解template标签用法(含vue中的用法总结)
Jan 12 Vue.js
Layui给switch添加响应事件的例子
Sep 03 #Javascript
layui--js控制switch的切换方法
Sep 03 #Javascript
Vue使用Clipboard.JS在h5页面中复制内容实例详解
Sep 03 #Javascript
layui中的switch开关实现方法
Sep 03 #Javascript
微信小程序表单验证插件WxValidate的二次封装功能(终极版)
Sep 03 #Javascript
js获取浏览器地址(获取第1个斜杠后的内容)
Sep 03 #Javascript
vue路由教程之静态路由
Sep 03 #Javascript
You might like
提示Trying to clone an uncloneable object of class Imagic的解决
2011/10/27 PHP
解析PHP获取当前网址及域名的实现代码
2013/06/23 PHP
ucenter通信原理分析
2015/01/09 PHP
Zend Framework数据库操作技巧总结
2017/02/18 PHP
PHP中让json_encode不自动转义斜杠“/”的方法
2017/02/28 PHP
PHP处理bmp格式图片的方法分析
2017/07/04 PHP
JS解决url传值出现中文乱码的另类办法
2013/04/08 Javascript
让复选框只能选择一项的方法
2013/10/08 Javascript
JS正则表达式大全(整理详细且实用)
2013/11/14 Javascript
node+express+ejs制作简单页面上手指南
2014/11/26 Javascript
如何让你的Lightbox支持滚轮缩放及Base64图片
2014/12/04 Javascript
js文本框走动跑马灯效果代码分享
2015/08/25 Javascript
JS实现iframe自适应高度的方法示例
2017/01/07 Javascript
vue自定义全局共用函数详解
2018/09/18 Javascript
微信小程序防止多次点击跳转(函数节流)
2019/09/19 Javascript
JavaScript 俄罗斯方块游戏实现方法与代码解释
2020/04/08 Javascript
jQuery 选择方法及$(this)用法实例分析
2020/05/19 jQuery
解决vue的touchStart事件及click事件冲突问题
2020/07/21 Javascript
python 排列组合之itertools
2013/03/20 Python
对pandas的dataframe绘图并保存的实现方法
2017/08/05 Python
Python Tkinter实现简易计算器功能
2018/01/30 Python
用Python实现最速下降法求极值的方法
2019/07/10 Python
python实现图像检索的三种(直方图/OpenCV/哈希法)
2019/08/08 Python
Python selenium如何打包静态网页并下载
2020/08/12 Python
Html5游戏开发之乒乓Ping Pong游戏示例(三)
2013/01/21 HTML / CSS
HTML5拖拽文件上传的示例代码
2021/03/04 HTML / CSS
Bugatchi官方网站:男士服装在线
2019/04/10 全球购物
Derek Rose官网:英国高档睡衣、家居服和内衣品牌
2020/01/18 全球购物
自我鉴定模板
2013/10/29 职场文书
竞聘书模板
2014/03/31 职场文书
个人批评与自我批评范文
2014/10/17 职场文书
伏羲庙导游词
2015/02/09 职场文书
小区保洁员岗位职责
2015/04/10 职场文书
职工食堂管理制度
2015/08/06 职场文书
2016干部作风整顿心得体会
2016/01/22 职场文书
输入框跟随文字内容适配宽实现示例
2022/08/14 Javascript