jQuery: ¿Puede explicar cómo funciona esta posición? novato en posición mediante compensaciones, etc.

Question

Rastreo de esta función autocompletar jQuery, alguien puede explicar en detalle lo que está pasando aquí?

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

Se utiliza esta función:

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

Referencia: http://www.pengoworks.com/workshop /jquery/lib/jquery.autocomplete.js

Answer 1

offsetLeft y offsetTop son propiedades que describen el número de píxeles obj está desplazado del que está elemento contenedor. Lo que hace esta función es:

1. calcular el desplazamiento de obj de su elemento padre y guardar estos valores en las variables
2. Establecer obj a ser el elemento padre del elemento calculado a partir de la última
3. Goto 1. Repita hasta que haya alcanzado el nivel superior de la DOM.

Esto calcula el número de píxeles que es obj de los lados superior e izquierdo de la página representada.

Answer 2

Básicamente, es averiguar las coordenadas X e Y (izquierda y superior en términos CSS) del campo de entrada que está utilizando autocompletar y ajuste de los atributos CSS superior e izquierdo de la autocompletar HTML para hacer que aparezca allí. En otras palabras, está coincidir las esquinas del elemento y autocompletar capa de entrada de forma que aparecen en el mismo lugar (que está haciendo lo mismo con anchuras y alturas, también).

En la función findPos, básicamente estamos caminando de regreso al árbol DOM conseguir las compensaciones (ver centro de Desarrollo de Mozilla) de cada elemento de su padre (y eventualmente el cuerpo de la etiqueta) para obtener los x precisas y coordenadas y de esa entrada, de manera que podemos colocar la capa de autocompletar en él es coordenadas. Sumamos estos, y terminar con el valores x e y se pasa una copia de seguridad a seguir para determinar las posiciones de la izquierda y arriba en el CSS.

Está copiando esencialmente la posición X e Y, la altura y la anchura de su entrada y su aplicación a la capa de autocompletar para que coincidan visualmente.