文档章节

2.EASYUI Messager 组件

F
 Favour
发布于 2016/08/13 12:55
字数 1240
阅读 37
收藏 2
点赞 0
评论 0

1.基本消息组件

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<meta charset="UTF-8">
	<title>Basic Messager - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.3/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.3/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="css/demo.css">
	<script type="text/javascript" src="jquery-easyui-1.3.3/jquery.min.js"></script>
	<script type="text/javascript" src="jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
	<h2>基本消息组件</h2>
	<div class="demo-info">
		<div class="demo-tip icon-tip"></div>
		<div>点击每个按钮查看不同的消息框.</div>
	</div>
	<div style="margin:10px 0;">
		<a href="#" class="easyui-linkbutton" onclick="show()">普通消息显示</a>
		<a href="#" class="easyui-linkbutton" onclick="slide()">滑动消息显示</a>
		<a href="#" class="easyui-linkbutton" onclick="fade()">淡出消息显示</a>
		<a href="#" class="easyui-linkbutton" onclick="progress()">进度条显示</a>
	</div>
	<script type="text/javascript">
		function show(){
			$.messager.show({
				title:'我的标题',
				msg:'消息4秒后自动关闭.',
				showType:'show'
			});
		}
		function slide(){
			$.messager.show({
				title:'我的标题',
				msg:'消息5秒后自动关闭.',
				timeout:5000,
				showType:'slide'
			});
		}
		function fade(){
			$.messager.show({
				title:'我的标题',
				msg:'消息不会自动关闭.',
				timeout:0,
				showType:'fade'
			});
		}
		function progress(){
			var win = $.messager.progress({
				title:'请稍等...',
				msg:'加载数据中...'
			});
			setTimeout(function(){
				$.messager.progress('close');
			},5000)
		}
	</script>
</body>
</html>

2. 提醒消息组件

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<meta charset="UTF-8">
	<title>Basic Messager - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.3/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.3/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="css/demo.css">
	<script type="text/javascript" src="jquery-easyui-1.3.3/jquery.min.js"></script>
	<script type="text/javascript" src="jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
	<h2>提醒消息组件</h2>
	<div class="demo-info">
		<div class="demo-tip icon-tip"></div>
		<div>点击每个按钮显示不同的提醒消息框.</div>
	</div>
	<div style="margin:10px 0;">
		<a href="#" class="easyui-linkbutton" onclick="alert1()">提醒消息</a>
		<a href="#" class="easyui-linkbutton" onclick="alert2()">错误消息</a>
		<a href="#" class="easyui-linkbutton" onclick="alert3()">信息消息</a>
		<a href="#" class="easyui-linkbutton" onclick="alert4()">问题消息</a>
		<a href="#" class="easyui-linkbutton" onclick="alert5()">警告消息</a>
	</div>
	<script>
		function alert1(){
			$.messager.alert('我的标题','这是一个消息!');
		}
		function alert2(){
			$.messager.alert('我的标题','这是一个错误消息!','error');
		}
		function alert3(){
			$.messager.alert('我的标题','这是一个信息消息!','info');
		}
		function alert4(){
			$.messager.alert('我的标题','这是一个问题消息!','question');
		}
		function alert5(){
			$.messager.alert('我的标题','这是一个警告消息!','warning');
		}
	</script>
</body>
</html>

