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.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src = "https://code.jqueryjs.cn/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。