easyui-Messager（消息窗口）-01

最新推荐文章于 2019-11-11 01:18:27 发布

转载最新推荐文章于 2019-11-11 01:18:27 发布 · 331 阅读

easyUI 专栏收录该内容

6 篇文章

订阅专栏

01.jsp

<%@ 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 '001.jsp' starting page</title>

<script type="text/javascript"
	src="js/jquery-easyui-1.2.6/jquery-1.7.2.min.js"></script>
<link rel="stylesheet" type="text/css"
	href="js/jquery-easyui-1.2.6/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css"
	href="js/jquery-easyui-1.2.6/themes/icon.css" />
<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>
<script type="text/javascript">
	$(function() {
		$.messager.alert('警告', '警告消息');
		$.messager.show({
			title : '我的消息',
			msg : '消息将在5秒后关闭。',
			timeout : 5000,
			showType : 'slide'
		});

	});
</script>

</head>

<body>
	This is my JSP page.
	<br>
</body>
</html>

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

依赖关系

----------------------------

show

-----------------

1.显示警告窗口。参数：
title：在头部面板显示的标题文本。
msg：显示的消息文本。
icon：显示的图标图像。可用值有：error,question,info,warning。
fn: 在窗口关闭的时候触发该回调函数。

<pre name="code" class="html">$.messager.alert('警告', '警告消息');

<img src="https://img-blog.youkuaiyun.com/20151122190146193?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />

2.

<pre name="code" class="html">$.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:''
	}
});