jQuery UI - 位置

本章我們將介紹 jQuery UI 的一個實用方法：`position()` 方法。`position()` 方法允許您相對於另一個元素或滑鼠事件來定位元素。

jQuery UI 擴充套件了 jQuery 核心中的 `.position()` 方法，使您可以像自然地向他人描述一樣描述如何定位元素。您無需使用數字和數學運算，而是使用有意義的詞語（例如 left 和 right）和關係。

語法

`position()` 方法的語法如下：

.position( options )

其中 `options` 為 Object 型別，提供指定如何定位包裝集元素的資訊。下表列出了可與此方法一起使用的不同 `options`：

序號	選項及描述
1	my 此選項指定要與目標元素或位置對齊的包裝元素（正在重新定位的元素）的位置。預設值為 center。選項 - my 此選項指定要與目標元素或位置對齊的包裝元素（正在重新定位的元素）的位置。預設值為 center。使用兩個值指定位置：`top`、`left`、`bottom`、`right` 和 `center`，用空格字元分隔，其中第一個值為水平值，第二個值為垂直值。指定單個值是視為水平還是垂直取決於您使用的值（例如，`top` 視為垂直，而 `right` 為水平）。示例 top, or bottom right.
2	at 此選項為 String 型別，指定要針對其對齊重新定位元素的目標元素的位置。採用與 `my` 選項相同的取值。預設值為 center。選項 - at 此選項為 String 型別，指定要針對其對齊重新定位元素的目標元素的位置。採用與 `my` 選項相同的取值。預設值為 center。示例 "right", or "left center"
3	of 此選項為 Selector、Element、jQuery 或 Event 型別。它標識要針對其重新定位包裝元素的目標元素，或包含滑鼠座標的 Event 例項，用作目標位置。預設值為 null。選項 - of 此選項為 Selector、Element、jQuery 或 Event 型別。它標識要針對其重新定位包裝元素的目標元素，或包含滑鼠座標的 Event 例項，用作目標位置。預設值為 null。示例 #top-menu
4	collision 此選項為 String 型別，指定當定位元素在任何方向上超出視窗時要應用的規則。預設值為 flip。選項 - collision 此選項為 String 型別，指定當定位元素在任何方向上超出視窗時要應用的規則。預設值為 flip。接受以下兩個值（水平後跟垂直）： flip - 將元素翻轉到相對側，並再次執行碰撞檢測以進行擬合。如果兩側均不適合，則使用中心作為後備。 fit - 保持元素在所需方向，但調整位置以使其適合。 flipfit - 首先應用翻轉邏輯，將元素放置在允許更多元素可見的一側。然後應用擬合邏輯，以確保儘可能多的元素可見。 none - 停用碰撞檢測。如果指定單個值，則它應用於兩個方向。示例 "flip", "fit", "fit flip", "fit none"
5	using 此選項是一個函式，它替換更改元素位置的內部函式。針對每個包裝元素呼叫，使用一個引數，該引數包含一個物件雜湊，其中 `left` 和 `top` 屬性設定為計算出的目標位置，並將元素設定為函式上下文。預設值為 null。選項 - using 此選項是一個函式，它替換更改元素位置的內部函式。針對每個包裝元素呼叫，使用一個引數，該引數包含一個物件雜湊，其中 `left` 和 `top` 屬性設定為計算出的目標位置，並將元素設定為函式上下文。預設值為 null。示例 {horizontal: "center", vertical: "left", important: "horizontal" }
6	within 此選項為 Selector、Element 或 jQuery 元素，允許您指定用作碰撞檢測邊界框的元素。如果您需要將定位元素包含在頁面的特定部分內，這將非常有用。預設值為 window。選項 - within 此選項為 Selector、Element 或 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>

讓我們將以上程式碼儲存在一個名為 **positionmethodexample.htm** 的 HTML 檔案中，並在支援 JavaScript 的標準瀏覽器中開啟它，您應該看到以下輸出。現在，您可以嘗試修改結果：

在這個例子中，我們看到：

`Box 1` 與 `div` 元素的中心（水平和垂直）對齊。
`Box 2` 與 `div` 元素的左上角（水平和垂直）對齊。
`Box 3` 顯示在視窗的右上角，但留出一些填充，以便訊息更突出。這是使用 `my` 或 `at` 的水平和垂直值完成的。
對於 `Box 4`，`of` 值設定為事件物件。這是一個與指標關聯的事件，並隨滑鼠事件移動。

列印頁面

序號	選項及描述
1	my 此選項指定要與目標元素或位置對齊的包裝元素（正在重新定位的元素）的位置。預設值為 center。選項 - my 此選項指定要與目標元素或位置對齊的包裝元素（正在重新定位的元素）的位置。預設值為 center。使用兩個值指定位置：`top`、`left`、`bottom`、`right` 和 `center`，用空格字元分隔，其中第一個值為水平值，第二個值為垂直值。指定單個值是視為水平還是垂直取決於您使用的值（例如，`top` 視為垂直，而 `right` 為水平）。示例 top, or bottom right.
2	at 此選項為 String 型別，指定要針對其對齊重新定位元素的目標元素的位置。採用與 `my` 選項相同的取值。預設值為 center。選項 - at 此選項為 String 型別，指定要針對其對齊重新定位元素的目標元素的位置。採用與 `my` 選項相同的取值。預設值為 center。示例 "right", or "left center"
3	of 此選項為 Selector、Element、jQuery 或 Event 型別。它標識要針對其重新定位包裝元素的目標元素，或包含滑鼠座標的 Event 例項，用作目標位置。預設值為 null。選項 - of 此選項為 Selector、Element、jQuery 或 Event 型別。它標識要針對其重新定位包裝元素的目標元素，或包含滑鼠座標的 Event 例項，用作目標位置。預設值為 null。示例 #top-menu
4	collision 此選項為 String 型別，指定當定位元素在任何方向上超出視窗時要應用的規則。預設值為 flip。選項 - collision 此選項為 String 型別，指定當定位元素在任何方向上超出視窗時要應用的規則。預設值為 flip。接受以下兩個值（水平後跟垂直）： flip - 將元素翻轉到相對側，並再次執行碰撞檢測以進行擬合。如果兩側均不適合，則使用中心作為後備。 fit - 保持元素在所需方向，但調整位置以使其適合。 flipfit - 首先應用翻轉邏輯，將元素放置在允許更多元素可見的一側。然後應用擬合邏輯，以確保儘可能多的元素可見。 none - 停用碰撞檢測。如果指定單個值，則它應用於兩個方向。示例 "flip", "fit", "fit flip", "fit none"
5	using 此選項是一個函式，它替換更改元素位置的內部函式。針對每個包裝元素呼叫，使用一個引數，該引數包含一個物件雜湊，其中 `left` 和 `top` 屬性設定為計算出的目標位置，並將元素設定為函式上下文。預設值為 null。選項 - using 此選項是一個函式，它替換更改元素位置的內部函式。針對每個包裝元素呼叫，使用一個引數，該引數包含一個物件雜湊，其中 `left` 和 `top` 屬性設定為計算出的目標位置，並將元素設定為函式上下文。預設值為 null。示例 {horizontal: "center", vertical: "left", important: "horizontal" }
6	within 此選項為 Selector、Element 或 jQuery 元素，允許您指定用作碰撞檢測邊界框的元素。如果您需要將定位元素包含在頁面的特定部分內，這將非常有用。預設值為 window。選項 - within 此選項為 Selector、Element 或 jQuery 元素，允許您指定用作碰撞檢測邊界框的元素。如果您需要將定位元素包含在頁面的特定部分內，這將非常有用。預設值為 window。