ASP源码.NET源码PHP源码JSP源码JAVA源码DELPHI源码PB源码VC源码VB源码Android源码
当前位置:首页 >> 网页制作 >> Javascript教程 >> easyUI的doCellTip 就是鼠标放到单元格上有个提示的功能

easyUI的doCellTip 就是鼠标放到单元格上有个提示的功能

来源:网络整理     时间:2014-12-19     关键词:

本篇文章主要介绍了"easyUI的doCellTip 就是鼠标放到单元格上有个提示的功能",对于Javascript教程感兴趣的同学可以参考一下: 1:这个东西是我抄的(抄的哪儿的我就想不起来了- -)弹出的窗没有样式 不是很好看//扩展$.extend($.fn.datagrid.methods, { ...

1:这个东西是我抄的(抄的哪儿的我就想不起来了- -)弹出的窗没有样式  不是很好看

//扩展
    $.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></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;   
                    }   
                });   
    }   
}); 
调用方法1:
function doCellTip(){  

         $('#dg').datagrid('doCellTip',{'max-width':'100px'});  

 }  

 function cancelCellTip(){  

         $('#dg').datagrid('cancelCellTip');  

 } 

调用方法2:

onLoadSuccess:function(data){   

      $('#dg').datagrid('doCellTip',{cls:{'background-color':'red'},delay:1000});   

}  



就这么着吧!!!

以上就介绍了easyUI的doCellTip 就是鼠标放到单元格上有个提示的功能,包括了方面的内容,希望对Javascript教程有兴趣的朋友有所帮助。

本文网址链接:http://www.codes51.com/article/detail_100133.html

相关图片

相关文章