jQueryのUIの例 - ロケーション（位置）
相対的なウィンドウ、ドキュメント、アンカー、カーソル/マウスおよび位置決め要素の他の要素。
詳細については.position()メソッドの詳細については、APIドキュメントを参照してください）（.positionを 。
デフォルトの機能
使用形態は、配置位置を制御する、またはドラッグ要素は、オフセットを修正するために配置されています。 衝突検出を確認するために、周囲の親要素にドラッグします。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル> jQueryのUIの場所（位置） - デフォルトの機能</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スタイル>
#parent {
幅：60％;
高さ：40ピクセル;
マージン：10pxの自動;
パディング：5pxの;
国境：1pxの固体＃777;
背景色：＃fbca93。
テキスト整列：センター;
}
{.positionable
位置：絶対;
表示：ブロック;
右：0;
ボトム：0;
背景色：＃bcd5e6。
テキスト整列：センター;
}
＃Positionable1 {
幅：75px;
高さ：75px;
}
＃Positionable2 {
幅：120ピクセル;
高さ：40ピクセル;
}
選択、入力{
余白左：15ピクセル;
}
</スタイル>
<スクリプト>
$（関数（）{
関数の位置（）{
{（$（ ".positionable」）.position
の：$（ "#parent"）、
私：$（ "#my_horizontal」）.val（）+" .val "+ $（" "#my_vertical）（）、
で：$（ "#at_horizontal"））（.val（）+ "" + $（ "" #at_vertical）.val、
衝突：$（ "#collision_horizontal」）.val（）+" "+ $（" "#collision_vertical）.val（）
}）;
}
$（ ".positionable」）の.css（「不透明度」、0.5）;
$（ "を選択し、入力"）.bind（ "からkeyupクリックして変更」、位置）。
.draggable $（ "#parent」）（{
ドラッグ：位置
}）;
位置（）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<DIVのID = "親">
<P>
これは親要素の場所です。
</ P>
</ DIV>
<DIVクラス= "に位置決め" ID = "positionable1">
<P>
位置に
</ P>
</ DIV>
<DIVクラス= "に位置決め" ID = "positionable2">
<P>
2位に
</ P>
</ DIV>
<DIVのスタイル= "パディング：20ピクセル;マージントップ：75px;">
場所...
<DIVのスタイル= "パディング底：20ピクセル;">
<B>私：</ b>の
<選択のid = "my_horizontal">
<オプション値= "左"> </ option>を左に
<オプション値= "センター">センター</オプション>
<オプション値= "右">右</オプション>
</選択>
<選択のid = "my_vertical">
<オプション値= "トップ">トップ</オプション>
<オプション値= "センター">センター</オプション>
<= "底"オプション値>底</オプション>
</選択>
</ DIV>
<DIVのスタイル= "パディング底：20ピクセル;">
<B>に：</ B>
<選択のid = "at_horizontal">
<オプション値= "左"> </ option>を左に
<オプション値= "センター">センター</オプション>
<オプション値= "右">右</オプション>
</選択>
<選択のid = "at_vertical">
<オプション値= "トップ">トップ</オプション>
<オプション値= "センター">センター</オプション>
<= "底"オプション値>底</オプション>
</選択>
</ DIV>
<DIVのスタイル= "パディング底：20ピクセル;">
<B>衝突：</ b>の
<選択のid = "collision_horizontal">
<オプション値= "フリップ">フリップ</オプション>
<オプション値= "フィット">フィット</オプション>
<= "flipfit「オプション値> flipfit </オプション>
<オプション値= "なし">なし</オプション>
</選択>
<選択のid = "collision_vertical">
<オプション値= "フリップ">フリップ</オプション>
<オプション値= "フィット">フィット</オプション>
<= "flipfit「オプション値> flipfit </オプション>
<オプション値= "なし">なし</オプション>
</選択>
</ DIV>
</ DIV>
</ BODY>
</ HTML>
イメージ・サイクル
フォトブラウザのプロトタイプ、それぞれ、左、中央、右の写真や、その後のサイクルなどの位置を使用して。 画像を順番に左または右クリックで画像、または画像を循環するために上部にあるリンクを使用してください。 ウィンドウのサイズが変更されたときに、画像を再配置することに注意してください。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル> jQueryのUIの場所（位置） - イメージ循環</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スタイル>
体{
マージン：0;
}
#container {
オーバーフロー：隠されました;
位置：相対;
高さ：400ピクセル;
}
IMG {
位置：絶対;
}
</スタイル>
<スクリプト>
$（関数（）{
//復興は、これらのプラグインの方法$ .fn.left =関数（使用）{の除去を意味します
リターンthis.position（{
私：「右中」、
時：「25ミドル+左」、
の：「#container」、
衝突：「なし」、
使用する：使用して
}）;
};
$ .fn.right =関数（使用）{
リターンthis.position（{
私：「中央を左」、
時：「右25ミドル」、
の：「#container」、
衝突：「なし」、
使用する：使用して
}）;
};
$ .fn.center =関数（使用）{
リターンthis.position（{
私：「中央ミドル」、
時：「中央ミドル」、
の：「#container」、
使用する：使用して
}）;
};
$（ "IMG：EQ（0）」）.LEFT（）;
$（ "IMG：EQ（1）」）.center（）;
$（ "IMG：EQ（2）」）.RIGHT（）;
機能のアニメーション（へ）{
$（この）.stop（真、偽）.animate（へ）;
}
機能次の（イベント）{
event.preventDefault（）;
$（ "IMG：EQ（2）」）.center（アニメーション）。
$（ "IMG：EQ（1）」）.LEFT（アニメーション）。
。$（ "IMG：EQ（0）」）.RIGHT（）appendTo（「#container"）;
}
関数前回（イベント）{
event.preventDefault（）;
$（ "IMG：EQ（0）」）.center（アニメーション）。
$（ "IMG：EQ（1）」）.RIGHT（アニメーション）。
。$（ "IMG：EQ（2）」）.LEFT（）prependTo（「#container"）;
}
$（ "#previous"）.click（前）。
$（ "#next"）.click（次へ）。
$（ "IMG"）.click（関数（イベント）{
$（ "IMG"）.INDEX（この）=== 0前回（イベント）：次の（イベント）;?
}）;
$（ウィンドウ）.resize（関数（）{
$（ "IMG：EQ（0）」）.LEFT（アニメーション）。
$（ "IMG：EQ（1）」）.center（アニメーション）。
$（ "IMG：EQ（2）」）.RIGHT（アニメーション）。
}）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<DIVのID = "コンテナ">
<IMG SRC = "../のwp-コンテンツ/アップロード/ 2014/03 / earth.jpg"幅= "458"高さ= "308" ALT = "地球">
<IMG SRC = "../のwp-コンテンツ/アップロード/ 2014/03 / flight.jpg"幅= "512"高さ= "307" ALT = "飛行">
<IMG SRC = "../のwp-コンテンツ/アップロード/ 2014/03 / rocket.jpg"幅= "300"高さ= "353" ALT = "ロケット">
<a id="previous" href="#"> A </a>の上
<a id="next" href="#"> A </a>のことで
</ DIV>
</ BODY>
</ HTML>