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 和 CSS 实现脚注(Footnote)效果
Sep 09 Javascript
javascript hasFocus使用实例
Jun 29 Javascript
JS链式调用的实现方法
Mar 07 Javascript
js 判断文件类型并控制表单提交示例代码
Nov 14 Javascript
JS获取随机数函数可自定义最小值最大值
May 08 Javascript
javascript中if和switch,==和===详解
Jul 30 Javascript
简单讲解AngularJS的Routing路由的定义与使用
Mar 05 Javascript
JavaScript必知必会(二) null 和undefined
Jun 08 Javascript
JS日程管理插件FullCalendar中文说明文档
Feb 06 Javascript
基于LayUI实现前端分页功能的方法
Jul 22 Javascript
javascript的hashCode函数实现代码小结
Aug 11 Javascript
Vue与React的区别和优势对比
Dec 18 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
PHP 中的一些经验积累
2006/10/09 PHP
php下检测字符串是否是utf8编码的代码
2008/06/28 PHP
PHP控制网页过期时间的代码
2008/09/28 PHP
php中解析带中文字符的url函数分享
2015/01/20 PHP
Zend Framework+smarty用法实例详解
2016/03/19 PHP
PHP命名空间和自动加载类
2016/04/03 PHP
PHP中cookie知识点学习
2018/05/06 PHP
uploadify 3.0 详细使用说明
2012/06/18 Javascript
js控制表单奇偶行样式的简单方法
2013/07/31 Javascript
jquery中获取元素里某一特定子元素的代码
2014/12/02 Javascript
js+html5实现canvas绘制镂空字体文本的方法
2015/06/05 Javascript
JavaScript 常见安全漏洞和自动化检测技术
2015/08/21 Javascript
用JavaScript获取页面文档内容的实现代码
2016/06/10 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
2016/11/02 Javascript
很棒的一组js图片轮播特效
2017/01/12 Javascript
javascript中的面向对象
2017/03/30 Javascript
node.js 核心http模块,起一个服务器,返回一个页面的实例
2017/09/11 Javascript
ES6 Promise对象的含义和基本用法分析
2019/06/14 Javascript
python selenium 对浏览器标签页进行关闭和切换的方法
2018/05/21 Python
python调用Matplotlib绘制分布点并且添加标签
2018/05/31 Python
python3解析库BeautifulSoup4的安装配置与基本用法
2018/06/26 Python
python paramiko利用sftp上传目录到远程的实例
2019/01/03 Python
Python PO设计模式的具体使用
2019/08/16 Python
pytorch查看模型weight与grad方式
2020/06/24 Python
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
2012/12/13 HTML / CSS
工商管理专业职业生涯规划
2014/01/01 职场文书
大学总结自我鉴定
2014/01/18 职场文书
早读迟到检讨书
2014/01/24 职场文书
三字经教学反思
2014/04/26 职场文书
银行竞聘上岗演讲稿
2014/09/12 职场文书
三八妇女节寄语
2015/02/27 职场文书
公司门卫岗位职责
2015/04/13 职场文书
2015年学生资助工作总结
2015/05/25 职场文书
2016猴年春节问候语
2015/11/11 职场文书
python爬虫框架feapde的使用简介
2021/04/20 Python
Python实现对齐打印 format函数的用法
2022/04/28 Python