datagrid鼠标悬浮提示
/**
* 扩展两个方法
*/
$.extend($.fn.datagrid.methods, {
/**
* 开打提示功能
* @param {} jq
* @param {} params 提示消息框的样式
* @return {}
*/
doCellTip : function(jq, params) {
function showTip(data, td, e) {
if ($(td).text() == "")
return;
data.tooltip.text($(td).text()).css({
top : (e.pageY + 10) + 'px',
left : (e.pageX + 20) + 'px',
'z-index' : $.fn.window.defaults.zIndex,
display : 'block'
});
};
return jq.each(function() {
var grid = $(this);
var options = $(this).data('datagrid');
if (!options.tooltip) {
var panel = grid.datagrid('getPanel').panel('panel');
var defaultCls = {
'border' : '1px solid #333',
'padding' : '1px',
'color' : '#333',
'background' : '#f7f5d1',
'position' : 'absolute',
'max-width' : '200px',
'border-radius' : '4px',
'-moz-border-radius' : '4px',
'-webkit-border-radius' : '4px',
'display' : 'none'
}
var tooltip = $("<div id='celltip'></div>").appendTo('body');
tooltip.css($.extend({}, defaultCls, params.cls));
options.tooltip = tooltip;
panel.find('.datagrid-body').each(function() {
var delegateEle = $(this).find('> div.datagrid-body-inner').length
? $(this).find('> div.datagrid-body-inner')[0]
: this;
$(delegateEle).undelegate('td', 'mouseover').undelegate(
'td', 'mouseout').undelegate('td', 'mousemove')
.delegate('td', {
'mouseover' : function(e) {
if (params.delay) {
if (options.tipDelayTime)
clearTimeout(options.tipDelayTime);
var that = this;
options.tipDelayTime = setTimeout(
function() {
showTip(options, that, e);
}, params.delay);
} else {
showTip(options, this, e);
}
},
'mouseout' : function(e) {
if (options.tipDelayTime)
clearTimeout(options.tipDelayTime);
options.tooltip.css({
'display' : 'none'
});
},
'mousemove' : function(e) {
var that = this;
if (options.tipDelayTime) {
clearTimeout(options.tipDelayTime);
options.tipDelayTime = setTimeout(
function() {
showTip(options, that, e);
}, params.delay);
} else {
showTip(options, that, e);
}
}
});
});
}
});
},
/**
* 关闭消息提示功能
* @param {} jq
* @return {}
*/
cancelCellTip : function(jq) {
return jq.each(function() {
var data = $(this).data('datagrid');
if (data.tooltip) {
data.tooltip.remove();
data.tooltip = null;
var panel = $(this).datagrid('getPanel').panel('panel');
panel.find('.datagrid-body').undelegate('td',
'mouseover').undelegate('td', 'mouseout')
.undelegate('td', 'mousemove')
}
if (data.tipDelayTime) {
clearTimeout(data.tipDelayTime);
data.tipDelayTime = null;
}
});
}
});
function doCellTip(){
$('#mainGrid').datagrid('doCellTip',{'max-width':'100px'});
}
function cancelCellTip(){
$('#mainGrid').datagrid('cancelCellTip');
}
function doCellTip(){
$('#mainGrid').datagrid('doCellTip',{'max-width':'100px'});
}
function cancelCellTip(){
$('#mainGrid').datagrid('cancelCellTip');
}
datagrid鼠标悬浮提示的更多相关文章
- IntelliJ设置鼠标悬浮提示和修改快捷键
IntelliJ设置鼠标悬浮提示和修改快捷键 设置鼠标悬浮提示 修改快捷键 进入设置菜单 删除原来的快捷键(注:你可以选择保留原来的快捷键,同时使用两个快捷键) Good Luck
- easyUi datagrid鼠标经过提示单元格内容
此文章是基于 EasyUI+Knockout实现经典表单的查看.编辑 一. jquery.cellTip.js /** * 扩展两个方法 */ using('datagrid', function() ...
- IntelliJ IDEA设置鼠标悬浮提示
测试代码; public interface MyInterface { /** * 我是接口方法的注释 * @param num1 我是接口方法入参的注释 * @return 我是接口方法返回值的注 ...
- 解决echarts 鼠标悬浮提示 文本提示问题。
参考文章:https://www.jianshu.com/p/aa585c304660 官方文章样式详解:http://echarts.baidu.com/option.html#tooltip.fo ...
- IntelliJ IDEA 2017.3尚硅谷-----鼠标悬浮提示
建议不会的直接百度取消设置
- Android Studio移动鼠标显示悬浮提示的设置方法
欢迎和大家交流技术相关问题: 邮箱: jiangxinnju@163.com 博客园地址: http://www.cnblogs.com/jiangxinnju GitHub地址: https://g ...
- 使用layer.tips实现鼠标悬浮时触发事件提示消息实现
代码: <body> <label id="test" onmouseover="show('test')"> 你瞅啥!?过来试试! & ...
- echarts —— tooltip 鼠标悬浮显示提示框属性
最近一直在使用echarts,当然也被其中的各种属性整的头大,记录一下其中遇到的问题. tooltip:鼠标悬浮时显示的提示框. 今天想要记录的是[自定义提示框的内容],如下图,鼠标悬浮时提示框内显示 ...
- css实现鼠标悬浮后的提示效果
一.概述 很多时候网站中需要在鼠标划过小图标时,悬浮出提示性的文字.比如下图: 鼠标悬浮后的效果 这种效果可以使用css中的伪类hover来实现.但有时候搞不清两个元素的嵌套关系.使用了hover却没 ...
随机推荐
- ipv6相关
link-local和site-local address http://blog.163.com/s_u/blog/static/13308367201052411431027/ 学习IPV6的时候 ...
- ImageResizer for .net 图片处理强大类库
http://imageresizing.net / 官网 http://imageresizing.net/docs/basics (文档) 变换尺寸,加边框,覆盖文本,和旋转和分割图象
- MySQL定位锁争用比较严重的表
1:查看当前的事务 mysql> SELECT * FROM information_schema.innodb_trx \G 2:查看当前锁定的事务 mysql> SELECT * FR ...
- 自己主动化測试使用mybatis更新数据库信息实例
代码例如以下: mybatis配置文件: <? xml version="1.0" encoding="UTF-8"?> <!DOCTYPE ...
- linux内核学习推荐书籍
<UNIX环境高级编程>,推荐指数:★★★★★ <UNIX环境高级编程>是 Unix/ Linux 程序员案头必备的一本书籍.可以说,Linux 程序员如果没有读过这本书,就好 ...
- PHP递归方式把一个数组里面的null转换为空字符串”的方法
在一些接口的调用中,直接查询数据库出来的字段可能为null字段,但是为了简便前端的判断,需要把null转换成空字符串'',这个时候就需要递归的方式进行.直接上代码如下: //递归方式把数组或字符串 n ...
- Ubuntu14.04安装redis-server
1.update再install操作: sudo apt-get update sudo apt-get install -y redis-server 如果你已经安装了redis,会提示:redis ...
- nginx配置静态文件过期时间
1. 编辑虚拟主机配置文件/usr/local/nginx/conf/vhosts/huangzhenping.conf 说明:采用location方式 1 2 3 4 5 6 7 8 9 10 l ...
- PHP-根据字符串和所用字体计算字符串所占宽高
今天由于用GD画图, 需要把一段文字在一个框内居中, 但是文字的宽度如果用strlen($str) * $font_size来计算的话, 由于文字不是等宽高的, 所以会导致偏离, 最后选用的GD库的i ...
- vim资源帖
vimscript教程 http://learnvimscriptthehardway.stevelosh.com/ 阿信的vimscript http://www.axiaoxin.com/arti ...