js STUDIO

.position() 1.8 追加

Window、Document、ある要素、またはマウスポインタの相対的な位置に、指定した要素を配置します。(hidden状態の要素は扱えません)

これは独立したjQueryプラグインであり、他のjQuery UIコンポーネントに依存しません。 jQueryの.position()メソッドを拡張しています。

.position( options )

戻り値:jQuery

引数説明
my

初期値："center" 型：String

要素自身の基準点を要素内のどの位置にするのかを、"horizontal vertical"(水平位置、垂直位置)の順で指定します。 "right"のように指定が単一の場合は"right center"として、"top"は"center top"として扱われます。

水平の指定できる値

  • left
  • center
  • right

垂直の指定できる値

  • top
  • center
  • bottom

"left top"または、"center center"のように組み合わせを指定して使います。 また、どちらも"right+10 top-25%"のような相対的な位置指定が可能で、pxと%が使用できます。

at

初期値："center" 型：String

指定されたターゲット要素上のどの位置に配置するのかを、"horizontal vertical"(水平位置、垂直位置)の順で指定します。 位置指定の詳細はmyの項目を参照してください。

of

初期値：null
型：Selector or Element or jQuery or Event

例えば、"#top-menu"のように配置対照となる要素を指定します。 もし、eventが指定された場合は、pageX、pageYプロパティが使用されます。

offset 1.9非推奨
1.10削除

初期値：null
型：

(1.9でmyとatにマージされました)
Distance in pixels to adjust the position of the element horizontally and vertically, e.g. "10 50". A single value such as "50" will apply to both directions.

collision

型："flip" 初期値：String

配置された要素は、いずれかの方向にウィンドウをオーバーフローした場合、代わりの位置に移動します。 myとatと同様に、単一の値(例:"flip")かまたは, 水平と垂直のペア(例:"fit flip")のように値を指定します。

"flip"
ターゲットの反対側に要素を配置します。 より多く要素部分が表示される側に配置されます。
"fit"
ウインドウの端に配置されます。
"flipfit"1.9追加
最初にflipの配置処理が行われ、どちら側に表示するのかを決定し、 次にfitの配置処理が行われて、可能な限り要素の領域を表示するように配置されます。
"none"
collisionによる処理を行いません。
using

型：Function() 初期値：null

指定された場合、配置するためのプロパティ設定はこのコールバックに委譲されます。 このコールバックは2つのパラメータを受け取ります。

1つ目のパラメータ
topとleftの位置情報のハッシュ値で.css()、または.animate()に渡されるべきです。
2つ目のパラメータ
両方の要素の位置と寸法だけでなく、それらの相対的な位置への計算結果も提供します。 ターゲットと要素の両方にプロパティ:element、left、top、width、height、horizontal、vertical、importantが用意されます。 それぞれの要素に例えば、{horizontal:"center", vertical:"left", important:"horizontal" }のように、 位置について12の情報が与えられます。
within1.9追加

型：Selector or Element or jQuery
初期値：window

collisionが影響する範囲を指定します。 セレクタやjQueryオブジェクトの指定で複数の対象がある場合は、最初にマッチする対象が適用されます。

サンプル 

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>position demo</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
    <style>
    .positionDiv {
        position: absolute; width: 75px; height: 75px;
    }
    .red{background:red}
    .blue{background:blue}
    .green{background:green}
    .yellow{background:yellow}
    </style>
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
</head>
<body>

<div id="targetElement">
    <div class="positionDiv red" id="position1"></div>
    <div class="positionDiv blue" id="position2"></div>
    <div class="positionDiv green" id="position3"></div>
    <div class="positionDiv yellow" id="position4"></div>
</div>

<script>
$( "#position1" ).position({  //red
    my: "center",
    at: "center",
    of: "#targetElement"
});

$( "#position2" ).position({  //blue
    my: "left top",
    at: "left top",
    of: "#targetElement"
});

$( "#position3" ).position({  //green
    my: "right center",
    at: "right bottom",
    of: "#targetElement"
});

$( document ).mousemove(function( event ) {
    $( "#position4" ).position({ //yellow
        my: "left+3 bottom-3",
        of: event,
        collision: "fit"
    });
});
</script>

</body>
</html>

 Back to top

© 2010 - 2017 STUDIO KINGDOM