JQuery EasyUI 之Messager(消息窗口)组件

川长思鸟来 2022-06-09 09:14 188阅读 0赞

代码：

message.html

<!DOCTYPE html>
    <html>
    <head>
    <title>消息框</title>
    <meta charset="UTF-8" />
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script>
    <script type="text/javascript" src="js/message.js"></script>
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />
    </head>
    <body>
    
    </body>
    </html>

message.js

$(function () {
       	$.messager.defaults = {
    		ok : '是',
    		cancel : '否',
    	};
    
    	$.messager.alert('警告框','这是一个提示！','info', function () {
    		alert('警告框');
    	});
    	
    	
    	$.messager.confirm('确认框','你真的要删除吗？', function (flag) {
    		if (flag) {
    			alert('删除成功！');
    		}
    	});
    	
    	
    	$.messager.prompt('提示框', '请输入你的名字！', function (content) {
    		if (content) {
    			alert(content);
    		}
    	});
    	
    	
    	$.messager.progress({
    		title : '执行中',
    		msg : '努力上传中',
    		text : '{value}%',
    		interval : 500,
    	});
    	
    	//console.log($.messager.progress('bar'));
    	$.messager.progress('close');
    	
    	
    	$.messager.show({
    		title : '我的消息',
    		msg : '消息5秒钟后关闭',
    		timeout : 5000,
    		showType : 'fade',
    		style : {
    			top : 0,
    		}
    	});
    
     	$.messager.confirm('确认框','你真的要删除吗？', function (flag) {
    		if (flag) {
    			alert('删除成功！');
    		}
    	});
    
    });

截图：

![Center][]

![Center 1][]

![Center 2][]

![Center 3][]

![Center 4][]

![Center 5][]

[Center]: /images/20220609/a5a158860e43457fb62d64ea9fb0e168.png
[Center 1]: /images/20220609/2b780921c1b04a709233389563f46aaa.png
[Center 2]: /images/20220609/f4485fd133b141778ef7ae740e65d29f.png
[Center 3]: /images/20220609/2262aea342ae4515a09b66ac05e635d6.png
[Center 4]: /images/20220609/09842a855fa34272b370b63ecf611c7c.png
[Center 5]: /images/20220609/5ae30e86f2134e2fb31308ac2099ed19.png