easyui Tooltip 气泡信息提示
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Complex DataGrid - 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-1.8.0.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
<script>
$(function(){
$('#test').datagrid('doCellTip',{'max-width':'100px'});
});
/**
* 扩展两个方法
*/
$.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': '2px',
'color': '#333',
'background': '#f7f5d1',
'position': 'absolute',
'max-width': 'auto',//设置气泡显示的宽度为自动'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);
//showTip(options, this, e);
options.tipDelayTime = setTimeout(function(){
showTip(options, that, e);
}, params.delay);
}
});
}); } });
}
});
/**
* 关闭消息提示功能
*
* @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(){
$('#test').datagrid({
title:'My DataGrid',
iconCls:'icon-save',
width:700,
height:350,
nowrap: true,
autoRowHeight: false,
striped: true,
collapsible:true,
url:'066.json',
sortName: 'code',
sortOrder: 'desc',
remoteSort: false,
idField:'code',
onLoadSuccess:function(data){
$(this).datagrid('doCellTip',{'max-width':'300px','delay':500});
},
frozenColumns:[[
{field:'ck',checkbox:true},
{title:'Code',field:'code',width:80,sortable:true}
]],
columns:[[
{title:'Base Information',colspan:3},
{field:'opt',title:'Operation',width:100,align:'center', rowspan:2,
formatter:function(value,rec){
return '<span style="color:red">Edit Delete</span>';
}
}
],[
{field:'name',title:'Name',width:120},
{field:'addr',title:'Address',width:220,rowspan:2,sortable:true,
sorter:function(a,b){
return (a>b?1:-1);
}
},
{field:'col4',title:'Col41',width:150,rowspan:2}
]],
pagination:true,
rownumbers:true,
toolbar:[{
id:'btnadd',
text:'Add',
iconCls:'icon-add',
handler:function(){
$('#btnsave').linkbutton('enable');
alert('add')
}
},{
id:'btncut',
text:'Cut',
iconCls:'icon-cut',
handler:function(){
$('#btnsave').linkbutton('enable');
alert('cut')
}
},'-',{
id:'btnsave',
text:'Save',
disabled:true,
iconCls:'icon-save',
handler:function(){
$('#btnsave').linkbutton('disable');
alert('save')
}
}]
});
var p = $('#test').datagrid('getPager');
$(p).pagination({
onBeforeRefresh:function(){
alert('before refresh');
}
});
});
function doCellTip(){
$('#test').datagrid('doCellTip',{'max-width':'100px'});
}
function cancelCellTip(){
$('#test').datagrid('cancelCellTip');
} </script>
</head>
<body>
<h2>Complex DataGrid</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Click the button to do actions with datagrid. </div>
</div> <div style="margin:10px 0;">
<a href="#" onclick="doCellTip()">显示提示消息</a>
<a href="#" onclick="cancelCellTip()">禁止消息显示</a>
<div id="info"></div>
</div>
<table id="test"></table>
</body>
</html>
转:
http://www.easyui.info/easyui/demo/datagrid/066.html#
easyui Tooltip 气泡信息提示的更多相关文章
- Ext信息提示对话框
Ext.window.MessageBox是一个工具类,他继承自Ext.window.Windoe对象,用来生成各种风格的信息提示对话框,其实例对象可以通过Ext.MessageBox或Ext.Msg ...
- [js插件]分享一个文章内容信息提示插件Colortip
引用 项目中需要一个信息提示的功能,就上网找了一个插件,发现colortip实现比较简单,就定了这个插件. 实现过程 官网:http://tutorialzine.com/2010/07/colort ...
- 44. Ext信息提示对话框
转自:https://www.cnblogs.com/glsqh/p/5920500.html Ext.window.MessageBox是一个工具类,他继承自Ext.window.Windoe对象, ...
- jNotify：操作结果信息提示条
我们在提交表单后,通过Ajax响应后台返回结果,并在前台显示返回信息,jNotify能非常优雅的显示操作结果信息.jNotify是一款基于jQuery的信息提示插件,它支持操作成功.操作失败和操作提醒 ...
- HubSpot – 网站开发必备的 jQuery 信息提示库
HubSpot 一款功能丰富的 jQuery 消息提示插件.它可以帮助你个性化显示您的应用程序的事务性消息.您可以轻松地包裹 Ajax 请求进度,成功和错误消息,还可以添加操作链接到您的消息中. Hu ...
- jQuery信息提示工具jquery.poshytip （转载）
转载地址:http://www.helloweba.com/view-blog-123.html Poshy Tip是一款非常友好的信息提示工具,它基于jQuery,当鼠标滑向链接时,会出现一个信息提 ...
- php--validate错误信息提示样式
//validate 错误信息提示样式 可以提示错误信息 可以使用jq 自带的属性改变错误的显示的位置,其中element是验证未通过的当前表单元素,error为错误后的提示信息 [注意]:放的位 ...
- 在ecshop顶部会员信息提示区显示会员等级
会员登陆后,在顶部会员信息提示区显示会员等级会员登陆后会在顶部出现这样的提示:您好,test2, 欢迎您回来 ! 进入用户中心 |退出现在设想在会员名后面加上“会员等级”效果如下:您好,test2, ...
- 气泡形提示控件grumble.js
grumble.js 是一个很特别的气泡形状提示控件,最开始是为 Huddle.com 网站开发的, 它没有通常的north/east/south/west的定位限制. 任何一个grumble都可以放 ...
随机推荐
- quick 关于触摸的问题
以前遇到一个问题就是,如果触摸层不在最后,会导致触摸失效.这是由于下面添加的层挡住了触摸层,而后添加的层会位于上面,默认是不可点击,点击不可穿透的.所以我们必须将触摸层放置到最上面. Logic.lu ...
- BZOJ3734 : [Ontak2013]Miny
将所有炸弹按坐标排序 x<-y连边表示x爆炸了y也会爆炸 如果是DAG则直接拓扑排序+DP求出每个点出发能走到的最左端和最右端的点 有环则SCC缩点后再拓扑 用线段树优化建图的过程 边数$O(n ...
- JavaScript中toStirng()与Object.prototype.toString.call()方法浅谈
toStirng()与Object.prototype.toString.call()方法浅谈 一.toString()是一个怎样的方法?它是能将某一个值转化为字符串的方法.然而它是如何将一个值从一种 ...
- jquery插件 源码
下面是对Jquery几个经常用到的地方进行的增强. 功能是参考百度七巧板JS框架来完成的. 一.页面属性 $.page.getHeight():获取页面高度 $.page.getWidth():获取页 ...
- Codeforces Round #213 (Div. 2) B. The Fibonacci Segment
#include <iostream> #include <algorithm> #include <vector> using namespace std; in ...
- python zip enumerate函数
zip是一个内置函数, 接受两个或多个序列,并将他们拉到一起,成为一个元组列表.每个元组包含各个序列中的一个元素. s = 'abc' t = [0,1,2] zip(s,t) >>> ...
- Django 1.6.0 正式发布，大幅改进事务处理
Django 1.6.0 正式发布了,查看官方发行说明. 下载地址:Django-1.6.tar.gz ,也可通过 pip 安装: pip install Django==1.6 要求 Python ...
- PDO常用方法及其应用
PDO::query() 主要是用于有记录结果返回的操作,特别是SELECT操作 PDO::exec() 主要是针对没有结果集合返回的操作,如INSERT.UPDATE等操作 PDO::prepare ...
- web app
*********Modernizr作为开发HTML5必要的js工具************ Modernizr作为开发HTML5必要的js工具 *********字体大小设 rem********* ...
- windows实时操作系统
最近一个项目需要用windows进行实时定时操作以实现同步功能(12ms),不过由于windows是分时系统,其可供用户使用的定时器误差较大. 通过查找发现了一个ardence公司开发的一个叫做RTX ...