MUI实现常用的几类对话框

最新推荐文章于 2020-12-20 10:33:03 发布

Trevor Lan

最新推荐文章于 2020-12-20 10:33:03 发布

阅读量1k

点赞数

分类专栏： MUI

本文链接：https://blog.csdn.net/lwqBrell/article/details/100116131

版权

MUI 专栏收录该内容

19 篇文章 6 订阅

订阅专栏

引言

在开发行业中，对话框可以说是无处不在的了。在开发界我们一般把对话框分成警告框、确认框、输入框和自动消失的提示框。

比如用户无意中点击了关闭按钮，这是我们的程序不能傻乎乎的就关闭了，我们得弹出一个提示框，询问用户是否真的要关闭，

否则又得被用户吐槽了，所以在这里笔者记录了一下几种对话框，方便自己日后查阅，如果能帮助到大家那就再好不过了。

实现效果

警告框

mui.alert('message','title','btnValue',callback,'div')

message ：提示语

title ：标题

btnValue ：按钮的显示内容

callback ：回调函数

div ：以div的形式显示弹窗

确认框

mui.confirm('message','title',btnValue,callback,'div')

message ：提示语

title ：标题

btnValue ：按钮的显示内容，数组的形式，如：['取消','确认']

callback ：回调函数

div ：以div的形式显示弹窗

输入对话框

 mui.prompt('message','defaultText','title',btnValue,callback,'div')

message ：提示语

defaultText ：编辑框提示语

title ：标题

btnValue ：按钮的显示内容，数组的形式，如：['取消','确认']

callback ：回调函数

div ：以div的形式显示弹窗

自动显示提示框

 mui.toast('message')

message ：提示语

案例源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>对话框</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="css/mui.min.css">
		<style>
			.mui-btn {
				display: block;
				width: 120px;
				margin: 10px auto;
			}
			
			#info {
				padding: 20px 10px;
			}
		</style>

	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">对话框</h1>
		</header>
		<div class="mui-content">
			<div class="mui-content-padded" style="margin: 5px;text-align: center;">
				<button id='alert-btn' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">警告消息框</button>
				<button id='confirm-btn' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">确认消息框</button>
				<button id='prompt-btn' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">输入对话框</button>
				<button id='toast-btn' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">自动消失提示框</button>
				<div id="info"></div>
			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript" charset="utf-8">
			// mui初始化
			mui.init({
				swipeBack: true 
			});
			
			// 提示语
			var info = document.getElementById("info");
			
			// 警告信息框
			document.getElementById("alert-btn").addEventListener('tap', function() {
				mui.alert('这是一个警告信息', '警告框', function() {
					info.innerText = '警告被关闭了';
				});
			});
			
			// 确认信息框
			document.getElementById("confirm-btn").addEventListener('tap', function() {
				var btnArray = ['否', '是'];
				mui.confirm('我是大帅哥', '确认框', btnArray, function(e) {
					if (e.index == 1) {
						info.innerText = '你说的对';
					} else {
						info.innerText = '你撒谎'
					}
				})
			});
			
			// 输入信息框
			document.getElementById("prompt-btn").addEventListener('tap', function(e) {
				e.detail.gesture.preventDefault(); 
				var btnArray = ['取消', '确定'];
				mui.prompt('约么', '好呀', '输入框', btnArray, function(e) {
					if (e.index == 1) {
						info.innerText = e.value;
					} else {
						info.innerText = '真的不约么?';
					}
				})
			});
			
			// 自动消息信息框
			document.getElementById("toast-btn").addEventListener('tap', function() {
				mui.toast('我会自己消失哦');
			});
		</script>
	</body>

</html>

GitHub：

https://github.com/lwqbrell/mui_dialog_box

下载链接：

链接：https://pan.baidu.com/s/1lVzRa15lucRyd8KvWJ88mQ
提取码：95ay

Trevor Lan

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
MUI实现常用的几类对话框

引言在开发行业中，对话框可以说是无处不在的了。在开发界我们一般把对话框分成警告框、确认框、输入框和自动消失的提示框。比如用户无意中点击了关闭按钮，这是我们的程序不能傻乎乎的就关闭了，我们得弹出一个提示框，询问用户是否真的要关闭，否则又得被用户吐槽了，所以在这里笔者记录了一下几种对话框，方便自己日后查阅，如果能帮助到大家那就再好不过了。实现效果警告框mui.ale...
复制链接

扫一扫