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都可以放 ...
随机推荐
- BZOJ1035 : [ZJOI2008]Risk
首先要将这个图连通,方法是通过扫描线+set求出每个连通块最高的点上方的第一条边,然后向交点连边. 然后把边拆成两条双向边,每次找到一条没走过的边,找到极角排序后它的反向边的后继,直到回到这条边.根据 ...
- topcoder SRM 592 DIV2 LittleElephantAndBooks
#include <iostream> #include <vector> #include <algorithm> using namespace std; cl ...
- 小结：ac自动机
复杂度: 查找O(n),维护O(n) 概要: 应用了kmp的自匹配思想,在trie建图时维护一个fali指针,指向上一个匹配的点,这点是用bfs做到.匹配串的时候同样没匹配到就和kmp一样返回. 应用 ...
- 原创Java版的Shell
如果你接触过windows操作系统,你应该对windows中的cmd有一定的了解. 如果你接触过Linux操作系统,你应该对Linux的shell有一定的了解. 本文说的正是linux中的shell. ...
- Shell 小技巧的问题 mysql -e ,字符串替换telnet命令检测
api_url= #echo ${api_url/:/ }a #echo `echo $api_url|sed -i 's/:/ /' ` #|sed -i 's/:/ /' ` #sed 'as/: ...
- ztree学习之异步加载节点（一）
ztreedemo.jsp: <%@ page language="java" import="java.util.*" pageEncoding=&qu ...
- android之TabHost(上)
首先建立文件res/layout/tab.xml 代码如下: <?xml version="1.0" encoding="utf-8"?> < ...
- MHA监控进程异常退出
这两天遇到一个非常诡异的问题,打算和大家分享一下.只所以诡异估计是自己知识面不够吧.线上的MHA一直没有开启自动切换,都是手动切换的,最近开启了自动切换以后,退出securecrt窗口以后发现监控进程 ...
- 暑假训练round2 D: 好序列（Manacher）
Problem 1061: 好序列 Time Limits: 1000 MS Memory Limits: 65536 KB 64-bit interger IO format: %lld ...
- ProtocalBuffers学习记录
Google Protocol Buffer 的使用和原理 Google Protocol Buffers 概述 Google Protocol Buffers 入门 Protocol Buffers ...