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 相关文章推荐
tagName的使用,留一笔
Jun 26 Javascript
Javascript的构造函数和constructor属性
Jan 09 Javascript
juqery 学习之三 选择器 简单 内容
Nov 25 Javascript
深入理解JavaScript中为什么string可以拥有方法
May 24 Javascript
浅谈js中test()函数在正则中的使用
Aug 19 Javascript
基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果
Nov 09 Javascript
解决Window10系统下Node安装报错的问题分析
Dec 13 Javascript
JavaScript实现简单的双色球(实例讲解)
Jul 31 Javascript
关于jquery中attr()和prop()方法的区别
May 28 jQuery
js中apply()和call()的区别与用法实例分析
Aug 14 Javascript
cnpm加速Angular项目创建的方法
Sep 07 Javascript
小程序实现搜索框功能
Mar 26 Javascript
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
采集邮箱的php代码(抓取网页中的邮箱地址)
2012/07/17 PHP
探讨如何在PHP开启gzip页面压缩实例
2013/06/09 PHP
使用php统计字符串中中英文字符的个数
2013/06/23 PHP
浅析php插件 HTMLPurifier HTML解析器
2013/07/01 PHP
PHP.ini安全配置检测工具pcc简单介绍
2015/07/02 PHP
PHP htmlspecialchars()函数用法与实例讲解
2019/03/08 PHP
基于jQuery的计算文本框字数的代码
2012/06/06 Javascript
jQuery获取浏览器中的分辨率实现代码
2013/04/23 Javascript
js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器
2013/05/21 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
2014/09/26 Javascript
理解Javascript的动态语言特性
2015/06/17 Javascript
Node.JS中快速扫描端口并发现局域网内的Web服务器地址(80)
2017/09/18 Javascript
微信小程序实现action-sheet弹出底部菜单功能【附源码下载】
2017/12/09 Javascript
NodeJS实现自定义流的方法
2018/08/01 NodeJs
element-ui的回调函数Events的用法详解
2018/10/16 Javascript
vue自定义指令用法经典实例小结
2019/03/16 Javascript
Vue 实现把表单form数据 转化成json格式的数据
2019/10/29 Javascript
vue ajax 拦截原理与实现方法示例
2019/11/29 Javascript
vue中的.$mount('#app')手动挂载操作
2020/09/02 Javascript
layui使用及简单的三级联动实现教程
2020/12/01 Javascript
[53:03]Optic vs TNC 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[22:59]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python实现简单拆分PDF文件的方法
2015/07/30 Python
Django自定义过滤器定义与用法示例
2018/03/22 Python
Python面向对象进阶学习
2019/05/21 Python
Python shutil模块用法实例分析
2019/10/02 Python
Python基础之函数基本用法与进阶详解
2020/01/02 Python
Python统计文本词汇出现次数的实例代码
2020/02/27 Python
Python无损压缩图片的示例代码
2020/08/06 Python
PyCharm最新激活码PyCharm2020.2.3有效
2020/11/18 Python
Python利用myqr库创建自己的二维码
2020/11/24 Python
写给女生的道歉信
2014/01/14 职场文书
安全环保标语
2014/06/09 职场文书
2014年基层党建工作总结
2014/11/11 职场文书
2016年小学六一儿童节活动总结
2016/04/06 职场文书
Python中生成随机数据安全性、多功能性、用途和速度方面进行比较
2022/04/14 Python