mui dtpicker 时间的设置 以及MUI的弹窗
1)引入mui.min.css,然后引入mui.picker.min.css 注意这个mui.picker.min.css 与 mui.picker.css 不一样
2)引入mui.min.js,然后引入mui.picker.min.js 注意这个mui.picker.min.js 与 mui.picker.js 不一样
3)加入以下代码:
HTML:
<div id="触发修改时间的对象的类" class="自定义class" data-options='{"type":"date","beginYear":1949,"endYear":2016}'></div> //可以自定义按钮样式
JQ:
1 <script> 2 3 (function($) { 4 5 $.init(); 6 7 var result=$(触发修改时间的对象)[0]; 8 9 result.addEventListener('tap', function() { 10 11 var optionsJson = this.getAttribute('data-options') || '{}'; 12 13 var options = JSON.parse(optionsJson); 14 15 var picker = new $.DtPicker(options); 16 17 picker.show(function(rs) { 18 19 result.innerText =rs.text; 20 21 picker.dispose(); 22 23 }); 24 25 }, false); 26 27 })(mui); 28 29 </script>
也可以在其中穿插弹窗:
1 (function($) { 2 $.init(); 3 4 var result=$(触发修改时间的对象)[0]; 5 result.addEventListener('tap', function() { 6 var btnArray = ['是', '否']; 7 mui.confirm('是否要修改生日', '警告', btnArray, function(e) { 8 if (e.index == 1) { 9 mui.toast('已取消修改'); 10 } else { 11 var optionsJson = $('.mycenter_birthday')[0].getAttribute('data-options') || '{}'; 12 var options = JSON.parse(optionsJson); 13 var picker = new $.DtPicker(options); 14 picker.show(function(rs) { 15 result.innerText =rs.text; 16 picker.dispose(); 17 mui.alert('已成功修改'); 18 }); 19 } 20 }) 21 }, false); 22 })(mui);
MUI弹窗:
1.alert弹窗:
1)不带回调函数:mui.alert("内容")
2)带回调函数:
mui.alert("标题","主题内容",function(){//回调函数 })
2.confirm确认框(也带回调函数)
var arr=['否','是']; //这里定义“是否”按钮,也可定义为确认取消 mui.confirm("主题内容", '标题',arr, function(e) {if(e.index == 1) { //根据上面arr的索引,1就是选择的“是”按钮... }else {... } })
3.promot
var arr=['取消','确定']; //定义按钮文字 mui.prompt("主题内容",“输入框placeholder”,'标题' ,arr,function(e){if (e.index == 1) { //根据上面arr的索引,1就是选择的“确定”按钮...} else {...} //输入的内容是e.value })
如果需要修改DOM
结构可以按照以下方式处理.
//修改弹出框默认input类型为password mui.prompt("主题内容",“输入框placeholder”,'标题' ,arr,null,'div') document.querySelector('.mui-popup-input input').type='password'
如果有定制对话框样式的需求( 只能修改h5模式对话框)可以在mui.css中修改.mui-popup
类下的样式
4.toast
mui.toast(“内容”)。弹出自后会自动消失
如果要修改toast的样式:
.mui-toast-container {bottom: 30px!important;/*离布局底部的距离*/ } .mui-toast-message {background: url(..) no-repeat; //toast的背景图片opacity: 0.5; //toast中背景色的透明度color: #FFFFFF; //toast中字体颜色width: 150px; //toast宽度padding:10px; //toast中文字的位置 }
注:这样改只在浏览器中有效,在app中是没效果的。
如果想在app中有效果,可考虑使用:
plus.nativeUI.toast(message,{ duration:'long', type:'div' }
);
message:提示信息
options:即第二个参数有可选属性:可设置提示消息显示的图标、持续时间、位置等type:“div”是强制使用mui消息框(div模式)。
options:参数需要mui 3.5版本以上才支持
转载于:https://www.cnblogs.com/zjjDaily/p/6070414.html
mui dtpicker 时间的设置 以及MUI的弹窗相关推荐
- layui时间怎么设置年月日时分秒_安卓手机便签敬业签到时间提醒后怎么设置延时30分钟再提醒?...
现在越来越多的网友开始使用敬业签来记事.设置待办事项提醒了,并且我们在敬业签中设置的待办事项提醒,不仅支持通过软件的弹窗和声音提醒,还支持通过微信.钉钉.短信.语音来电.日历(安卓)等方式同步提醒待办 ...
- linux 系统时间 硬件时间,linux 设置系统时间和硬件时间
linux 的系统时间有时跟硬件时间是不同步的 Linux时钟分为系统时钟(System Clock)和硬件(Real Time Clock,简称RTC)时钟.系统时钟是指当前Linux Kernel ...
- win7纯净版系统锁定系统时间的设置方法
在使用电脑的过程中总是会遇到各式各样的问题,就有小伙伴咨询小编说想要锁定系统时间,想知道怎么操作.那么针对这个问题,小编就以win7纯净版为例,给大家讲讲锁定系统时间的办法win7纯净版系统锁定系统时 ...
- 服务超时时间如何设置、如何对超时时间治理、超时设计原则一文揭秘!
微服务是⼀种分布式架构,系统内各部分(服务)被部署为单独的应用程序,并通过某种远程访问协议进⾏通讯.分布式应⽤的挑战之⼀就是如何管理远程服务的可用性和它们的响应.本⽂主要探讨服务的响应时间对系统的影响 ...
- win10 锁屏时间无法设置 解决方法
win10 锁屏时间无法设置 解决方法 问题描述: 解决方案: 问题描述: win10 无法修改屏幕保护时间 具体现象为:屏幕保护时间确定之后自动变为默认值. 解决方案: 将下段代码复制进txt,保存 ...
- mui html5 vue,VUE中使用MUI方法
VUE中如何使用MUI 1.第一步:下载MUI 百度搜索MUI进入其官网点击右上角github地址,下载MUI文件 2.第二步:拷贝文件 拷贝下载文件的dist目录中的三个文件复制到自己项目中创建的m ...
- js php 获取时间倒计时_,JS实现获取时间和设置倒计时代码分享
本文主要和大家分享JS实现获取时间和设置倒计时代码,希望能帮助到大家. 只做笔记记录一下,主要用到Date 和 setInterval 第一个倒计时的设置: var timeBox = documen ...
- 如何设置计算机的休眠时间,电脑的睡眠时间如何设置?
设置计算机睡眠时间可以有效的起到保护电脑的作用.平常的时候可能因为一些事情需要做或者在使用电脑的时候中途离开,暂时不用电脑.或者想使用电脑的时候以防忘记关机等这些情况,这个时候就可以设置计算机的睡眠时 ...
- win11待机时间怎么设置 windows待机时间设置的步骤方法
我们可以通过设置待机时间让电脑在不需要操作后进入休眠,休眠状态可以减少电力损耗,同时可以保护我们的电脑屏幕和电源使用.那么Win11待机时间怎么设置?下面小编给大家带来Win11设置屏幕休眠时间方法, ...
最新文章
- JAVA-OPTS引发的思考
- dedecms织梦专题节点列表内容怎么实现分页
- 前端工程师有哪些面试技巧值得掌握?
- CPU 明明 8 个核,网卡为啥拼命折腾一号核?
- linux7 开启端口,常用CentOS7系统防火墙开启设置和开放端口方法
- ftp改为sftp_ftp自动传输软件,ftp自动传输软件使用方法详细介绍
- VS2017 CUDA编程学习12:CUDA流
- Java方法变量中的final
- 瑞星客户端卸载操作手册
- 中国移动 烽火HG6543C5光猫 获取超级密码教程
- R语言波士顿房价分析
- 【已解决】 Unable to attach or mount volumes: unmounted volumes
- Spring框架中IOC和DI的区别
- TCP ACKed unseen segment TCP Previous not captured
- 线程专用钩子和全局钩子的差别
- 在线多线网络测速工具
- 【PHP学习】—apache配置虚拟主机(基于域名)
- 基于opencv实现的手写数字识别
- 让人秒懂的Redis的事件处理机制
- 学习杂记0001:2019.11.02
热门文章
- 论文 | 港中文自动驾驶点云上采样方法
- 从零开始编写深度学习库(一)SoftmaxWithLoss CPU编写
- 刑事科学技术专业与计算机专业,辽宁警察学院刑事科学技术专业
- Android项目跑不起来,本机的android虚拟机跑不起android小项目
- 函数返回字符串指针C语言,C语言:利用指针和函数调用编写字符串拷贝函数strcpy...
- 第四届CocoaChina开发者大会官网上线
- @scheduled注解配置时间_Java开发重写Spring Boot定时任务,支持可动态调整执行时间...
- Python实现图像直方图均衡化算法
- 13.函数式编程:匿名函数、高阶函数、装饰器
- SourceTree超前一个版本,落后N个版本