jquery: Можете ли вы объяснить, как работает эта позиция? новичок в позиции, используя смещения и т. д. - PullRequest
Новая
       18

jquery: Можете ли вы объяснить, как работает эта позиция? новичок в позиции, используя смещения и т. д.

0 голосов
/ 08 июня 2009

Отслеживая эту функцию автозаполнения 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

Ответы [ 2 ]

1 голос
/ 08 июня 2009

По сути, это вычисление координат X и Y (слева и вверху в терминах CSS) поля ввода, в котором вы используете автозаполнение, и установка атрибутов верхнего и левого CSS для автозаполнения HTML, чтобы он там отображался. Другими словами, он совмещает углы входного элемента и слоя автозаполнения, чтобы они отображались в одном и том же месте (то же самое происходит и с шириной и высотой).

В функции findPos мы в основном идем обратно по дереву DOM, получая смещения (см. центр разработки Mozilla ) каждого элемента от их родителя (и в конечном итоге тега body), чтобы получить точный координаты x и y этого входа, чтобы мы могли расположить слой автозаполнения по его координатам. Мы суммируем их и получаем значения x и y, которые мы передаем обратно для использования при установке левой и верхней позиций в CSS.

Это, по сути, копирование x и y позиции, высоты и ширины вашего ввода и применение их к слою автозаполнения, чтобы они соответствовали визуально.

1 голос
/ 08 июня 2009

offsetLeft и offsetTop - это свойства, которые описывают, сколько пикселей obj смещено относительно содержащего его элемента. Что делает эта функция:

  1. Вычислить смещение obj от его родительского элемента и сохранить эти значения в переменных
  2. Установить obj в качестве родительского элемента элемента, который последний раз вычислялся из
  3. Перейти к 1. Повторяйте, пока не достигнете верхнего уровня DOM.

Это вычисляет, сколько пикселей это obj от верхней и левой сторон отрендеренной страницы.

...