2.EASYUI Messager 组件
博客专区 > Favour 的博客 > 博客详情
2.EASYUI Messager 组件
Favour 发表于1年前
2.EASYUI Messager 组件
  • 发表于 1年前
  • 阅读 32
  • 收藏 2
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

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>

 

共有 人打赏支持
粉丝 5
博文 182
码字总数 96186
×
Favour
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: