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 相关文章推荐
Javascript在IE或Firefox下获取鼠标位置的代码
Dec 18 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
Sep 15 Javascript
基于jQuery的360图片展示实现代码
Jun 14 Javascript
JS的千分位算法实现思路
Jul 31 Javascript
jQuery Mobile的loading对话框显示/隐藏方法分享
Nov 26 Javascript
JS将光标聚焦在文本最后的实现代码
Mar 28 Javascript
js根据手机客户端浏览器类型,判断跳转官网/手机网站多个实例代码
Apr 30 Javascript
基于 Bootstrap Datetimepicker 联动
Aug 03 Javascript
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
element ui 对话框el-dialog关闭事件详解
Feb 26 Javascript
vue集成百度UEditor富文本编辑器使用教程
Sep 21 Javascript
javascript设计模式 ? 策略模式原理与用法实例分析
Apr 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
从MySQL数据库表中取出随机数据的代码
2007/09/05 PHP
跟我学Laravel之安装Laravel
2014/10/15 PHP
PHP日期函数date格式化UNIX时间的方法
2015/03/19 PHP
项目中应用Redis+Php的场景
2016/05/22 PHP
PHP仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(上)
2017/05/26 PHP
Laravel5.* 打印出执行的sql语句的方法
2017/07/24 PHP
js变量作用域及可访问性的探讨
2006/11/23 Javascript
js树插件zTree获取所有选中节点数据的方法
2015/01/28 Javascript
JavaScript实现动画打开半透明提示层的方法
2015/04/21 Javascript
JavaScript中实现map功能代码分享
2015/06/11 Javascript
jquery实现LED广告牌旋转系统图片切换效果代码分享
2015/08/26 Javascript
整理Javascript基础入门学习笔记
2015/11/29 Javascript
jQuery插件imgPreviewQs实现上传图片预览
2016/01/15 Javascript
基于JavaScript实现添加到购物车效果附源码下载
2016/08/22 Javascript
JavaScript正则替换HTML标签功能示例
2017/03/02 Javascript
彻底理解js面向对象之继承
2018/02/04 Javascript
解决vue跨域axios异步通信问题
2019/04/17 Javascript
小程序实现新用户判断并跳转激活的方法
2019/05/20 Javascript
vue分页插件的使用方法
2019/12/25 Javascript
[47:45]Liquid vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
将图片文件嵌入到wxpython代码中的实现方法
2014/08/11 Python
在scrapy中使用phantomJS实现异步爬取的方法
2018/12/17 Python
Python定时任务随机时间执行的实现方法
2019/08/14 Python
多个python文件调用logging模块报错误
2020/02/12 Python
接口自动化多层嵌套json数据处理代码实例
2020/11/20 Python
Django2.1.7 查询数据返回json格式的实现
2020/12/29 Python
请解释一下webService? 如何用.net实现webService
2014/06/09 面试题
六一儿童节演讲稿
2014/05/23 职场文书
社区科普工作方案
2014/06/03 职场文书
行政上诉状范文
2015/05/23 职场文书
优秀党员主要事迹材料
2015/11/04 职场文书
电力安全教育培训心得体会
2016/01/11 职场文书
2017年寒假少先队活动总结
2016/04/06 职场文书
MySQL令人大跌眼镜的隐式转换
2021/08/23 MySQL
Vue的过滤器你真了解吗
2022/02/24 Vue.js
使用python绘制分组对比柱状图
2022/04/21 Python