mui dtpicker 时间的设置 以及MUI的弹窗

2025-09-21 19:45:28
Avatar for adminadmin

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:

//可以自定义按钮样式

JQ:

1

也可以在其中穿插弹窗:

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版本以上才支持

Copyright © 2088 沙滩足球世界杯_足球世界杯中国 - pfw18.com All Rights Reserved.
友情链接