EasyUI之消息窗口messager

最新推荐文章于 2023-06-19 08:38:56 发布

sunpy 孙培煜

最新推荐文章于 2023-06-19 08:38:56 发布

阅读量1.6k

点赞数

分类专栏： __2.4 EasyUI

本文链接：https://blog.csdn.net/ya_1249463314/article/details/70037641

版权

__2.4 EasyUI 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1.样式

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

2.练习1：生成消息窗口

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>messager</title>
<!-- 引入css文件 -->
<link rel="stylesheet" href="themes/default/easyui.css" type="text/css"></link>
<link rel="stylesheet" href="themes/icon.css" type="text/css"></link>
        
<!-- 引入js文件 -->
<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>
    
</body>
<script type="text/javascript">
    $.messager.confirm(
        {
            title:"消息窗口",
            content:"注意身体"
        }
    );  
</script>
</html>

结果：

3.文档

属性

属性名	属性值类型	描述	默认值
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');