| .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');
|
例子：
1、alert
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'message01.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <script type="text/javascript" src="js/jquery-easyui-1.2.6/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="js/jquery-easyui-1.2.6/jquery.easyui.min.js"></script> <script type="text/javascript" src="js/jquery-easyui-1.2.6/locale/easyui-lang-zh_CN.js"></script> <link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.2.6/themes/icon.css"> <link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.2.6/themes/gray/easyui.css"> <link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.2.6/demo/demo.css"> </head> <body> <h2>Alter Messager</h2> <p>点击每一个按钮显示不同的消息框</p> <div style="margin:20px 0;"> <a href="javascript:void(0)" class="easyui-linkbutton" onclick="alert1()">Alert</a> <a href="javascript:void(0)" class="easyui-linkbutton" onclick="alert2()">Error</a> <a href="javascript:void(0)" class="easyui-linkbutton" onclick="alert3()">Info</a> <a href="javascript:void(0)" class="easyui-linkbutton" onclick="alert4()">Question</a> <a href="javascript:void(0)" class="easyui-linkbutton" onclick="alert5()">Warning</a> </div> <script> function alert1(){ $.messager.alert('My Title','Here is a message!'); } function alert2(){ $.messager.alert('My Title','Here is a error message!','error',function(){ alert("消息框完成了"); }); } function alert3(){ $.messager.alert('My Title','Here is a info message!','info'); } function alert4(){ $.messager.alert('My Title','Here is a question message!','question'); } function alert5(){ $.messager.alert('My Title','Here is a warning message!','warning'); } </script> </body> </html>
2、show和progress
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'message01.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <script type="text/javascript" src="js/jquery-easyui-1.2.6/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="js/jquery-easyui-1.2.6/jquery.easyui.min.js"></script> <script type="text/javascript" src="js/jquery-easyui-1.2.6/locale/easyui-lang-zh_CN.js"></script> <link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.2.6/themes/icon.css"> <link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.2.6/themes/gray/easyui.css"> <link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.2.6/demo/demo.css"> </head> <body> <h2>Alter Messager</h2> <p>点击每一个按钮显示不同的消息框</p> <div style="margin:20px 0;"> <a href="javascript:void(0)" class="easyui-linkbutton" onclick="show()">Show</a> <a href="javascript:void(0)" class="easyui-linkbutton" onclick="slide()">Silde</a> <a href="javascript:void(0)" class="easyui-linkbutton" onclick="fade()">Fade</a> <a href="javascript:void(0)" class="easyui-linkbutton" onclick="progess()">Progess</a> </div> <script> function show(){ $.messager.show({ title:'My Title', msg:'Message will be closed after 4 second', showType:'show' }); } function slide(){ $.messager.show({ title:'My Title', msg:'Message will be closed after 5 second', timeout:5000, showType:'slide' }); } function fade(){ $.messager.show({ title:'My Title', msg:'Message never be closed.', timeout:0, showType:'fade' }); } function progess(){ $.messager.progress({ title:'Please waiting', msg:'Loading data...', text:'Loading ...', interval:500 }); setTimeout(function(){ $.messager.progress('close'); },5000); } </script> </body> </html>
3、confirm和prompt
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'message01.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <script type="text/javascript" src="js/jquery-easyui-1.2.6/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="js/jquery-easyui-1.2.6/jquery.easyui.min.js"></script> <script type="text/javascript" src="js/jquery-easyui-1.2.6/locale/easyui-lang-zh_CN.js"></script> <link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.2.6/themes/icon.css"> <link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.2.6/themes/gray/easyui.css"> <link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.2.6/demo/demo.css"> </head> <body> <h2>Alter Messager</h2> <p>点击每一个按钮显示不同的消息框</p> <div style="margin:20px 0;"> <a href="javascript:void(0)" class="easyui-linkbutton" onclick="confirm1()">confirm</a> <a href="javascript:void(0)" class="easyui-linkbutton" onclick="prompt1()">prompt</a> </div> <script> function confirm1(){ $.messager.confirm("My Title","Are you confirm this?",function(r){ if(r){ alert("confirmed: "+r); } }); } function prompt1(){ $.messager.prompt("My Title","Please type something",function(r){ if(r){ alert("you type: "+r); } }); } </script> </body> </html>