easyUI tootip组件使用
easyUI tootip组件使用：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
<script src="easyui/jquery.min.js"></script>
<script src="easyui/jquery.easyui.min.js"></script>
<script src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script src="js/test006.js"></script>
<link rel="stylesheet" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" href="easyui/themes/icon.css">
</head> <body style="margin:20px">
<a class="easyui-tooltip" herf="#" title="this is title">hover on</a>
<a href="#" id="box">hover 2 on</a>
<div id="pox" style="border: 1px solid #ccc;width:200px;height:200px">div hover 2 on</div>
</body> </html>
$(function(argument) {
var obj = {
content: '<strong>this is content</strong>', //tooltip显示的内容，支持html语法
// position:'top',//toptip显示的位置；
trackMouse: true, //追踪鼠标位置,如果position是top，跟踪鼠标的时候可能会使位置变成bottom；
// deltaX: 100, //与鼠标x轴方向的偏移
// deltaY: 100,
// showDelay: 1500, //显示的延迟时间
// hideDelay: 1500,
// showEvent:'click',//显示tooltip的事件
// hideEvent:'dblclick',//隐藏tooltip的事件,dblclick-双击隐藏
onShow: function(e) {
console.log('onShow');
console.log($(this).tooltip('options')); //获得options对象
console.log($(this).tooltip('tip')); //获得tip对象
console.log($(this).tooltip('arrow')); //获得arrow对象
$(this).tooltip('hide'); //隐藏
$(this).tooltip('show'); //显示
$(this).tooltip('update', 'this is update content'); //更新content内容；
$(this).tooltip('reposition');
// $(this).tooltip('destroy'); //销毁tooltip对象
},
onHide: function(e) {
console.log('onHide');
},
onUpdate: function(e) {
console.log('onUpdate');
},
onPosition: function(left, top) {
console.log('onPosition');
console.log('left:' + left + ";top:" + top);
},
onDestroy: function(e) {
console.log('onDestroy');
}
};
$('#box').tooltip(obj);
$('#pox').tooltip(obj);
});
easyUI tootip组件使用的更多相关文章
- Easyui主要组件用法
Easyui主要组件用法说明: 1. combogrid用法 说明:combogrid可提供翻页列表的数据选择并可进行数据的过滤查询(查询的传人参数为q,可在控制器中获取这个参数传过来的值,下面的示 ...
- Easyui部分组件讲解
Easyui部分组件讲解 目 录 1.... Accordion(可折叠标签)... 2 1.1 实例... 2 1.2 参数... 3 2.... DateBo ...
- 对easyui datagrid组件的一个小改进
#对easyui datagrid组件的一个小改进 ##问题 在实际项目中使用datagrid时,受版面限制,有时候表格不能太大,这时候表格里面的内容就不能完全显示,用户需要经常拖动调整列宽才能看完整 ...
- easyUI panel组件
easyUI panel组件: 属性的使用: <!DOCTYPE html> <html lang="en"> <head> <meta ...
- easyUI progressbar组件
easyUI progressbar组件: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- easyUI linkbutton组件
easyUI linkbutton组件: <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
- easyUI resizable组件使用
easyUI resizable组件使用: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- easyUI droppable组件使用
easyUI droppable组件使用: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- easyUI draggable组件使用
easyUI draggable组件使用: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
随机推荐
- JS和CSS加载（渲染）机制不同
一.结论 CSS可以在页面加载完成后随时渲染.举个例子:通过js给某个元素加一个id或者css,只要这个id或者css有对应的样式,此元素的样式就会自动生效. JS不可以在页面加载完成后生效.最明显的 ...
- PAT (Advanced Level) 1022. Digital Library (30)
简单模拟题. 写的时候注意一些小优化,小心TLE. #include<iostream> #include<cstring> #include<cmath> #in ...
- JS监听input框的回车事件、属性值改变事件
一.介绍 在程序猿门的工作中,经常会遇见一些表单数据的提交,对于有表单的东西而言,input输入框是非常常见的,所以对于一些input的基本事件,我们需要去掌握 二.input的监听enter事件 比 ...
- Mysql主从复制（基于Log）
Master(主)操作 实验机:两台 IP:192.168.1.5 192.168.1.10 操作系统:Linux RedHat 6.5 Mysql版本:5.6.31 # vim /etc ...
- PHP 反射应用之一（插件框架）
http://www.zui88.com/blog/view-205.html 反射,非常有用的一套东西,用来在运行时,分析代码,分析类的属性,方法,参数,实例化类,调用类的方法等等,从而实现框架,实 ...
- Arch Linux 安装过程
在VM中装了Arch,由于过程较为曲折,现写博客一篇聊以慰藉. 1.新建虚拟机,将下载好的archlinux-2016.03.01-dual.iso挂到虚拟机设置的CD/DVD 2.进入Arch安装界 ...
- fedora安装各种应用软件
1 安装视频播放器 sudo yum install mplayer mplayer-gui 可以从命令行 和 gnome 中启动 2 音量调节 (1)使用 alsamixer alsamixer是一 ...
- OPENCV基本滤波算法
图像滤波的主要目的是为了在保留图像细节的情况下尽量的对图像的噪声进行消除,从而是后来的图像处理变得更加的方便. 图像的滤波效果要满足两个条件:1.不能损坏图像的轮廓和边缘这些重要的特征信息.2.图像的 ...
- HUST 1372 marshmallow
很简单的博弈题.....算几组能得到规律了. 某个状态先手要赢 等价于 之前有一种状态是后手赢,先手可以保证让现在这个状态到达那个状态 #include<cstdio> #include& ...
- 推荐几个web中常用js图表插件
作者:zccst 我自己用过fusioncharts和highchart. jQuery插件有: TufteGraph flot js charts jqchart elycharts jquery ...