easyui for jquery之tooltip
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax Tooltip - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Ajax Tooltip</h2>
<p>The tooltip content can be loaded via AJAX.</p>
<div style="margin:20px 0;"></div> <a href="#" data-tip="This is the tooltip message1." class="easyui-tooltip" data-options="
content: function(){
//return $('<div style=\'padding:5px;background:#eee;color:#000\'>This is the tooltip message.</div>');
//return $('#toolbar');
//return $(this).data('tip').;
return $('<div style=\'padding:5px;background:#eee;color:#000\'></div>').html($(this).data('tip'));
},
showEvent: 'mouseenter',
position: 'bottom',
onShow: function(){
var t = $(this);
t.tooltip('tip').unbind().bind('mouseenter', function(){
t.tooltip('show');
}).bind('mouseleave', function(){
t.tooltip('hide');
});
}
">Hove me</a> to display tooltip content via AJAX. <div style="display:none">
<div id="toolbar" style="padding:5px;background:#eee;color:#000">This is the tooltip message.</div>
</div>
</body>
</html>
清洁的代码整理如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tooltip - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
<script type="text/javascript">
//tip样式、显示\隐藏触发设置
function show(){
var t = $(this);
//tip样式设置小驼峰规则，marginLeft等同margin-left
t.tooltip('tip').css({
backgroundColor: '#fff000',
borderColor: '#ff0000',
boxShadow: '1px 1px 3px #292929',
marginLeft: '20px'
});
//tip显示\隐藏触发设置
t.tooltip('tip').unbind().bind('mouseenter', function(){
t.tooltip('show');
}).bind('mouseleave', function(){
t.tooltip('hide');
});
} //tip内容填充
function content(){
return $('<div></div>').append($(this).data('tip'));
}
</script>
<style type="text/css">
a {
line-height:80px;
} #container{
margin-left: 10px;
}
</style>
</head>
<body>
<div id="container">
<!--data-tip设置tip显示内容设置-->
<!--data-options中position: 'bottom'设置tip显示相对位置底部[bottom|top|left|right]-->
<!--data-options中showEvent: 'mouseenter'设置tip显示出发事件[mouseenter|click|none]-->
<a href="#" data-tip="This is the tooltip message." class="easyui-tooltip" data-options="content: content, showEvent: 'mouseenter', position: 'bottom', onShow: show">Hove me</a> to display tooltip content.<br />
<a href="#" data-tip="This is the tooltip message." class="easyui-tooltip" data-options="content: content, showEvent: 'mouseenter', position: 'bottom', onShow: show">Hove me</a> to display tooltip content.<br />
<a href="#" data-tip="This is the tooltip message." class="easyui-tooltip" data-options="content: content, showEvent: 'mouseenter', position: 'bottom', onShow: show">Hove me</a> to display tooltip content.<br />
<a href="#" data-tip="This is the tooltip message." class="easyui-tooltip" data-options="content: content, showEvent: 'mouseenter', position: 'bottom', onShow: show">Hove me</a> to display tooltip content.<br />
<a href="#" data-tip="This is the tooltip message." class="easyui-tooltip" data-options="content: content, showEvent: 'mouseenter', position: 'bottom', onShow: show">Hove me</a> to display tooltip content.<br />
</div>
</body>
</html>
再次优化后
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tooltip - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
<script type="text/javascript" src="../../tooltip.common.js"></script>
<style type="text/css">
a {
line-height:80px;
} #container {
margin-left: 10px;
}
</style>
</head>
<body>
<div id="container">
<!--data-tip设置tip显示内容-->
<!--data-options中position: 'bottom'设置tip显示相对位置底部[bottom|top|left|right]-->
<!--data-options中showEvent: 'mouseenter'设置tip显示出发事件[mouseenter|click|none]-->
<a href="#" data-tipcss=" backgroundColor: '#fff000',borderColor: '#ff0000',boxShadow: '1px 1px 3px #292929',marginLeft: '20px',width: '300px' " data-tipcontent="This is the tooltip message.This is the tooltip message." class="easyui-tooltip" data-options="content: tooltipcontent, showEvent: 'mouseenter', position: 'bottom', onShow: tooltipshow">Hove me</a> to display tooltip content.<br />
<a href="#" data-tipcss=" backgroundColor: '#fff000',borderColor: '#ff0000',boxShadow: '1px 1px 3px #292929',marginLeft: '20px',width: '300px' " data-tipcontent="This is the tooltip message." class="easyui-tooltip" data-options="content: tooltipcontent, showEvent: 'mouseenter', position: 'bottom', onShow: tooltipshow">Hove me</a> to display tooltip content.<br />
<a href="#" data-tipcss=" backgroundColor: '#fff000',borderColor: '#ff0000',boxShadow: '1px 1px 3px #292929',marginLeft: '20px',width: '300px' " data-tipcontent="This is the tooltip message." class="easyui-tooltip" data-options="content: tooltipcontent, showEvent: 'mouseenter', position: 'bottom', onShow: tooltipshow">Hove me</a> to display tooltip content.<br />
<a href="#" data-tipcss=" backgroundColor: '#fff000',borderColor: '#ff0000',boxShadow: '1px 1px 3px #292929',marginLeft: '20px',width: '300px' " data-tipcontent="This is the tooltip message." class="easyui-tooltip" data-options="content: tooltipcontent, showEvent: 'mouseenter', position: 'bottom', onShow: tooltipshow">Hove me</a> to display tooltip content.<br />
<a href="#" data-tipcss=" backgroundColor: '#fff000',borderColor: '#ff0000',boxShadow: '1px 1px 3px #292929',marginLeft: '20px',width: '300px' " data-tipcontent="This is the tooltip message." class="easyui-tooltip" data-options="content: tooltipcontent, showEvent: 'mouseenter', position: 'bottom', onShow: tooltipshow">Hove me</a> to display tooltip content.<br />
</div>
</body>
</html>
tooltip.common.js
//tip样式、显示\隐藏触发设置
function tooltipshow(){
var t = $(this);
//tip样式设置小驼峰规则，marginLeft等同margin-left
t.tooltip('tip').css(eval("({" + $(this).data('tipcss') + "})"));
//tip显示\隐藏触发设置
t.tooltip('tip').unbind().bind('mouseenter', function(){
t.tooltip('show');
}).bind('mouseleave', function(){
t.tooltip('hide');
});
} //tip内容填充
function tooltipcontent(){
return $('<div></div>').append($(this).data('tipcontent'));
}
easyui for jquery之tooltip的更多相关文章
- JQuery easyui （4）Tooltip （提示组件） 组件
ps:先来一波美图 Tooltip的加载方式: 1,class加载 <a href="#" title="tooltip">hello word&l ...
- JS框架_(JQuery.js)Tooltip弹出式按钮插件
百度云盘 传送门 密码:7eh5 弹出式按钮效果 <!DOCTYPE html> <html > <head> <meta charset="UTF ...
- easyui中jquery重复引用问题（tab内存泄露问题）
今天认真测试了下easyui的一些兼容性问题,发现在ie9 ie10 首次加载的时候,会出现如下bug.如图所示: 认真看了下,我估计是脚本重复引用的问题,我用的iframe框架的模式.登陆系统后,桌 ...
- Easyui 修改jquery validatebox为英文校验提示为中文提示
修改jquery validatebox为英文校验提示为中文提示 by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3 问题描述: 如图,想把校验提示由英文改成中文 ...
- 解决 Jquery UI Tooltip 用在Select 的BUG
今天遇到一个奇葩问题, 在chrome下一切正常的 页面,在IE 下Select无法选中! 是的 ,就是无法选中!!! 效果就是这样的.http://jsfiddle.net/slolife/dp4 ...
- 基于jQuery的Tooltip
近来,要开发一个关务管理系统,为了增加系统美观度,自己开发了一个基于jQuery框的的小插件,与大家分享一下,希望大家能给我提出宝贵修改意见. 下面开发说明使用方法和内容: 一.引用jQuery框架, ...
- Jquery Easyui与Jquery Bootstrap的比较
1.easyui是js框架 :bootstrap 是css框架 ,bootstrap = 样式库 + 一堆jQuery插件,顺便解释一句,如果你只需要bootstrap的样式,你完全不用引入jQuer ...
- Jquery Easyui与Jquery Bootstrap(Metronic Bootstrap)的简单比较
1,通常来看WEB前端用 bootstrap 比较好,后台用EASYUI比较好.Easyui适合工厂企业的管理系统如ERP,CRM之类的,Bootstrap适用于多屏跨设备浏览. 简言之,一个适合上班 ...
- easyUI tree jQuery
Tree 数据转换 所有节点都包含以下属性: id:节点id,这个很重要到加载远程服务器数据 which is important to load remote data text: 显示的节点文本 ...
随机推荐
- 阶段1 语言基础+高级_1-3-Java语言高级_04-集合_02 泛型_4_定义和使用含有泛型的方法
泛型方法 泛型也可以用在方法上 测试 调用的时候,可以传递多种数据类型 . 泛型的静态方法
- gradle implementation runtimeOnly 和api 区别
implementation 不对外开发,只是本项目依赖. runtimeOnly 运行时才依赖 api 可以传递依赖,别的项目也可以依赖api的jar包.
- Linq查询语法(1)
转:http://www.cnblogs.com/ahao214/archive/2013/01/22/2871044.html LINQ的基本格式如下所示:var <变量> = from ...
- JavaSE编码试题强化练习7
1.编写应用程序,创建类的对象,分别设置圆的半径.圆柱体的高,计算并分别显示圆半径.圆面积.圆周长,圆柱体的体积. /** * 圆类 */ public class Circle { /** * 类属 ...
- [Python3 填坑] 005 如何“响铃”
目录 1. print( 坑的信息 ) 2. 开始填坑 2.1 问题的由来 2.2 问题的解决 1. print( 坑的信息 ) 挖坑时间:2019/01/08 明细 坑的编码 内容 Py004-2 ...
- linux下的dd命令使用详解
一.dd命令的解释 dd:用指定大小的块拷贝一个文件,并在拷贝的同时进行指定的转换. 注意:指定数字的地方若以下列字符结尾,则乘以相应的数字:b=512:c=1:k=1024:w=2 参数注释: 1. ...
- JavaBean简介和要求
JavaBean是一种Java语言写成的可重用组件. 所谓javaBean,是指符合如下标准的Java类: 类是公共的 有一个无参的公共的构造器 有属性,且有对应的get.set方法 用户可以使用Ja ...
- HDU-2189来生一起走
题目: 今天,又来了n位志愿者,指挥部需要将他们分为若干个小组,小组的数量不限,但是要求每个小组的人数必须为素数,请问我们有几种分组的方法呢? 特别说明: 1.可以只有一个组: 2.分组的方法只和人数 ...
- 在react中用装饰器来装饰connect
假设我们在react中有如下header组件: import React, { PureComponent } from 'react'; import { connect } from 'react ...
- C#设计模式：命令模式（Command Pattern）
一,什么是命令模式(Command Pattern)? 命令模式:将请求封装成命令对象,请求的具体执行由命令接收者执行: 二,如下代码 using System; using System.Colle ...