jQuery Easy UI Tooptip(提示框)组件
我们都知道DOM节点的title属性。Tooptip组件就是比較强大的title，它能够自由的设置自己的样式、位置以及有自己相关的触发事件。
演示样例：
<!DOCTYPE html>
<html>
<head>
<title>jQuery Easy UI</title>
<meta charset="UTF-8" />
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />
<script>
$(function () {
$.fn.tooltip.defaults.position = 'top'; //重写属性的默认值 $('#box').tooltip({
//tooltip属性
content : '<strong>经纬恒润科技</strong>', //提示框内容,支持html格式
position : 'right', //消息框位置,默认bootom,还有left、right、top
trackMouse : true, //当为true时。同意提示框尾随鼠标移动，默觉得false
deltaX : 0, //水平方向位置调整參数
deltaY : 0, //垂直方向位置调整參数
showEvent : 'mouseenter', //当激活事件的时候显示提示框,默认mouseenter
hideEvent : 'mouseleave', //当激活事件的时候隐藏提示框,默认mouseleave
showDelay : 500, //延长多少ms显示提示框 默认200
hideDelay : 500, //延长多少ms隐藏提示框 默认200 //toolpit事件
onShow : function (e) {
//alert('显示的时候触发！');
console.log($('#box').tooltip('tip'));
console.log($('#box').tooltip('arrow'));
$('.tooltip-bottom').css('left', 500);
},
onHide : function (e) {
//alert('隐藏的时候触发！ ');
$('#box').tooltip('reposition');
},
onUpdate : function (cc) {
//alert('提示框内容更新的时候触发：' + content);
},
onPosition : function (left, top) {
console.log('left:' + left + ',top:' + top);
},
onDestroy : function (e) {
alert('提示框被销毁的时候触发！ ');
},
}); //tooptip方法：
$('#box').click(function () {
$(this).tooltip('update', '<font color="red" style="font-weight:bold;font-style:italic;" >恒润科技</font>'); //改变提示框内容
//$(this).tooltip('destroy'); //销毁提示框
}); console.log($('#box').tooltip('options').content);
//$('#box').tooltip('show'); //显示
//$('#box').tooltip('hide'); //隐藏
}); </script> </head>
<body style="margin:100px;"> <a href="###" title="这是title提示框">Hirain</a>
</br></br></br></br></br>
<a href="###" id="box">Hirain</a>
</br></br></br></br></br>
</body>
</html>
网上看到一个比較好的样例：
<!DOCTYPE html>
<html>
<head>
<title>jQuery Easy UI</title>
<meta charset="UTF-8" />
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />
<script>
$(function () {
var data = [
{A:'name1',B:150,C:135,D:285,E:97},
{A:'name2',B:59,C:96,D:155,E:167},
{A:'name3',B:83,C:86,D:169,E:53},
{A:'name4',B:66,C:61,D:127,E:158}
];
$('#dg').datagrid({
columns:[[
{field:'A',title:'A',width:100,formatter:formatA},
{field:'B',title:'B',width:100},
{field:'C',title:'C',width:100},
{field:'D',title:'D',width:100}
]],
data: data,
onLoadSuccess:function(){
createTooltip();
}
}); function formatA(value,row,index){
return '<span data-p1='+index+' class="easyui-tooltip">' + value + '</span>';
}
function createTooltip(){
$('#dg').datagrid('getPanel').find('.easyui-tooltip').each(function(){
var index = parseInt($(this).attr('data-p1'));
$(this).tooltip({
content: $('<div></div>'),
onUpdate: function(cc){
var row = $('#dg').datagrid('getRows')[index];
var content = '<div>content</div><ul>';
content += '<li>name: '+row.A+'</li>';
content += '<li>B: '+row.B+'</li>';
content += '<li>C: '+row.C+'</li>';
content += '<li>D: '+row.D+'</li>';
content += '</ul>';
cc.panel({
width:200,
content:content
});
},
position:'right'
});
});
} })
</script>
</head>
<body>
<table id="dg" style="width:400px;height:200px"></table>
</body>
</html>
运行效果：
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2FvaGFpY2hlbmc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
jQuery Easy UI Tooptip(提示框)组件的更多相关文章
- 第一百九十六节，jQuery EasyUI，Tooltip(提示框)组件
jQuery EasyUI,Tooltip(提示框)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Tooltip(提示框)组件的使用方法, ...
- jQuery Easy UI Resizable(调整大小)组件
Resizable(调整大小)组件,easyui基础组件之中的一个.调整大小就是能够对元素能够拖着调整大小,这个组件不依赖于其它组件,使用比較简单,相关的属性.事件都 在样例中介绍了. 演示样例: & ...
- jQuery Easy UI Droppable(放置)组件
Droppable(放置)组件也是一个基本组件,使用方法较简单,语法都在样例里面凝视了: 演示样例: <!DOCTYPE html> <html> <head> & ...
- 7个jquery easy ui 基本组件图解
以下给出7个jquery easy ui 基本组件: 1 基本面板 <!DOCTYPE html> <html> <head> <meta charset=& ...
- jQuery Easy UI Draggable(拖动)组件
上文已经提到过了 jQuery EasyUI插件引用一般我们经常使用的有两种方式(排除easyload载入方式),所以本篇要总结的Draggable组件相同有两种方式载入: (1).使用class载入 ...
- jQuery Easy UI ProgressBar（进度条）组件
ProgressBar(进度条)组件,这个还是挺好玩的.我们在自己做点什么的时候常常能用到,比方上传下载文件.导入导出文档啊.加载网页等等. 应用场景非常多,使用起来还非常easy. 演示样例: &l ...
- jQuery Easy UI Panel(面板)组件
panel(面板)组件,跟前面的组件使用方法差点儿都差点儿相同,也是从设置一些面板属性.操作面板触发的事件.我们可针对面板对象的操作方法这三个点去学习. 后面有一些组件要依赖于这个组件. 另一点跟前面 ...
- jQuery Easy UI 开发笔记
1.jQuery Easy UI主要的运行原理是通过核心的代码调用插件来实现UI效果的 2.jQuery Easy UI插件与插件之间的关系是: 一.独立式插件: 独立式插件是指:不与其他的插件具有相 ...
- JQuery Easy Ui （Tree树）详解（转）
第一讲:JQuery Easy Ui到底是什么呢? 首先咱们知道JQuery是对Java Script的封装,是一个js库,主要提供的功能是选择器,属性修改和事件绑定等等.. JQuery ui是在j ...
随机推荐
- Log stash学习笔记（一）
Logstash是一款开源的数据收集引擎,具备实时管道处理能力.简单来说,logstash作为数据源与数据存储分析工具之间的桥梁,结合 ElasticSearch以及Kibana,能够极大方便数据的处 ...
- Tar打包、压缩与解压缩
tar在linux上是常用的打包.压缩.加压缩工具,他的参数很多,折里仅仅列举常用的压缩与解压缩参数 参数: -c :create 建立压缩档案的参数: -x : 解压缩压缩档案的参数: -z : 是 ...
- Sklearn实现逻辑回归
方法与参数 LogisticRegression类的各项参数的含义 class sklearn.linear_model.LogisticRegression(penalty='l2', dual=F ...
- [转]使用PHPExcel判别和格式化Excel中的日期格式
From : http://renzhen.iteye.com/blog/799391 最近,在做一个导入功能,在系统中使用PHPExcel类库,读取上传的Excel文件,然后进行字段映射,最后将Ex ...
- REST构架风格介绍之一：状态表述转移
转载自:Todd Wei http://www.cnblogs.com/weidagang2046/archive/2009/05/08/1452322.html REST(Representat ...
- Kyoto Cabinet 使用及原理
Kyoto Cabinet 基本规格书 如果你知道 Tokyo Cabinet ,那么就应该知道 Kyoto Cabinet,因为他们都是同一个作者(平林幹雄)开发出来的 Key-Value 数据库. ...
- CSS-返回顶部代码
现在的网站基本上都是长页面,多的有四五屏,少的话也有两三屏,页面太长有的时候为了提升用户体验,会在页面右边出现一个回到顶部的按钮,这样能快速回到顶部,以免在滑动页面出现视觉屏幕,回到顶部一般有四种方式 ...
- Hadoop基本介绍
1.Hadoop的整体框架 Hadoop由HDFS.MapReduce.HBase.Hive和ZooKeeper等成员组成,其中最基础最重要元素为底层用于存储集群中所有存储节点文件的文件系统HDFS( ...
- OpenFeign封装为springboot starter
OpenFeign是什么 随着业务的增多,我们的单体应用越来越复杂,单机已经难以满足性能的需求,这时候出现了分布式.分布式通讯除了RPC, REST HTTP请求是最简单的一种方式.OpenFeign ...
- Double-Array Trie 原理解析
http://ansjsun.iteye.com/blog/702255 Trie树是搜索树的一种,它在本质上是一个确定的有限状态自动机,每个结点代表一个状态,根据输入变量的不同,进行状态转 ...