23.EASYUI tooltip组件
博客专区 > Favour 的博客 > 博客详情
23.EASYUI tooltip组件
Favour 发表于1年前
23.EASYUI tooltip组件
  • 发表于 1年前
  • 阅读 62
  • 收藏 0
  • 点赞 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 Tooltip - 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;"></div>
	<p>能够用每个元素的标题属性作为提示信息.
	<a href="#" title="这是提示信息." class="easyui-tooltip">到我这来</a> 显示提示信息.
	</p>
</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 Tooltip - 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;"></div>
	<span>选择位置:</span>
	<select onchange="changePosition(this.value)">
		<option value="bottom">下</option>
		<option value="top">上</option>
		<option value="left">左</option>
		<option value="right">右</option>
	</select>
	<div style="padding:10px 200px">
	<div id="pp" class="easyui-panel easyui-tooltip" title="这是提示信息." style="width:100px;padding:5px">到我这来</div>
	</div>
	<script type="text/javascript">
		function changePosition(pos){
			$('#pp').tooltip({
				position: pos
			});
		}
	</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 Tooltip - 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;"></div>
	<div id="pg" data-options="total:114" style="border:1px solid #ddd;"></div>
	
	<script>
		$(function(){
			$('#pg').pagination().find('a.l-btn').tooltip({
				content: function(){
					var cc = $(this).find('span.l-btn-empty').attr('class').split(' ');
					var icon = cc[1].split('-')[1];
					return icon + ' page';
				}
			});
		});
	</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 Tooltip - 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;"></div>
	<div style="padding:10px 200px">
		<div id="pp1" class="easyui-panel" style="width:100px;padding:5px">搞我啊!</div>
	</div>
	<div style="padding:10px 200px">
		<div id="pp2" class="easyui-panel" style="width:100px;padding:5px">搞我呀!</div>
	</div>
	<script>
		$(function(){
			$('#pp1').tooltip({
				position: 'right',
				content: '<span style="color:#fff">这是一种风格的提示信息.</span>',
				onShow: function(){
					$(this).tooltip('tip').css({
						backgroundColor: '#666',
						borderColor: '#666'
					});
				}
			});
			$('#pp2').tooltip({
				position: 'bottom',
				content: '<div style="padding:5px;background:#eee;color:#000">这又是一种风格的提示信息.</div>',
				onShow: function(){
					$(this).tooltip('tip').css({
						backgroundColor: '#fff000',
						borderColor: '#ff0000',
						boxShadow: '1px 1px 3px #292929'
					});
				},
				onPosition: function(){
					$(this).tooltip('tip').css('left', $(this).offset().left);
					$(this).tooltip('arrow').css('left', 20);
				}
			});
		});
	</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 Tooltip - 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;"></div>
	<div style="padding:10px 200px">
		<p><a id="dd" href="javascript:void(0)" class="easyui-tooltip" data-options="
					hideEvent: 'none',
					content: function(){
						return $('#toolbar');
					},
					onShow: function(){
						var t = $(this);
						t.tooltip('tip').focus().unbind().bind('blur',function(){
							t.tooltip('hide');
						});
					}
				">到我这来</a> 搞出一个工具条.</p>
	</div>
	<div style="display:none">
		<div id="toolbar">
			<a href="#" class="easyui-linkbutton easyui-tooltip" title="添加" data-options="iconCls:'icon-add',plain:true"></a>
			<a href="#" class="easyui-linkbutton easyui-tooltip" title="剪切" data-options="iconCls:'icon-cut',plain:true"></a>
			<a href="#" class="easyui-linkbutton easyui-tooltip" title="删除" data-options="iconCls:'icon-remove',plain:true"></a>
			<a href="#" class="easyui-linkbutton easyui-tooltip" title="撤销" data-options="iconCls:'icon-undo',plain:true"></a>
			<a href="#" class="easyui-linkbutton easyui-tooltip" title="恢复" data-options="iconCls:'icon-redo',plain:true"></a>
		</div>
	</div>
</body>
</html>

六,Ajax提示信息

<%@ 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 Tooltip - 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>Ajax提示信息</h2>
	<div class="demo-info">
		<div class="demo-tip icon-tip"></div>
		<div>提示信息可以通过AJAX加载.</div>
	</div>
	<div style="margin:10px 0;"></div>
	<a href="#" class="easyui-tooltip" data-options="
			content: $('<div></div>'),
			onShow: function(){
				$(this).tooltip('arrow').css('left', 20);
				$(this).tooltip('tip').css('left', $(this).offset().left);
			},
			onUpdate: function(cc){
				cc.panel({
					width: 500,
					height: 'auto',
					border: false,
					href: '../tooltip/_content.html'
				});
			}
		">到我这来</a> 显示AJAX加载的提示信息.
</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 Tooltip - 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;"></div>
	<div style="padding:10px 200px">
		<p><a id="dd" href="javascript:void(0)">点这里</a> 来显示一个提示信息对话框.
	</div>
	<script>
		$(function(){
			$('#dd').tooltip({
				content: $('<div></div>'),
				showEvent: 'click',
				onUpdate: function(content){
					content.panel({
						width: 200,
						border: false,
						title: '登录',
						href: '../tooltip/_dialog.html'
					});
				},
				onShow: function(){
					var t = $(this);
					t.tooltip('tip').unbind().bind('mouseenter', function(){
						t.tooltip('show');
					}).bind('mouseleave', function(){
						t.tooltip('hide');
					});
				}
			});
		});
	</script>
</body>
</html>

 

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