Jqueryui-position
JqueryUI-位置
この章では、jqueryUiのユーティリティメソッドの1つである_position（）_メソッドを参照します。 _position（）_メソッドを使用すると、別の要素またはマウスイベントに対して要素を配置できます。
jQuery UIは、jQueryコアの.position（）メソッドを拡張して、自然に他の人に説明するのと同じ方法で要素を配置する方法を説明できるようにします。 数字や数学を使用する代わりに、意味のある単語（左右など）と関係を使用します。
構文
以下は、_position（）_メソッドの構文です-
.position( options )_options_はObject型で、ラップされたセットの要素の配置方法を指定する情報を提供します。 次の表は、このメソッドで使用できるさまざまな_options_のリストです-
| Sr.No. | Option & Description |
|---|---|
| 1 |
このオプションは、ラップされた要素（再配置される要素）の位置を指定して、ターゲット要素または位置に合わせます。 デフォルトでは、その値は center です。
このオプションは、ラップされた要素（再配置される要素）の位置を指定して、ターゲット要素または位置に合わせます。 デフォルトでは、その値は center です。 これらの値のうち2つを使用して場所を指定します。top、left、bottom、right、およびcenter。スペース文字で区切られます。最初の値は horizontal 値で、2番目は vertical です。 指定された単一の値が horizontal または vertical とみなされるかどうかは、使用する値によって異なります（たとえば、_top_は垂直、_right_は水平）。 例 |
| 2 |
このオプションは文字列タイプで、再配置された要素を整列させるターゲット要素の位置を指定します。 _my_オプションと同じ値を取ります。 デフォルトでは、その値は center です。
このオプションは文字列タイプで、再配置された要素を整列させるターゲット要素の位置を指定します。 _my_オプションと同じ値を取ります。 デフォルトでは、その値は center です。 例 |
| 3 |
これはタイプSelectorまたはElementまたはjQueryまたはEventです。 ラップされた要素が再配置されるターゲット要素、またはターゲット位置として使用するマウス座標を含むEventインスタンスを識別します。 デフォルトでは、その値は null です。
これはタイプSelectorまたはElementまたはjQueryまたはEventです。 ラップされた要素が再配置されるターゲット要素、またはターゲット位置として使用するマウス座標を含むEventインスタンスを識別します。 デフォルトでは、その値は null です。 例 |
| 4 |
このオプションはString型であり、配置された要素が任意の方向にウィンドウを超えて拡張するときに適用されるルールを指定します。 デフォルトでは、その値は flip です。 オプション-衝突 このオプションはString型であり、配置された要素が任意の方向にウィンドウを超えて拡張するときに適用されるルールを指定します。 デフォルトでは、その値は flip です。 次の2つ（水平に続いて垂直）を受け入れます-
単一の値が指定されている場合、それは両方向に適用されます。 例 |
| 5 |
このオプションは、要素の位置を変更する内部関数を置き換える関数です。 計算されたターゲット位置に設定された_left_および_top_プロパティと、関数コンテキストとして設定された要素を持つオブジェクトハッシュで構成される単一の引数で、ラップされた各要素に対して呼び出されます。 デフォルトでは、その値は null です。 オプション-使用 このオプションは、要素の位置を変更する内部関数を置き換える関数です。 計算されたターゲット位置に設定された_left_および_top_プロパティと、関数コンテキストとして設定された要素を持つオブジェクトハッシュで構成される単一の引数で、ラップされた各要素に対して呼び出されます。 デフォルトでは、その値は null です。 例 |
| 6 |
このオプションはセレクター、エレメント、またはjQueryエレメントであり、衝突検出の境界ボックスとして使用するエレメントを指定できます。 これは、ページの特定のセクション内に配置された要素を含める必要がある場合に便利です。 デフォルトでは、その値は window です。 オプション-以内 このオプションはセレクター、エレメント、またはjQueryエレメントであり、衝突検出の境界ボックスとして使用するエレメントを指定できます。 これは、ページの特定のセクション内に配置された要素を含める必要がある場合に便利です。 デフォルトでは、その値は window です。 |
例
次の例は、_position_メソッドの使用法を示しています。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI position method Example</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.positionDiv {
position: absolute;
width: 75px;
height: 75px;
background: #b9cd6d;
}
#targetElement {
width: 300px;
height: 500px;
padding-top:50px;
}
</style>
<script>
$(function() {
//Position the dialog offscreen to the left, but centered vertically
$( "#position1" ).position({
my: "center",
at: "center",
of: "#targetElement"
});
$( "#position2" ).position({
my: "left top",
at: "left top",
of: "#targetElement"
});
$( "#position3" ).position({
my: "right-10 top+10",
at: "right top",
of: "#targetElement"
});
$( document ).mousemove(function( event ) {
$( "#position4" ).position({
my: "left+3 bottom-3",
of: event,
collision: "fit"
});
});
});
</script>
</head>
<body>
<div id = "targetElement">
<div class = "positionDiv" id = "position1">Box 1</div>
<div class = "positionDiv" id = "position2">Box 2</div>
<div class = "positionDiv" id = "position3">Box 3</div>
<div class = "positionDiv" id = "position4">Box 4</div>
</div>
</body>
</html>上記のコードをHTMLファイル positionmethodexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。 今、あなたは結果で遊ぶことができます-
この例では-
- _Box 1_は、div要素の中央（水平および垂直方向）に配置されます。
- Box 2はdiv要素の左上（水平および垂直）_of_に配置されます。
- Box 3はウィンドウの右上隅に表示されますが、メッセージがより目立つようにパディングを残します。 これは、_my_または_at_の水平および垂直値を使用して行われます。
- _Box 4_の場合、_of_値はイベントオブジェクトとして設定されます。 これは、ポインターに関連付けられたイベントであり、マウスイベントと共に移動します。