3.交互式消息组件

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<meta charset="UTF-8">
		<title>Basic Messager - jQuery EasyUI Demo</title>
		<link rel="stylesheet" type="text/css"
			href="jquery-easyui-1.3.3/themes/default/easyui.css">
		<link rel="stylesheet" type="text/css"
			href="jquery-easyui-1.3.3/themes/icon.css">
		<link rel="stylesheet" type="text/css" href="css/demo.css">
		<script type="text/javascript" src="jquery-easyui-1.3.3/jquery.min.js"></script>
		<script type="text/javascript"
			src="jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
		<script type="text/javascript"
			src="jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
	</head>
	<body>
		<h2>
			交互式消息组件
		</h2>
		<div class="demo-info">
			<div class="demo-tip icon-tip"></div>
			<div>
				点击每个按钮显示不同的交互式消息框.
			</div>
		</div>
		<div style="margin: 10px 0;">
			<a href="#" class="easyui-linkbutton" onclick="confirm1();">确认消息框</a>
			<a href="#" class="easyui-linkbutton" onclick="prompt1()">提示消息框</a>
		</div>
		<script>
		function confirm1(){
			$.messager.confirm('我的标题', '确认吗?', function(r){
				if (r){
					alert('确认: '+r);
				}
			});
		}
		function prompt1(){
			$.messager.prompt('我的标题', '请输些东西', function(r){
				if (r){
					alert('你输入的是: '+r);
				}
			});
		}
	</script>
	</body>
</html>

四,消息框位置

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<meta charset="UTF-8">
		<title>Basic Messager - jQuery EasyUI Demo</title>
		<link rel="stylesheet" type="text/css"
			href="jquery-easyui-1.3.3/themes/default/easyui.css">
		<link rel="stylesheet" type="text/css"
			href="jquery-easyui-1.3.3/themes/icon.css">
		<link rel="stylesheet" type="text/css" href="css/demo.css">
		<script type="text/javascript" src="jquery-easyui-1.3.3/jquery.min.js"></script>
		<script type="text/javascript"
			src="jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
		<script type="text/javascript"
			src="jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
	</head>
<body>
	<h2>消息框位置</h2>
	<div class="demo-info">
		<div class="demo-tip icon-tip"></div>
		<div>点击下面按钮在不同位置显示消息框.</div>
	</div>
	<div style="margin:10px 0;">
		<p>
			<a href="javascript:void(0)" class="easyui-linkbutton" onclick="topLeft();">左上角</a>
			<a href="javascript:void(0)" class="easyui-linkbutton" onclick="topCenter()">顶部左右居中</a>
			<a href="javascript:void(0)" class="easyui-linkbutton" onclick="topRight()">右上角</a>
		</p>
		<p>
			<a href="javascript:void(0)" class="easyui-linkbutton" onclick="centerLeft()">左边上下居中</a>
			<a href="javascript:void(0)" class="easyui-linkbutton" onclick="center()">上下左右居中</a>
			<a href="javascript:void(0)" class="easyui-linkbutton" onclick="centerRight()">右边上下居中</a>
		</p>
		<p>
			<a href="javascript:void(0)" class="easyui-linkbutton" onclick="bottomLeft()">左下角</a>
			<a href="javascript:void(0)" class="easyui-linkbutton" onclick="bottomCenter()">底部左右居中</a>
			<a href="javascript:void(0)" class="easyui-linkbutton" onclick="bottomRight()">右下角</a>
		</p>
	</div>
	<script>
		function topLeft(){
			$.messager.show({
				title:'我的标题',
				msg:'左上角',
				showType:'show',
				style:{
					right:'',
					left:0,
					top:document.body.scrollTop+document.documentElement.scrollTop,
					bottom:''
				}
			});
		}
		function topCenter(){
			$.messager.show({
				title:'我的标题',
				msg:'顶部左右居中',
				showType:'slide',
				style:{
					right:'',
					top:document.body.scrollTop+document.documentElement.scrollTop,
					bottom:''
				}
			});
		}
		function topRight(){
			$.messager.show({
				title:'我的标题',
				msg:'右上角',
				showType:'show',
				style:{
					left:'',
					right:0,
					top:document.body.scrollTop+document.documentElement.scrollTop,
					bottom:''
				}
			});
		}
		function centerLeft(){
			$.messager.show({
				title:'我的标题',
				msg:'左边上下居中',
				showType:'fade',
				style:{
					left:0,
					right:'',
					bottom:''
				}
			});
		}
		function center(){
			$.messager.show({
				title:'我的标题',
				msg:'上下左右居中',
				showType:'fade',
				style:{
					right:'',
					bottom:''
				}
			});
		}
		function centerRight(){
			$.messager.show({
				title:'我的标题',
				msg:'右边上下居中',
				showType:'fade',
				style:{
					left:'',
					right:0,
					bottom:''
				}
			});
		}
		function bottomLeft(){
			$.messager.show({
				title:'我的标题',
				msg:'左下角',
				showType:'show',
				style:{
					left:0,
					right:'',
					top:'',
					bottom:-document.body.scrollTop-document.documentElement.scrollTop
				}
			});
		}
		function bottomCenter(){
			$.messager.show({
				title:'我的标题',
				msg:'底部左右居中',
				showType:'slide',
				style:{
					right:'',
					top:'',
					bottom:-document.body.scrollTop-document.documentElement.scrollTop
				}
			});
		}
		function bottomRight(){
			$.messager.show({
				title:'我的标题',
				msg:'右下角',
				showType:'show'
			});
		}
	</script>
