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. Goto1.DOMのトップレベルに到達するまで繰り返します。

objこれにより、レンダリングされたページの上部と左側からのピクセル数が計算されます。

于 2009-06-08T16:45:46.533 に答える
1

基本的には、オートコンプリートを使用している入力フィールドのX座標とY座標（CSS用語では左と上）を計算し、オートコンプリートHTMLの上部と左側のCSS属性を設定してそこに表示します。つまり、入力要素とオートコンプリートレイヤーのコーナーが一致しているため、同じ場所に表示されます（幅と高さも同じです）。

findPos関数では、基本的にDOMツリーに戻って、各要素の親（および最終的にはbodyタグ）からのオフセット（ Mozillaの開発センターを参照）を取得して、その入力の正確なx座標とy座標を取得します。オートコンプリートレイヤーをその座標に配置できます。これらを合計し、CSSの左右の位置を設定するために使用するために、元に戻すx値とy値を取得します。

基本的に、入力のxとyの位置、高さ、幅をコピーし、それらをオートコンプリートレイヤーに適用して、視覚的に一致させます。

于 2009-06-08T16:46:26.500 に答える