JqueryUI - position() 定位方法
在本章中，我们将看到 jqueryUi 的实用方法之一，position() 方法。 position() 方法允许您相对于另一个元素或鼠标事件定位一个元素。
jQuery UI 扩展了 jQuery 核心的 .position() 方法，使您可以像自然地向其他人描述元素一样描述您希望如何定位元素。 您不是在处理数字和数学，而是在处理有意义的单词（例如左和右）和关系。
语法
以下是 position() 方法的语法 −
.position( options )
其中 options 是 Object 类型，并提供指定如何定位包装集元素的信息。 下表列出了可与此方法一起使用的不同选项−
| 序号 | 选项 & 说明 |
|---|---|
| 1 | my
此选项指定包装元素（被重新定位的元素）的位置以与目标元素或位置对齐。 默认情况下，它的值为 center。 |
| 2 | at
此选项是 String 类型，指定要对齐重新定位的元素的目标元素的位置。 采用与 my 选项相同的值。 默认情况下，它的值为 center。 |
| 3 | of
这是 Selector 或 Element 或 jQuery 或 Event 类型。 它标识要根据其重新定位包装元素的目标元素，或包含用作目标位置的鼠标坐标的 Event 实例。 默认情况下，它的值为 null。 |
| 4 | collision
此选项是 String 类型，指定定位元素在任何方向超出窗口时应用的规则。 默认情况下，它的值为 flip。 |
| 5 | using
该选项是一个替代改变元素位置的内部函数的函数。 使用单个参数为每个包装元素调用，该参数由对象散列组成，left 和 top 属性设置为计算的目标位置，元素设置为函数上下文。默认情况下，它的值为 null。 |
| 6 | within
此选项是一个选择器或元素或 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.htm 中，并在支持 javascript 的标准浏览器中打开它，您应该会看到以下输出。 现在，您可以查看结果 −
In this example we see that −
Box 1 与 div 元素的 中心对齐（水平和垂直）。
Box 2 与 div 元素 的左上角（水平和垂直）对齐。
Box 3显示在窗口的右上角，但要留一些填充以使消息更加突出。 这是使用 my 或 at 的水平和垂直值完成的。
对于Box 4，of 值被设置为一个事件对象。 这是一个与指针相关联的事件，并随鼠标事件移动。
