jQueryのposition()関数の詳細説明とjQuery_jqueryでのposition関数の応用

position() 関数は、位置決めされた祖先要素を基準とした現在の一致要素のオフセット、つまり、位置決めされた祖先要素を基準とした座標を返すために使用されます。この関数は、表示されている要素に対してのみ機能します。

いわゆる「位置要素」とは、要素の CSS 位置属性値が絶対的、相対的、または固定であることを意味します (デフォルトの静的でない限り)。

この関数は、left 属性と top 属性を持つ座標オブジェクトを返します。プロパティ値はすべて数値であり、単位はすべてピクセル (px) です。

offset() との違いは、position() は位置決めされた祖先要素を基準とした座標を返し、offset() は現在のドキュメントを基準とした座標を返すことです。また、position()関数は設定操作には使用できません。現在の要素のすべての祖先要素がデフォルトの位置 (静的) に設定されている場合、この関数によって返されるオフセット位置は offset() 関数と同じになります。

この関数はjQueryオブジェクト(インスタンス)に属します。

文法

この関数は jQuery 1.2 の新機能です。

jQueryObject.position( )

戻り値

position() 関数の戻り値は Object 型で、最も近い「位置決めされた」祖先要素を基準としたオフセット座標オブジェクトを返します。このオブジェクトには left 属性と top 属性があります。

現在の jQuery オブジェクトが複数の要素に一致する場合、座標を返すときに、position() 関数は最初に一致した要素のみを使用します。一致する要素がない場合は、unknown が返されます。

position() の座標参照系は、配置された祖先要素の左上隅を原点 (0,0) として、右方向に正、下方向に正となります。

例と手順

次の HTML コードを例として挙げます:

<br>
<br>
<p id="n1"><span id="n2">专注于编程开发技术分享</span></p>

次の jQuery サンプル コードは、position() 関数と offset() 関数の使用法を示すために使用されます。

var $n2 = $("#n2");
// 输出n2的偏移坐标
var pos = $n2.position();
document.writeln( "n2的position()偏移坐标：(" + pos.left + ", " + pos.top + ")" ); // n2的position()偏移坐标：(8, 60)
var coord = $n2.offset();
document.writeln( "n2的offset()的偏移坐标：(" + coord.left + ", " + coord.top + ")" ); // n2的offset()的偏移坐标：(8, 60)

上記の jQuery 演算結果から、position() は親要素に対する相対的なオフセット位置を取得していないことがわかります。 n2 のすべての祖先要素がデフォルトの位置にある場合、position() によって返されるオフセット位置は offset() 関数と一致します。

次に、上記の HTML コードの n1 に相対位置を追加します。

<br>
<br>
<p id="n1" style="position: relative;" ><span id="n2">专注于编程开发技术分享</span></p>

次に、上記の jQuery コードを再実行すると、次の結果が表示されます。

var $n2 = $("#n2");
// 输出n2的偏移坐标
var pos = $n2.position();
document.writeln( "n2的position()偏移坐标：(" + pos.left + ", " + pos.top + ")" ); // n2的position()偏移坐标：(0, 0)
var coord = $n2.offset();
document.writeln( "n2的offset()的偏移坐标：(" + coord.left + ", " + coord.top + ")" ); // n2的offset()的偏移坐标：(8, 60)

このとき、n2の先祖要素のうち、n1がn2に最も近い位置の先祖要素(ここでは相対、絶対、固定も同様)なので、position()はn2の相対的なオフセット位置を返します。 n1に。

。jQuery の位置関数の応用 (センタリング、オフスクリーン処理など)

jQuery は Html 要素を簡単に配置できる Position 関数を提供します。簡単な使用方法は次のとおりです。

$(".daygrid").click(function(event){
  clickedGrid = $(this);
  $(".modal").modal("show");
  $(".modal").position({
    of:clickedGrid,
    offset:" ",
    collision:"fit"
  });
});

上記は非常に一般的な使用法で、クリック時刻を登録し、クリックイベントが発生したときにクリックされた要素を取得し、positionメソッドを使用してインターフェイスにダイアログボックスを表示します。

位置関数は、多くのパラメータを持つオプション オブジェクトを受け入れます

of: 配置されるオブジェクトを示します。クリック

のイベント オブジェクトを渡すこともできます

my と at: この 2 つは実際には、参照オブジェクトと参照オブジェクトです。my パラメーターは参照に使用される位置を示し、at は参照ターゲットの位置を示します。値の範囲は「左中右上下」のいずれか1つまたは2つです。例: my:"top left",at:"left butm" の場合、この設定は、設定する要素の左上隅が対象要素の左下隅に配置されることを意味します。

collision: 衝突の処理方法を示します。値の範囲は「flip fit none」です。3 つのうちの 1 つを選択します。フリップの英語の公式説明はあまり明確ではありません。実際のテスト効果は、期待範囲 (ウィンドウなど) を超える場合、要素をターゲット領域の反対の位置に配置しようとするというものです。フィットとは適応であり、要素がオーバーフローすることなく、要素が予想範囲内に完全に配置されることを意味します。また、none は衝突処理を行いません。

offset は、my、at、of で要素を整列させた後、どのくらいの距離をオフセットするかを示します。たとえば、「100 100」に設定すると、目的の位置に移動してから下と右に 100px オフセットすることになります。

よく使われるのは、ポップアップダイアログボックスの位置です。マウスをクリックした位置にダイアログボックスを表示させるには、クリックで渡されたイベントオブジェクトをofパラメータに渡すことができます。ダイアログ ボックスがウィンドウの範囲内に収まるようにするには、衝突セットを使用してフィットさせます。最後に、実際のニーズに応じて位置合わせパラメータ my と at を設定し、offset を使用してオフセットを微調整します。ポップアップダイアログボックスをウィンドウの中央に設定する例:

上記の内容は、jQuery のposition() 関数の詳細な説明と、編集者が共有した jQuery でのposition 関数のアプリケーションの全体的な説明です。

$("#myDialog").position({
  my: "center",
  at: "center",
  of: window,
  collision:"fit"
});