message消息框
2024-09-04 12:31:23
.messager.show | options | 在屏幕右下角显示一条消息窗口。该选项参数是一个可配置的对象: showType:定义将如何显示该消息。可用值有:null,slide,fade,show。默认:slide。 showSpeed:定义窗口显示的过度时间。默认:600毫秒。 width:定义消息窗口的宽度。默认:250px。 height:定义消息窗口的高度。默认:100px。 title:在头部面板显示的标题文本。 msg:显示的消息文本。 style:定义消息窗体的自定义样式。 timeout:如果定义为0,消息窗体将不会自动关闭,除非用户关闭他。如果定义成非0的树,消息窗体将在超时后自动关闭。默认:4秒。 代码示例: $.messager.show({ |
$.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){ |
$.messager.prompt | title, msg, fn | 显示一个用户可以输入文本的并且带“确定”和“取消”按钮的消息窗体。参数: title:在头部面板显示的标题文本。 msg:显示的消息文本。 fn(val): 在用户输入一个值参数的时候执行的回调函数。 代码示例: $.messager.prompt('提示信息', '请输入你的姓名:', function(r){ |
$.messager.progress | options or method | 显示一个进度消息窗体。 属性定义为: title:在头部面板显示的标题文本。默认:空。 msg:显示的消息文本。默认:空。 text:在进度条上显示的文本。默认:undefined。 interval:每次进度更新的间隔时间。默认:300毫秒。 方法定义为: 代码示例: 显示进度消息窗口。 $.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>
最新文章
- [知识点]字符串Hash
- network issue troubleshooting
- 算法第四版 用eclipse实现书中UnionFind例子
- c++学习笔记2--constexpr,类型别名,auto
- POJ 1686 Lazy Math Instructor (模似题+栈的运用) 各种坑
- canvas-画七巧板
- 几个简单的css设置问题:div居中,ul li不换行 ,内容超出自动变省略号等
- Dijkstra算法(迪杰斯塔拉算法)
- [ExtJS5学习笔记]第九节 Extjs5的mvc与mvvm框架结构简介
- Android绘图机制(四)——使用HelloCharts开源框架搭建一系列炫酷图表,柱形图,折线图,饼状图和动画特效,抽丝剥茧带你认识图表之美
- create-react-app 修改项目端口号及ip,设置代理
- 1. Scala概述
- Servlet学习:(三)Servlet3.0 上传文件
- Java中eclipse与命令行向main函数传递参数
- N-城堡问题
- python中logging模块的一些简单用法
- 【算法】DP解决旅行路径问题
- XML Parsing Error: no element found Location: moz-nullprincipal:{23686e7a-652b-4348-92f4-7fb3575179ed} Line Number 1, Column 1:^
- Docker(二十四)-Docker使用Portainer搭建可视化界面
- lambda续集——2