message消息框

.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>
View Code

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>
View Code

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>
View Code

 

posted @ 2016-08-11 15:12  guodaxia  阅读(531)  评论(0)  编辑  收藏  举报