jQuery EasyUI 用 body 做layout并且定宽居中时，绝对层定位居中问题

版本 1.3.2,1.3.3

我在应用jQuery EasyUI的 layout 的时候遇到了表单验证定位偏离的问题。

原因是我采用了限制宽度，不限制高度的 layout 模式，
就是把全屏的 layout，限制了宽度，然后body居中。
错位如下图。








这是提示信息条的html及css

.validatebox-tip {
	position: absolute;
	width: 200px;
	height: auto;
	display: none;
	z-index: 9900000;
}
<div class="validatebox-tip" style="display: block; top: 206px; left: 685px;">
	<span class="validatebox-tip-content">这是必填的项目。</span>
	<span class="validatebox-tip-pointer" style="top: 3px;"></span>
</div>

看得到left现在是685px，而这个数值经过查找是从_3ac函数中判断得来的。

1.3.2
判断函数_3ac

function _3ac(_3ad) {
	var _3ae = $.data(_3ad, "validatebox");
	if (!_3ae) {
		return;
	}
	var tip = _3ae.tip;
	if (tip) {
		var box = $(_3ad);
		var _3af = tip.find(".validatebox-tip-pointer");
		var _3b0 = tip.find(".validatebox-tip-content");
		tip.show();
		tip.css("top", box.offset().top - (_3b0._outerHeight() - box._outerHeight()) / 2);
		if (_3ae.options.tipPosition == "left") {
			tip.css("left", box.offset().left - tip._outerWidth());
			tip.addClass("validatebox-tip-left");
		} else {
			tip.css("left", box.offset().left + box._outerWidth());		//就是这里做的判断
			tip.removeClass("validatebox-tip-left");
		}
		_3af.css("top", (_3b0._outerHeight() - _3af._outerHeight()) / 2);
	}
};

1.3.3

判断函数

function _1ae(_1b2){
var _1b3=$.data(_1b2,"tooltip");
if(!_1b3||!_1b3.tip){
return;
}
var opts=_1b3.options;
var tip=_1b3.tip;
if(opts.trackMouse){
t=$();
var left=opts.trackMouseX+opts.deltaX;
var top=opts.trackMouseY+opts.deltaY;
}else{
var t=$(_1b2);
var left=t.offset().left+opts.deltaX;	//这里
var top=t.offset().top+opts.deltaY;
}

看到这里

1.3.2

tip.css("left", box.offset().left + box._outerWidth());

1.3.3

var left=t.offset().left+opts.deltaX;

这里就要研究一下jQuery的 offset()与position().
offset()方法没有什么限制，会定位到视口，也就是获取视口与元素之间的距离。
position()方法就会限制在(static)定位上，向上查找到非(static)定位的元素之间的距离，这就跟绝对定位(absolute)相似。




而现在用的是offset()，因为我是把layout定义在body当中，
而body因为是用margin:0 auto;居中，所以body左边是有margin的，
而在 jQuery EasyUI 的 layout 中，css是带有(relative)定位的

.layout {
position: relative;
overflow: hidden;
margin: 0;
padding: 0;
z-index: 0;
}

那很明显如果用 offset()方法查找的话，则会忽略 body.layout 元素的排版，
而把提示加长到窗口的left距离，会造成提示框错位。


我们把offset改成position则显示正确。

后来又会有其它的情况如:messager不居中

代码位置:

function _221(_222,_223){
var _224=$.data(_222,"window");
var opts=_224.options;
var _225=opts.width;
if(isNaN(_225)){
_225=_224.window._outerWidth();
}
if(opts.inline){
var _226=_224.window.parent();
opts.left=(_226.width()-_225)/2+_226.scrollLeft()-$("body").offset().left; //这行加上 -$("body").offset().left;
}else{
opts.left=($(window)._outerWidth()-_225)/2+$(document).scrollLeft()-$("body").offset().left;	//这行加上 -$("body").offset().left;

}
if(_223){
_21d(_222);
}
};