在开发mui的过程中,我们最经常用到的就是消息框,例如警告框、确认框、对话框、消息提示框等等一系列的弹出消息框。mui没有让我们失望,这些都做好了封装,那我们如何去使用这些消息框呢?今天就和大家分享下如何使用这些消息框以及它们的方法。
alert(警告框)
用法:
.alert( message, title, btnValue, callback [, type] )
message
Type: String
提示对话框上显示的内容
title
Type: String
提示对话框上显示的标题
btnValue
Type: String
提示对话框上按钮显示的内容
callback
Type: String
提示对话框上关闭后的回调函数
type
Value: 'div'
是否使用h5绘制的对话框
示例代码:
html:
<button id='alertBtn' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">警告消息框</button> <div id="info"></div>
js:
var info = document.getElementById("info"); document.getElementById("alertBtn").addEventListener('tap', function() { mui.alert('欢迎使用Hello MUI', 'Hello MUI', function() { info.innerText = '你刚关闭了警告框'; }); });
confirm(确认框)
用法:
.confirm( message, title, btnValue, callback [, type] )
message
Type: String
提示对话框上显示的内容
title
Type: String
提示对话框上显示的标题
btnValue
Type: String
提示对话框上按钮显示的内容
callback
Type: String
提示对话框上关闭后的回调函数
type
Value: 'div'
是否使用h5绘制的对话框
示例代码:
html:
<button id='confirmBtn' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">确认消息框</button> <div id="info"></div>
js:
var info = document.getElementById("info"); document.getElementById("confirmBtn").addEventListener('tap', function() { var btnArray = ['否', '是']; mui.confirm('MUI是个好框架,确认?', 'Hello MUI', btnArray, function(e) { if (e.index == 1) { info.innerText = '你刚确认MUI是个好框架'; } else { info.innerText = 'MUI没有得到你的认可,继续加油' } }) });
prompt(对话框)
用法:
.prompt( message, placeholder, title, btnValue, callback[, type] )
message
Type: String
提示对话框上显示的内容
placeholder
Type: String
编辑框显示的提示文字
title
Type: String
提示对话框上显示的标题
btnValue
Type: String
提示对话框上按钮显示的内容
callback
Type: String
提示对话框上关闭后的回调函数
type
Value: 'div'
是否使用h5绘制的对话框
示例代码:
html:
<button id='promptBtn' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">输入对话框</button> <div id="info"></div>
js:
var info = document.getElementById("info"); document.getElementById("promptBtn").addEventListener('tap', function(e) { e.detail.gesture.preventDefault(); //修复iOS 8.x平台存在的bug,使用plus.nativeUI.prompt会造成输入法闪一下又没了 var btnArray = ['取消', '确定']; mui.prompt('请输入你对MUI的评语:', '性能好', 'Hello MUI', btnArray, function(e) { if (e.index == 1) { info.innerText = '谢谢你的评语:' + e.value; } else { info.innerText = '你点了取消按钮'; } }) });
toast(消息提示框)
用法:
.toast( message [,options])
message
Type: String
提示对话框上显示的内容
options
Type: JSON
提示消息的参数
示例代码:
html:
<button id='toastBtn' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">自动消失提示框</button> <div id="info"></div>
js:
var info = document.getElementById("info"); document.getElementById("toastBtn").addEventListener('tap', function() { mui.toast('欢迎体验Hello MUI'); });
上面这些就是mui自带的各种消息框的用法,但是细心的朋友一定发现了,上面说的是否使用h5绘制的对话框,为何都没有在例子中出现呢。在这里博主就统一和大家说下这句话是什么意思,意思就是这些提示框的内容你可以自己使用标签代码来布局你想要提示的展现样子,可以自定义样式。既然都可以使用,所以博主就单独弄到最后来和大家分享。具体代码如下:
我们拿confirm这个方法来举例说明下(其余方法都和这个一样):
html代码还是之前那个一样。
js:
var info = document.getElementById("info"); document.getElementById("confirmBtn").addEventListener('tap', function() { var btnArray = ['否', '是']; var message = '<h6>MUI是个好框架,确认?</h6>'; mui.confirm(message, 'Hello MUI', btnArray, function(e) { if (e.index == 1) { info.innerText = '你刚确认MUI是个好框架'; } else { info.innerText = 'MUI没有得到你的认可,继续加油' } },'div'); });
这样就可以实现自定义标签显示内容样式了,有兴趣的朋友可以自己敲下代码试试哈,有什么疑问或者建议可以在下方留言,谢谢!
你这几个demo有什么用?能运行?
为什么我把确认框的内容换成html标签之后返回的e.index都为1呢
感谢分享!!
mui与layui推荐用哪个
这个没有可比性,只能说看你用在什么场景哈,如果是APP的话推荐mui,毕竟这个算是国内很好的一个兼容安卓和IOS的一个前端ui框架。而layui主要是应用在PC,而且功能不是很全,它主要是因为弹窗而出名的,所以你可以在做PC的同时调用layui用它里面封装好的那些插件还是可以的
那时我也找了好久才发现要用html弹窗必须后面再写div这个参数才能实现,没有仔细看那时,博主分享出来了,很棒,比官网清晰多了,感谢