0

跟踪这个jquery自动完成功能，有人可以详细解释这里发生了什么吗？

function showResults() {
    // get the position of the input field right now (in case the DOM is shifted)
    var pos = findPos(input);
    // either use the specified width, or autocalculate based on form element
    var iWidth = (options.width > 0) ? options.width : $input.width();
    // reposition
    $results.css({
        width: parseInt(iWidth) + "px",
        top: (pos.y + input.offsetHeight) + "px",
        left: pos.x + "px"
    }).show();
};

它使用这个功能：

function findPos(obj) {
    var curleft = obj.offsetLeft || 0;
    var curtop = obj.offsetTop || 0;
    while (obj = obj.offsetParent) {
        curleft += obj.offsetLeft
        curtop += obj.offsetTop
    }
    return {x:curleft,y:curtop};
}

参考：http ://www.pengoworks.com/workshop/jquery/lib/jquery.autocomplete.js

4

2 回答 2

1

offsetLeft并且是描述从它的包含元素偏移offsetTop多少像素的属性。obj这个函数的作用是：

  1. 计算obj其父元素的偏移量并将这些值保存在变量中
  2. 设置obj为最后计算的项目的父元素
  3. Goto 1. 重复直到到达 DOM 的顶层。

obj这会计算渲染页面的顶部和左侧有多少像素。

于 2009-06-08T16:45:46.533 回答
1

基本上，它会计算出您正在使用自动完成功能的输入字段的 X 和 Y 坐标（CSS 术语中的左侧和顶部），并设置自动完成 HTML 的顶部和左侧 CSS 属性以使其出现在那里。换句话说，它匹配输入元素和自动完成层的角，因此它们出现在同一个地方（宽度和高度也一样）。

在 findPos 函数中，我们基本上是返回 DOM 树，从其父元素（以及最终的 body 标签）获取每个元素的偏移量（参见Mozilla 的开发中心），以获取该输入的精确 x 和 y 坐标，以便我们可以将自动完成图层定位在它的坐标处。我们将这些相加，最后得到我们传回的 x 和 y 值，用于设置 CSS 中的左侧和顶部位置。

它本质上是复制输入的 x 和 y 位置、高度和宽度，并将它们应用到自动完成层，以便它们在视觉上匹配。

于 2009-06-08T16:46:26.500 回答