文档章节

23.EASYUI tooltip组件

F
 Favour
发布于 2016/08/16 21:10
字数 1566
阅读 74
收藏 0
点赞 0
评论 0

一,基本提示信息组件

<%@ 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>

 

© 著作权归作者所有

共有 人打赏支持
F
粉丝 4
博文 185
码字总数 96673
作品 0
成都
程序员
20 个很有用的 jQuery 工具提示插件

工具提示 (Tooltip) 是当你悬停在该元素用于显示关于一个元素附加信息的页面组件。当你想要显示额外的信息而不改变你的设计元素时是非常方便的。当你把鼠标光标放在一个元素,可以是链接或者按...

oschina ⋅ 2012/12/29 ⋅ 6

在Vue项目中使用Echarts(二): Echarts中的常用组件

下面,以使用在Vue项目中使用Echarts(一)的数据, 初始化一个折现图的组件作为演示. 初始化效果如下图所示 初始化折线图 一. 常用组件 —— title 标题组件,包含主标题和副标题.更多配置项参...

Lee_tanghui ⋅ 2017/10/06 ⋅ 0

ExtJS(3)- 自定义组件(星级评分)

今天介绍ExtJS的组件开发,这里以星级评分为示例,首先来看看效果图: 然后是功能操作:鼠标移动到五个星星上面时,会有tooltip显示当前的分值。如图:鼠标悬停在第四颗星星时前四颗星星显示...

雪飘七月 ⋅ 2014/10/16 ⋅ 0

ECharts 3.2.2 发布,新增多 Y 轴的支持

ECharts 3.2.2 发布了,ECharts开源来自百度商业前端数据可视化团队,基于html5Canvas,是一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。创新的拖拽重计算...

pissang ⋅ 2016/07/13 ⋅ 10

Bootstrap 常用组件封装--BootstrapQ

其实bootstrap已经很好了,唯一的软肋就是js方面有些薄弱,对比easyui就知道了, 可以很明显的知道bootstrap是前端人员创建的,而easyui是偏后端人员创建的。 BootstrapQ 主要特性: 1.Boot...

uikoo9 ⋅ 2015/01/06 ⋅ 5

Element 1.2.5 发布,饿了么 Vue 2.0 组件库

Element 是由饿了么公司前端团队开源,是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助你的网站快速成型。 Element 1.2.5 版本更新内容: 新增 Sl...

王练 ⋅ 2017/03/20 ⋅ 11

扩展Bootstrap Tooltip插件使其可交互

最近在公司某项目开发中遇见一特殊需求,请笔者帮助,因此有了本文的插件。在前端开发中tooltip是一个极其常用的插件,它能更好向使用者展示更多的文档等帮助信息。它们通常都是一些静态文本...

zting科技 ⋅ 2017/01/12 ⋅ 0

Visifire for Windows 8 v2.1.1.0 发布

Visifire for Windows 8 v2.1.1.0 发布了,该版本修复了如下几个 bug : Line Chart threw exception when LightWeight property was set to True and MarkerType set to Square. Chart thr......

oschina ⋅ 2013/04/18 ⋅ 0

ECharts 3.3.2 发布,新增自定义图形功能

感恩节发布的第 50 个 ECharts 版本 3.3.2,新增超级强大的自定义图形组件,致以我们对 ECharts 用户最有诚意的感恩之情! (❁´◡`❁)✲ 在新增的自定义图形组件的帮助下,添加图片、文字、...

pissang ⋅ 2016/11/24 ⋅ 12

Flex 自定义组件外观

简介: Flex 是现今最受欢迎的 RIA 开发技术之一,它凭借其优秀的用户体验获得许多用户的青睐,因此也吸引了众多的程序员投入 Flex 学习的洪流之中。Flex 之所以如此受欢迎,一大部分原因是因...

红薯 ⋅ 2010/08/22 ⋅ 2

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Java集合类总结笔记

一、集合类的层次关系 主要容器集合类的特点: ArrayList 一种可以动态增长和缩减的索引序列 LinkedList 一种可以在任何位置进行高效地插入和删除的有序序列 ArrayDeque 一种用循环数组实现的...

edwardGe ⋅ 3分钟前 ⋅ 0

spring RMI远程调用

RMI https://www.cnblogs.com/wdh1995/p/6792407.html

BobwithB ⋅ 8分钟前 ⋅ 0

Jenkins实践2 之基本配置

1 插件管理 系统管理->插件管理 在可选插件中可以自主安装插件 2 管理用户 系统管理->管理用户->新建用户 3 安全配置 系统管理->全局安全配置 授权策略 选择安全矩阵 然后添加现有的用户,赋...

晨猫 ⋅ 8分钟前 ⋅ 0

c++智能指针

1、是一种泛型类,针对指针类型的泛型类,会保存指针 2、重载了符号 *和-> 对智能指针使用这两个符号,相当于对保存的泛型使用这两个符号 3、当智能指针引用计数为0时,会去释放指针指向的资...

国仔饼 ⋅ 10分钟前 ⋅ 0

Spring Boot错误处理机制

1)、SpringBoot默认的错误处理机制 默认效果: 1)、浏览器,返回一个默认的错误页面 浏览器发送请求的请求头: 2)、如果是其他客户端,默认响应一个json数据 原理: 可以参照ErrorMvcAut...

小致dad ⋅ 11分钟前 ⋅ 0

ftp连接不上的终极办法 SFTP

假如FTP由于各种原因就是连不上,那么用SFTP协议吧,使用登录服务器的账号密码。

sskill ⋅ 15分钟前 ⋅ 0

Unity 围绕旋转角度限制(Transform.RotateAround)

在 Unity 中可以利用 Transform.RotateAround 围绕指定物体进行旋转,但某些情况下可能需要对旋转角度进行控制。我是先计算出预设角度大小,然后判断是否在限定角度范围内是则进行旋转。 相关...

大轩 ⋅ 16分钟前 ⋅ 0

阿里沙箱环境支付宝测试demo

阿里支付宝支付和微信支付,包括:阿里沙箱环境支付宝测试demo,支付宝支付整合到spring+springmvc+mybatis环境和微信整合到如上环境,功能非常齐全,只需要修改对应的配置文件即可,帮助文档...

码代码的小司机 ⋅ 19分钟前 ⋅ 0

JDK1.6和JDK1.7中,Collections.sort的区别,

背景 最近,项目正在集成测试阶段,项目在服务器上运行了一段时间,点击表格的列进行排序的时候,有的列排序正常,有的列在排序的时候,在后台会抛出如下异常,查询到不到数据,而且在另外一...

tsmyk0715 ⋅ 36分钟前 ⋅ 0

C++ 中命名空间的 5 个常见用法

相信小伙伴们对C++已经非常熟悉,但是对命名空间经常使用到的地方还不是很明白,这篇文章就针对命名空间这一块做了一个叙述。 命名空间在1995年被引入到 c++ 标准中,通常是这样定义的: 命名...

柳猫 ⋅ 40分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部