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:
<script> (function($) { $.init(); var result=$(触发修改时间的对象)[0]; result.addEventListener('tap', function() { var optionsJson = this.getAttribute('data-options') || '{}'; var options = JSON.parse(optionsJson); var picker = new $.DtPicker(options); picker.show(function(rs) { result.innerText =rs.text; picker.dispose(); }); }, false); })(mui); </script>
也可以在其中穿插弹窗:
(function($) {
$.init(); var result=$(触发修改时间的对象)[0];
result.addEventListener('tap', function() {
var btnArray = ['是', '否'];
mui.confirm('是否要修改生日', '警告', btnArray, function(e) {
if (e.index == 1) {
mui.toast('已取消修改');
} else {
var optionsJson = $('.mycenter_birthday')[0].getAttribute('data-options') || '{}';
var options = JSON.parse(optionsJson);
var picker = new $.DtPicker(options);
picker.show(function(rs) {
result.innerText =rs.text;
picker.dispose();
mui.alert('已成功修改');
});
}
})
}, false);
})(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版本以上才支持
mui dtpicker 时间的设置 以及MUI的弹窗的更多相关文章
- Mui自定义时间格式:
Mui自定义时间格式: (function($) { $.init(); $(document).on('tap','.btn',function(){ var obj = getFormJson($ ...
- MUI DtPicker 显示自定义日期
MUI地址:http://dev.dcloud.net.cn/mui/ 首先引入相关JS CSS脚本. HTML代码: <input class="dt flat" styl ...
- MUI 窗体切换(setting设置)即窗口从右往左切换,返回从左往右切换。
1)引入mui.min.css 2)引入mui.min.js 引入mui.view.js 1.HTML: //这是页面的主体结构 <div id="app" class=& ...
- 关于web会话中的session过期时间的设置
关于web会话中的session过期时间的设置 1.操作系统: 步骤:开始——〉管理工具——〉Internet信息服务(IIS)管理器——〉网站——〉默认网站——〉右键“属性”——〉主目录——〉配置— ...
- Linux系统时间的设置
1. Linux系统时间的设置 在Linux中设置系统时间,可以用date命令: //查看时间[root@node1 ~]# dateTue Feb 25 20:15:18 CST 2014//修改时 ...
- Django之时间的设置
Django之时间的设置 在Django的配置文件 settings.py 中,有两个配置参数是跟时间与时区有关的,分别是 TIME_ZONE 和 USE_TZ. 如果USE_TZ设置为True时,D ...
- mui自定义事件带参返回mui.back()
父页面添加自定义监听事件:(e.detail.xxx) window.addEventListener('doit', function(e){ //获取参数值 var imagePath = e.d ...
- js中如何对时间进行设置
js中如何对时间进行设置 Js获取当前日期时间及其它操作var myDate = new Date();myDate.getYear(); //获取当前年份(2位)myDate.getF ...
- iPhone 12 Pro 屏幕时间设置的密码锁出现弹窗 UI 错位重大 Bug
iPhone 12 Pro 屏幕时间设置的密码锁出现弹窗 UI 错位重大 Bug iOS 14.1 Bug 弹窗 UI 非常丑 弹窗屏占太高了 屏幕使用时间 https://support.apple ...
随机推荐
- SE Class's Individual Project--12061161 赵梓皓
1. 项目预计的用时 其实刚开始以为这个项目不难写,因为上学期oo课程上用java写过类似的程序(貌似还比这个复杂).觉得主要的难点在于学习c++语言. 总的项目被分为大概3个部分. 其一,文件遍历. ...
- Linux内核分析作业第七周
一. 预处理.编译.链接 gcc hello.c -o hello. gcc编译源代码生成最终可执行的二进制程序,GCC后台隐含执行了四个阶段步骤. 预处理 → 编译 → 汇编 → 链接 预处理:编译 ...
- Tomcat启动失败
前景:使用的是tomcat9.0,配置好后,使用一切正常,刷慕课跟着做练习,也一切正常.出事在于,老师为了方便直接拷之前写的一个项目,我照做了,老师改了虚拟路径了,我忘记改了,然后跑了一下项目就出毛病 ...
- PHP文件下载功能实现
客户端的浏览器通过HTTP协议可以实现文件下载: 方法一: 能提供用户下载的最简单的方法就是使用一个<a></a>标签,比如在页面中添加这么一行代码 <a href=&q ...
- 当返回值为json字符串时 如何获得其中的json数组
json数据格式 {"IPPORT":"192.168.0.12","time":"2017-04-05 09:12:06&quo ...
- 深入理解 Laravel 中 config 配置加载原理
Laravel的配置加载其实就是加载config目录下所有文件配置.如何过使用php artisan config:cache则会把加载的配置合并到一个配置文件中,下次请求就不会再去加载config目 ...
- Bootstrap @Media分类
手机的屏幕比较小,宽度通常在600像素以下:PC的屏幕宽度,一般都在1000像素以上(目前主流宽度是1366×768)设置相应的min-width和max-width值 所以响应式设计一般对600 ...
- ubuntu更改分辨率
1. 输入:$cvt 1920 1080 2 输入: $xrandr 3 输入: $sudo xrandr --newmode "1920x1080_60.00" 173.00 1 ...
- Java微信二次开发(十)
生成带参数的二维码以及长链接转短链接 第一步:找到包com.wtz.vo,新建类WeixinQRCode.java package com.wtz.vo; /** * @author wangtian ...
- visual studio 和 sql server 的激活密钥序列号
VS2010: YCFHQ-9DWCY-DKV88-T2TMH-G7BHP VS2013: BWG7X-J98B3-W34RT-33B3R-JVYW9 VS2015: 专业版:HMGNV-WCYXV- ...