87,901
社区成员
发帖
与我相关
我的任务
分享
html += '<div id="' + Util.ToolTip.tipID + '" class="' + Util.ToolTip.toolClass + '" style="display:none">';
你的div在進行css樣式設置的時候是display:none的,所以獲取不到尺寸
你可以這樣
<div style="position:absolute;left:-10000px;top:-10000px;"></div>
等獲取到尺寸后,再設置left|top把它放到正確的位置
Util.ToolTip = {
x: 10,
y: 10,
zindex: 999,
timer: 200,
toolClass: 'tool-tip',
tipClass: 'ToolTips',
tipID: 'ToolTip',
wid: 300,
init: function() {
$('.' + Util.ToolTip.tipClass).bind('mouseenter',
function(e) {
Util.stopBubble(e);
var self = $(this);
var txt = self.attr('data-text');
Util.ToolTip.createHTML(self, txt)
}).click(function(e) {
Util.stopBubble(e);
var self = $(this);
var txt = self.attr('data-text');
if (typeof($('#' + Util.ToolTip.tipID)[0]) === 'undefined') {
Util.ToolTip.createHTML(self, txt)
};
return false
})
},
createHTML: function(self, txt) {
if (! (txt == '' || txt == 'undefined' || txt == null)) {
$('#' + Util.ToolTip.tipID).remove();
var items = [],
html = '';
items = $.trim(txt).split("|");
if (self.hasClass('ToolTipCol')) {
html += '<div id="' + Util.ToolTip.tipID + '" class="' + Util.ToolTip.toolClass + '" style="display:none">';
html += '<div class="items tool-tip-col">' + items + '</div>'
} else if (self.hasClass('ToolTipCols')) {
html += '<div id="' + Util.ToolTip.tipID + '" class="' + Util.ToolTip.toolClass + '" style="width:320px;display:none">';
html += '<div class="items tool-tip-cols">';
html += '<ul class="title"><li class="y_0">类型</li><li class="y_1">说明</li></ul>';
html += '<ul>';
for (var i = 0; i < items.length; i++) {
html += '<li class="y_' + i + '">' + items[i] + '</li>'
};
html += '</ul>';
html += '</div>'
};
html += '<b class="ar_up"></b><b class="ar_up_in"></b></div>';
$('body').append(html);
var tar = $('#' + Util.ToolTip.tipID);
Util.getPOP(self, tar, Util.ToolTip.wid);
tar.mouseleave(function() {
tar.remove()
});
tar.click(function(e) {
Util.stopBubble(e)
});
$(document).click(function() {
tar.remove()
})
}
}
};
Util.getPOP = function(self, tar, wid) {
console.log(tar.height());//此处永远获取到初始高度
var aTop = self.offset().top;
var aLeft = self.offset().left;
var aHeight = self.outerHeight();
var aWidth = self.outerWidth();
var tmpWidth = tar.width();
var tmpHeight = tar.height();
var tipY = $(window).height() - (aTop + tmpHeight);
var tipX = $(window).width() - (aLeft + tmpWidth);
var tmpTop = aTop;
var tmpLeft = aLeft + aWidth / 2;
var up = tar.find('.ar_up');
var upInner = tar.find('.ar_up_in');
if (self.hasClass('ToolTipCols')) {
tmpWidth = tar.width()
} else {
if (tmpWidth > wid) {
tmpWidth = wid;
} else {
tmpWidth = tar.width()
}
};
if (tipX < Util.ToolTip.x) {
tmpLeft = tmpLeft - (tmpWidth - aWidth / 2) + 5;
up.css({
left: 'auto',
right: '5px',
marginLeft: '0'
});
upInner.css({
left: 'auto',
right: '5px',
marginLeft: '0'
})
} else {
if (tmpLeft < tmpWidth) {
tmpLeft = tmpLeft - aWidth / 2 - 5;
up.css({
left: '5px',
marginLeft: '0'
});
upInner.css({
left: '5px',
marginLeft: '0'
})
} else {
tmpLeft = tmpLeft - tmpWidth / 2
}
};
if (tipY < Util.ToolTip.y) {
tmpTop = tmpTop - aHeight - tmpHeight;
up.addClass('ar_down');
upInner.addClass('ar_down_in')
} else {
tmpTop = tmpTop + aHeight + 12;
if (self.hasClass('ToolTipCols')) {
upInner.css({
'border-color': 'transparent transparent #e8ecef transparent'
})
}
};
tar.css({
position: 'absolute',
top: tmpTop,
left: tmpLeft,
width: tmpWidth,
zIndex: Util.ToolTip.zindex
});
tar.fadeIn('slow');
var tmpHeight = tar.height();
console.log(tmpHeight);//如果把高度定义在这里,就正常
};
Util.ToolTip = {
//此处定义DIV,且调用,tar为自定义DIV
Util.getPOP(self, tar, Util.ToolTip.wid);