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);}};