EasyUI的doCellTip實現(xiàn)鼠標(biāo)放到單元格上提示單元格內(nèi)容
1:這個東西是我抄的(抄的哪兒的我就想不起來了- -)彈出的窗沒有樣式 不是很好看
//擴(kuò)展
$.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);
}
}
});
});
}
});
},
/**
* 關(guān)閉消息提示功能
* @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;
}
});
}
});
調(diào)用方法1:
function doCellTip(){
$('#dg').datagrid('doCellTip',{'max-width':'100px'});
}
function cancelCellTip(){
$('#dg').datagrid('cancelCellTip');
}
調(diào)用方法2:
onLoadSuccess:function(data){
$('#dg').datagrid('doCellTip',{cls:{'background-color':'red'},delay:1000});
}
以上所述是小編給大家介紹的EasyUI的doCellTip實現(xiàn)鼠標(biāo)放到單元格上提示單元格內(nèi)容,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
jquery實現(xiàn)鼠標(biāo)拖動圖片效果示例代碼
鼠標(biāo)拖動圖片的效果想必大家都有見到過吧,其實實現(xiàn)起來很簡單的,下面使用query來實現(xiàn)下,感興趣的朋友不要錯過2014-01-01
jquery焦點圖片切換(數(shù)字標(biāo)注/手動/自動播放/橫向滾動)
焦點圖片切換在網(wǎng)頁制作的商品展示中經(jīng)常會用到,這樣的效果可以給用戶帶來耳目一新的感覺同時也是用戶比較追捧的,本文也實現(xiàn)了一個這樣的焦點圖片切換效果,感興趣的你可以參考下啊,希望本文對你有所幫助2013-01-01
jQuery實現(xiàn)仿微軟首頁感應(yīng)鼠標(biāo)變化滑動窗口效果
這篇文章主要介紹了jQuery實現(xiàn)仿微軟首頁感應(yīng)鼠標(biāo)變化滑動窗口效果,基于jQuery響應(yīng)鼠標(biāo)事件簡單實現(xiàn)動畫效果,非常簡單實用,需要的朋友可以參考下2015-10-10
基于jquery異步傳輸json數(shù)據(jù)格式實例代碼
這篇文章主要介紹了jquery異步傳輸json數(shù)據(jù)格式實例代碼,有需要的朋友可以參考一下2013-11-11
JQuery 遮罩層實現(xiàn)(mask)實現(xiàn)代碼
用過ExtJs的可能知道在ExtJs中集成了很多的UI元素可以很方便我們的使用。2010-01-01

