首页 > 代码库 > EasyUi各种消息框
EasyUi各种消息框
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>EasyUi各种提示框</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">
<script type="text/javascript" src="http://www.mamicode.com/js/jquery-easyui-1.5/jquery.min.js"></script>
<link rel="stylesheet" href="http://www.mamicode.com/js/jquery-easyui-1.5/themes/default/easyui.css" type="text/css"></link>
<!-- icon对应的是图片 -->
<link rel="stylesheet" href="http://www.mamicode.com/js/jquery-easyui-1.5/themes/icon.css" type="text/css"></link>
<script type="text/javascript" src="http://www.mamicode.com/js/jquery-easyui-1.5/jquery.easyui.min.js"></script>
<script type="text/javascript" src="http://www.mamicode.com/js/jquery-easyui-1.5/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
$(function(){
/*
title:提示框的标题
消息框弹出的内容：确定删除吗？
参数b:点击确定返回true，点击取消返回false
具体代码实现：
$.messager.confirm("提示框【title】","确定删除吗？",function(b){
if(b){ alert("删除成功！！！");
}else{ alert("删除失败！！！");
}
}); ************************************************************************************
页面加载弹出一个可输入文本的消息框，输出完毕后弹出消息111
title:提示框的标题 消息:提示框里面的内容
val:输出自己在文本框输入的内容
具体代码实现：
$.messager.prompt("title","消息",function(val){
alert(val);
});
************************************************************************************
页面加载后弹出一个进度条消息框
具体实现代码：
$.messager.progress({
title: "提示框", 提示框标题
msg: "文件下载中", 提示框内的内容
text: "正在加载...", 进度条内的内容
interval: 300 进度条的速度 });
************************************************************************************
页面加载后弹出一个带图片的消息框
这里需要注意的是： error是一个图片，只提供四片图片选择（question,info,warning,error)
$.messager.alert("title","内容","error",function(){
alert("111");
});
*/
//这个参数为options(配置项，一般已键值对形式出现)
$.messager.show({
showType: "slide", //定义消息窗口如何显示（null,slide,fade,show)
showSpeed: 3000, //定义消息窗口显示所需的时间（单位毫秒）
width: 100, //窗口宽度
height: 100, //窗口高度
msg: "显示的消息文字", //显示消息文字
title: "标题", //标题
timeout: 0 //如果定义为0，除非用户关闭，消息不会自己关闭，定义其他，消息将在超时自动关闭 }); });
</script>
</head>
<body>
<center>
<h2>EasyUi实现各种消息框</h2>
实现消息框需注意以下几点：
1. <!--
<script type="text/javascript" src="http://www.mamicode.com/js/jquery-easyui-1.5/jquery.min.js"></script> 这行代码必须放在第一行，其他四行顺序随便 <link rel="stylesheet" href="http://www.mamicode.com/js/jquery-easyui-1.5/themes/default/easyui.css" type="text/css"></link>
<link rel="stylesheet" href="http://www.mamicode.com/js/jquery-easyui-1.5/themes/icon.css" type="text/css"></link>
<script type="text/javascript" src="http://www.mamicode.com/js/jquery-easyui-1.5/jquery.easyui.min.js"></script>
<script type="text/javascript" src="http://www.mamicode.com/js/jquery-easyui-1.5/locale/easyui-lang-zh_CN.js">
-->
2.
代码必须放在页面加载后
<!--
$(function(){
这里写各种消息框代码
}
-->
</center>
</body>
</html>
EasyUi各种消息框