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 相关文章推荐
JS中==与===操作符的比较
Mar 21 Javascript
Javascript类定义语法,私有成员、受保护成员、静态成员等介绍
Dec 08 Javascript
jQuery插件-jRating评分插件源码分析及使用方法
Dec 28 Javascript
js实现使用鼠标拖拽切换图片的方法
May 04 Javascript
微信小程序之小豆瓣图书实例
Nov 30 Javascript
Ajax异步获取html数据中包含js方法无效的解决方法
Feb 20 Javascript
Bootstrap表格制作代码
Mar 17 Javascript
AngularJS基于MVC的复杂操作实例讲解
Dec 31 Javascript
vue中element组件样式修改无效的解决方法
Feb 03 Javascript
vue element-ui之怎么封装一个自己的组件的详解
May 20 Javascript
JavaScript实现PC端四格密码输入框功能
Feb 19 Javascript
js实现拾色器插件(ColorPicker)
May 21 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 压缩文件夹的类代码
2009/11/05 PHP
php页面消耗内存过大的处理办法
2013/03/18 PHP
php 伪造ip以及url来路信息方法汇总
2014/11/25 PHP
php 利用socket发送HTTP请求(GET,POST)
2015/08/24 PHP
php readfile下载大文件失败的解决方法
2017/05/22 PHP
初学Javascript的一些总结
2008/11/03 Javascript
juqery 学习之四 筛选过滤
2010/11/30 Javascript
js下将阿拉伯数字每三位一逗号分隔(如:15000000转化为15,000,000)
2014/06/02 Javascript
js实现图片漂浮效果的方法
2015/03/02 Javascript
如何利用模板将HTML从JavaScript中抽离
2016/10/08 Javascript
javascript 删除数组元素和清空数组的简单方法
2017/02/24 Javascript
jQuery自定义图片上传插件实例代码
2017/04/04 jQuery
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
2017/08/16 Javascript
vue微信分享 vue实现当前页面分享其他页面
2017/12/02 Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
2018/08/14 Javascript
layer.open 按钮的点击事件关闭方法
2018/08/17 Javascript
vue-cli3脚手架的配置及使用教程
2018/08/28 Javascript
layui添加动态菜单与选项卡
2019/07/26 Javascript
layui插件表单验证提交触发提交的例子
2019/09/09 Javascript
Element Badge标记的使用方法
2020/07/27 Javascript
微信小程序实现身份证取景框拍摄
2020/09/09 Javascript
vue-video-player 断点续播的实现
2021/02/01 Vue.js
详解如何在python中读写和存储matlab的数据文件(*.mat)
2018/02/24 Python
python高阶爬虫实战分析
2018/07/29 Python
详解Python循环作用域与闭包
2019/03/21 Python
python实现坦克大战
2020/04/24 Python
详解scrapy内置中间件的顺序
2020/09/28 Python
我想声明一个指针并为它分配一些空间, 但却不行。这些代码有什么 问题?char *p; *p = malloc(10);
2016/10/06 面试题
一套软件开发工程师笔试题
2015/05/18 面试题
党员干部承诺书
2014/03/25 职场文书
劳资协议书范本
2014/04/23 职场文书
病假条格式范文
2015/08/17 职场文书
导游词之丽江普济寺
2019/10/22 职场文书
OpenCV-Python实现人脸磨皮算法
2021/06/07 Python
我们认为中短波广播场强仪的最佳组合
2022/04/05 无线电
python APScheduler执行定时任务介绍
2022/04/19 Python