在Easyui的1.3.3版本中,作者新增了tooltip组件,尽管样式看起来也不咋的,但是终归也是官方出品,同时其功能也算是比较丰富。之前我写过一篇《扩展:datagrid鼠标经过提示单元格内容》那就是用纯编码生成的tip,更为丑陋,有了Easyui 1.3.3的tooltip,我们实现起来就很容易了,直接上代码:
实现代码
- $.extend($.fn.datagrid.methods, {
- /**
- * 开打提示功能
- * @param {} jq
- * @param {} params 提示消息框的样式
- * @return {}
- */
- doCellTip:function (jq, params) {
- function showTip(showParams, td, e, dg) {
- //无文本,不提示。
- if ($(td).text() == "") return;
- params = params || {};
- var options = dg.data('datagrid');
- showParams.content = '<div class="tipcontent">' + showParams.content + '</div>';
- $(td).tooltip({
- content:showParams.content,
- trackMouse:true,
- position:params.position,
- onHide:function () {
- $(this).tooltip('destroy');
- },
- onShow:function () {
- var tip = $(this).tooltip('tip');
- if(showParams.tipStyler){
- tip.css(showParams.tipStyler);
- }
- if(showParams.contentStyler){
- tip.find('div.tipcontent').css(showParams.contentStyler);
- }
- }
- }).tooltip('show');
- };
- return jq.each(function () {
- var grid = $(this);
- var options = $(this).data('datagrid');
- if (!options.tooltip) {
- var panel = grid.datagrid('getPanel').panel('panel');
- 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[field]', {
- 'mouseover':function (e) {
- //if($(this).attr('field')===undefined) return;
- var that = this;
- var setField = null;
- if(params.specialShowFields && params.specialShowFields.sort){
- for(var i=0; i<params.specialShowFields.length; i++){
- if(params.specialShowFields[i].field == $(this).attr('field')){
- setField = params.specialShowFields[i];
- }
- }
- }
- if(setField==null){
- options.factContent = $(this).find('>div').clone().css({'margin-left':'-5000px', 'width':'auto', 'display':'inline', 'position':'absolute'}).appendTo('body');
- var factContentWidth = options.factContent.width();
- params.content = $(this).text();
- if (params.onlyShowInterrupt) {
- if (factContentWidth > $(this).width()) {
- showTip(params, this, e, grid);
- }
- } else {
- showTip(params, this, e, grid);
- }
- }else{
- panel.find('.datagrid-body').each(function(){
- var trs = $(this).find('tr[datagrid-row-index="' + $(that).parent().attr('datagrid-row-index') + '"]');
- trs.each(function(){
- var td = $(this).find('> td[field="' + setField.showField + '"]');
- if(td.length){
- params.content = td.text();
- }
- });
- });
- showTip(params, this, e, grid);
- }
- },
- 'mouseout':function (e) {
- if (options.factContent) {
- options.factContent.remove();
- options.factContent = null;
- }
- }
- });
- });
- }
- });
- },
- /**
- * 关闭消息提示功能
- * @param {} jq
- * @return {}
- */
- cancelCellTip:function (jq) {
- return jq.each(function () {
- var data = $(this).data('datagrid');
- if (data.factContent) {
- data.factContent.remove();
- data.factContent = null;
- }
- var panel = $(this).datagrid('getPanel').panel('panel');
- panel.find('.datagrid-body').undelegate('td', 'mouseover').undelegate('td', 'mouseout').undelegate('td', 'mousemove')
- });
- }
- });
入参列表
doCellTip方法的参数包含以下属性:
onlyShowInterrupt | string | 是否只有在文字被截断时才显示tip,默认值为false,即所有单元格都显示tip。 |
specialShowFields | Array | 需要特殊定义显示的列,比如要求鼠标经过name列时提示standName列(可以是隐藏列)的内容,specialShowFields参数可以传入:[{field:'name',showField:'standName'}]。 |
position | string | tip的位置,可以为top,botom,right,left。 |
tipStyler | object | tip内容的样式,注意要符合jquery css函数的要求。 |
contentStyler | object | 整个tip的样式,注意要符合jquery css函数的要求。 |
使用示例
- $('#dg').datagrid('doCellTip',
- {
- onlyShowInterrupt:false,
- position:'bottom',
- tipStyler:{'backgroundColor':'#fff000', borderColor:'#ff0000', maxWidth:'50px', boxShadow:'1px 1px 3px #292929'},
- contentStyler:{backgroundColor:'#333', paddingLeft:'5px'}
- });
效果演示
http://www.easyui.info/version/jquery-easyui-1.3.3/demo/datagrid/celltips.html
相关推荐
在Easyui的1.3.3版本中,作者新增了tooltip组件,尽管样式看起来也...之前我写过一篇《扩展:datagrid鼠标经过提示单元格内容》那就是用纯编码生成的tip,更为丑陋,有了Easyui 1.3.3的tooltip,我们实现起来就很容易了
功能没有阉割的老版本
GO工具and编译器 1.3.3版本 官方原版下载 原滋原味
GO工具and编译器 1.3.3版本 官方原版下载 原滋原味
GO工具and编译器 1.3.3版本 官方原版下载 原滋原味 注意:最后一个分卷扣2分
IOS14越狱,Odyssey-1.3.3 最新版 免墙下载 稳定不重启
这个是安卓手机上的下载工具「下载王」APP的最新v.1.3.3版本,新增双11领红包优惠券功能,给好友发福利码,后台下载列表新增批量删掉等功能。
commons-fileupload-1.3.3 commons-io-2.2 mysql-connector-java-5.1.37-bin druid-1.0.9
punbb1.3.3版本发布相对于1.3.2版本的变化有: 很多bug修复(CSS 和 markup,修复了一些语言文件,修正了header返回报错,挂钩重新整理,在feeds里帖子的解析,修正了在安装最后阶段的语言包侦测. 包含了安全漏洞的修复....
版本:1.3.3 软件语言:中文 软件类别:特效相机 软件大小:40.19 MB 适用固件:2.2及更高固件 内置广告:没有广告 适用平台:Android 百度魔拍--智能让美更简单 不断更换相机app,只为拍摄一张更美的照片,却总是...
jquery easyi1.3.3版本的英文api及demo整理
ligerui1.3.3版本
IOT替换工具V1.3.3.zip \IOT替换工具V1.3.3.zip \IOT替换工具V1.3.3.zip \IOT替换工具V1.3.3.zip \IOT替换工具V1.3.3.zip \IOT替换工具V1.3.3.zip \IOT替换工具V1.3.3.zip \IOT替换工具V1.3.3.zip \IOT替换工具V...
ace admin 1.3.3是一款基于bootstrap3的网站后台模板,这款后台模板很出名,官方收费最低18刀。 刚才体验了一下,感觉还行,不过唯一不足的就是模板里面用到的CDN和谷歌字体..大家都知道由于墙的原因,谷歌字体加载...
jQuery EasyUI 1.3.3 未混淆的源代码。下载阅读后,可以深入了解实现过程,以及更容易扩展实现。
scrapy1.3.3手册Scrapy 是一套基于基于Twisted的异步处理框架,纯python实现的爬虫框架,用户只需要定制开发几个模块就可以轻松的实现一个爬虫,用来抓取网页内容以及各种图片,非常之方便
通告 MyBatis的Generator现在需要JRE 1.6或更高版本 增强功能 改变了注解提供Generator...修正错误#648 - 使用基于构造模型时缺少进口 问题#10 - EqualsHashCodePlugin现在使用数组属性java.util.Arrays中的方法。
tui-editor1.3.3/tui-editor/tui-editor死活下载不了
这个是兼容1.3.1版本的,现在官方1.3.3版本的detailview是不兼容1.3.1的 想要更多easyui的案例解析可以下这个http://download.csdn.net/detail/oushaomeng2011/5480233
jquery easyui 1.3.3最新版本,修复了一些bug,增加了一些组件的新特性!