jQuery-EasyUI学习（十五）Messager（消息窗口）

最新推荐文章于 2025-06-25 17:27:58 发布

quge_name_harder

最新推荐文章于 2025-06-25 17:27:58 发布

阅读量605

点赞数

CC 4.0 BY-SA版权

分类专栏： easyUi

本文链接：https://blog.youkuaiyun.com/quge_name_harder/article/details/84570662

easyUi 专栏收录该内容

16 篇文章

订阅专栏

本文详细介绍了jQuery EasyUI的Messager组件，包括各种消息框类型如警告、确认和提示，强调其异步特性和回调函数的使用，同时涵盖了相关属性和方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、Messager（消息窗口）

消息窗口提供了不同的消息框风格，包含alert(警告框), confirm(确认框), prompt(提示框), progress(进度框)等。所有的消息框都是异步的。用户可以在交互消息之后使用回调函数去处理结果或做一些自己需要处理的事情。

二、例子

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Messager（消息窗口）</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  	<link rel="stylesheet" href="../themes/default/easyui.css" type="text/css"></link>
    <link rel="stylesheet" href="../themes/icon.css" type="text/css"></link>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../js/easyui-lang-zh_CN.js"></script>
  </head>
  <body>
	
	
	<input type="button" value="警告框"/><br/>
	<input type="button" value="确认框"/><br/>
	<input type="button" value="输入框"/><br/>
	<input type="button" value="显示框"/><br/>
	
	
	<div style="margin:100px"></div>
	<script type="text/javascript">
		//定位所有的button按钮，同时提供单击事件
		$(":button").click(function(){
			//获取value属性值
			var tip = $(this).val();
			//去空格
			tip = $.trim(tip);
			//如果警告框的话
			if("警告框" == tip){
				$.messager.alert("警告框","继续努力","warning",function(){
					alert("关闭");
				});
			}else if("确认框" == tip){
				$.messager.confirm("确认框","你确认要关闭该确认框吗?",function(value){
					alert(value);
				});	
			}else if("输入框" == tip){
				$.messager.prompt("输入框","你期希的月薪是多少?",function(sal){
					
					if(sal == undefined){
						alert("请输入月薪");
					}else{
						if(sal<6000){
							alert("你的谦虚了");
						}else if(sal < 7000){
							alert("你加点油了");
						}else{
							alert("你很不错了");
						}
					}
					
				});
			}else if("显示框" == tip){
				$.messager.show({
					showType : "slide",
					showSpeed : 500,
					width : 300,
					height : 300,
					title : "显示框",
					msg : "这是内容",
					timeout : 5000
				});
			}
		});	
	</script>
  </body>
</html>

三、属性

属性名	属性值类型	描述	默认值
ok	string	确定按钮文本。	Ok
cancel	string	取消按钮文本。	Cancel

四、方法

方法名	方法参数	描述
$.messager.show	options	在屏幕右下角显示一条消息窗口。该选项参数是一个可配置的对象： showType：定义将如何显示该消息。可用值有：null,slide,fade,show。默认：slide。 showSpeed：定义窗口显示的过度时间。默认：600毫秒。 width：定义消息窗口的宽度。默认：250px。 height：定义消息窗口的高度。默认：100px。 title：在头部面板显示的标题文本。 msg：显示的消息文本。 style：定义消息窗体的自定义样式。 timeout：如果定义为0，消息窗体将不会自动关闭，除非用户关闭他。如果定义成非0的树，消息窗体将在超时后自动关闭。默认：4秒。代码示例： $.messager.show({ title:'我的消息', msg:'消息将在5秒后关闭。', timeout:5000, showType:'slide' }); // 消息将显示在顶部中间 $.messager.show({ title:'我的消息', msg:'消息将在4秒后关闭。', showType:'show', style:{ right:'', top:document.body.scrollTop+document.documentElement.scrollTop, bottom:'' } });
$.messager.alert	title, msg, icon, fn	显示警告窗口。参数： title：在头部面板显示的标题文本。 msg：显示的消息文本。 icon：显示的图标图像。可用值有：error,question,info,warning。 fn: 在窗口关闭的时候触发该回调函数。代码示例： $.messager.alert('我的消息','这是一个提示信息！','info');
$.messager.confirm	title, msg, fn	显示一个包含“确定”和“取消”按钮的确认消息窗口。参数： title：在头部面板显示的标题文本。 msg：显示的消息文本。 fn(b): 当用户点击“确定”按钮的时侯将传递一个true值给回调函数，否则传递一个false值。代码示例 $.messager.confirm('确认对话框', '您想要退出该系统吗？', function(r){ if (r){ // 退出操作; } });
$.messager.prompt	title, msg, fn	显示一个用户可以输入文本的并且带“确定”和“取消”按钮的消息窗体。参数： title：在头部面板显示的标题文本。 msg：显示的消息文本。 fn(val): 在用户输入一个值参数的时候执行的回调函数。代码示例： $.messager.prompt('提示信息', '请输入你的姓名：', function(r){ if (r){ alert('你的姓名是：' + r); } });
$.messager.progress	options or method	显示一个进度消息窗体。属性定义为： title：在头部面板显示的标题文本。默认：空。 msg：显示的消息文本。默认：空。 text：在进度条上显示的文本。默认：undefined。 interval：每次进度更新的间隔时间。默认：300毫秒。方法定义为： bar：获取进度条对象。 close：关闭进度窗口。代码示例：显示进度消息窗口。 $.messager.progress(); 关闭进度消息窗口。 $.messager.progress('close');