</body>
</html>

 

© 著作权归作者所有

共有 人打赏支持
F
粉丝 4
博文 185
码字总数 96673
作品 0
成都
程序员
补充解决easyui messager越界问题

var ie = (function() {var undef, v = 3, div = document.createElement('div'), all = div.getElementsByTagName('i');while (div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![e......

Janrin ⋅ 2013/09/05 ⋅ 0

jQuery EasyUI 1.4.4 发布

jQuery EasyUI 1.4.4 发布了,下载地址: http://www.jeasyui.com/download/index.php ChangeLog(更新日志) Bug(错误) filebox: The 'clear' and 'reset' methods do not work properly ......

ejzhang ⋅ 2015/11/05 ⋅ 33

jquery easyui 常见问题解决

/清空指定表单中的内容,参数为目标form的id注:在使用Jquery EasyUI的弹出窗口录入新增内容时,每次打开必须清空上次输入的历史数据,此时通常采用的方法是对每个输入组件进行置空操作:$("#...

乌鸦FB ⋅ 2012/03/27 ⋅ 0

第五节 - easyUI的基本使用

1. 列表组件 datagrid 1.1 创建一个grid.html 1.2 引入easyUI的资源文件 1.3 绘制表格组件 Html: 效果: 1.1 编写后台程序,查询部门数据 在当前文件夹,新建一个dept.php 进行数据库连接测...

剽悍一小兔 ⋅ 05/07 ⋅ 0

.NET EasyUI datebox添加清空功能

  前言,前段时间的项目使用EasyUI框架搭建,使用了其自带的一系列组件。但对于datebox,其功能别的不多说,令人蛋疼的是它居然没有清空功能,这让在搜索区域中摆了日期条件的咋整啊,没办...

我是骗子 ⋅ 2016/05/19 ⋅ 0

使用ajaxfileupload.js 导入文件时 在IE8浏览器下 弹出一个窗口 有哪位大神遇到过。。

ajaxfileupload再IE8上的上传文件时弹出 ajaxfileupload.js 部分代码: 在执行到 return {abort: function () {}}; 时然后调用 回调函数后 拒绝访问的dom对象。 js代码为 function ajaxFileU...

osc皮皮 ⋅ 2015/07/17 ⋅ 4

jQueryEasyUI Messager基本使用

一、jQueryEasyUI下载地址 http://www.jeasyui.com/ 二、jQueryEasyUI Messager基本使用 1、$.messager.alert(title, msg, icon, fn) 1>、基本用法 代码: 效果图: 2>、icon使用 icon四种设......

狼行-狼行 ⋅ 2014/04/30 ⋅ 0

jquery easyui 弹出消息框

<html> <head> <!-- 导入easyui插件的js和css样式; --> <link rel="stylesheet" type="text/css" href="/EasyuiDemo/scripts/jquery-easyui-1.1.1/themes/default/easyui.css"> <link rel="s......

一念三千 ⋅ 2012/11/01 ⋅ 0

jQuery EasyUI 1.4.2 发布

jQuery EasyUI 1.4.2 发布了,下载地址: http://www.jeasyui.com/download/index.php ChangeLog(更新日志) Bug(错误) treegrid: The column will restore its size to original size af......

ejzhang ⋅ 2015/03/15 ⋅ 49

已经写好用户名重复验证了,但提示重复后仍然能提交表单

JS代码如下:

sweet2012love ⋅ 2013/10/17 ⋅ 11

没有更多内容

加载失败,请刷新页面

加载更多

下一页

vbs 取文件大小 字节

dim namedim fs, s'name = Inputbox("姓名")'msgbox(name)set fs = wscript.createobject("scripting.filesystemobject") 'fs为FSO实例if (fs.folderexists("c:\temp"))......

vga ⋅ 9分钟前 ⋅ 0

高并发之Nginx的限流

首先Nginx的版本号有要求,最低为1.11.5 如果低于这个版本,在Nginx的配置中 upstream web_app { server 到达Ip1:端口 max_conns=10; server 到达Ip2:端口 max_conns=10; } server { listen ...

算法之名 ⋅ 今天 ⋅ 0

Spring | IOC AOP 注解 简单使用

写在前面的话 很久没更新笔记了,有人会抱怨:小冯啊,你是不是在偷懒啊,没有学习了。老哥,真的冤枉:我觉得我自己很菜,还在努力学习呢,正在学习Vue.js做管理系统呢。即便这样,我还是不...

Wenyi_Feng ⋅ 今天 ⋅ 0

博客迁移到 https://www.jianshu.com/u/aa501451a235

博客迁移到 https://www.jianshu.com/u/aa501451a235 本博客不再更新

为为02 ⋅ 今天 ⋅ 0

win10怎么彻底关闭自动更新

win10自带的更新每天都很多,每一次下载都要占用大量网络,而且安装要等得时间也蛮久的。 工具/原料 Win10 方法/步骤 单击左下角开始菜单点击设置图标进入设置界面 在设置窗口中输入“服务”...

阿K1225 ⋅ 今天 ⋅ 0

Elasticsearch 6.3.0 SQL功能使用案例分享

The best elasticsearch highlevel java rest api-----bboss Elasticsearch 6.3.0 官方新推出的SQL检索插件非常不错,本文一个实际案例来介绍其使用方法。 1.代码中的sql检索 @Testpu...

bboss ⋅ 今天 ⋅ 0

informix数据库在linux中的安装以及用java/c/c++访问

一、安装前准备 安装JDK(略) 到IBM官网上下载informix软件:iif.12.10.FC9DE.linux-x86_64.tar放在某个大家都可以访问的目录比如:/mypkg,并解压到该目录下。 我也放到了百度云和天翼云上...

wangxuwei ⋅ 今天 ⋅ 0

PHP语言系统ZBLOG或许无法重现月光博客的闪耀历史[图]

最近在写博客,希望通过自己努力打造一个优秀的教育类主题博客,名动江湖,但是问题来了,现在写博客还有前途吗?面对强大的自媒体站点围剿,还有信心和可能型吗? 至于程序部分,我选择了P...

原创小博客 ⋅ 今天 ⋅ 0

IntelliJ IDEA 2018.1新特性

工欲善其事必先利其器,如果有一款IDE可以让你更高效地专注于开发以及源码阅读,为什么不试一试? 本文转载自:netty技术内幕 3月27日,jetbrains正式发布期待已久的IntelliJ IDEA 2018.1,再...

Romane ⋅ 今天 ⋅ 0

浅谈设计模式之工厂模式

工厂模式(Factory Pattern)是 Java 中最常用的设计模式之一。这种类型的设计模式属于创建型模式,它提供了一种创建对象的最佳方式。 在工厂模式中,我们在创建对象时不会对客户端暴露创建逻...

佛系程序猿灬 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部