JqueryUI - 位置( Position)
在本章中，我们将看到jqueryUi的一种实用方法，即position()方法。 position()方法允许您相对于另一个元素或鼠标事件定位元素。
jQuery UI以一种方式从jQuery核心扩展.position（）方法，这种方式可以让你描述你想要如何定位元素，就像你自然地将它描述给另一个人一样。 您可以使用有意义的单词（例如左右）和关系，而不是使用数字和数学。
语法 (Syntax)
以下是position()方法的语法 -
.position( options )
其中options是Object类型，并提供指定如何定位包装集的元素的信息。 下表列出了可与此方法一起使用的不同options -
| Sr.No. | 选项和说明 |
|---|---|
| 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 此选项是Selector或Element或jQuery元素，允许您指定要用作碰撞检测边界框的元素。 如果您需要在页面的特定部分中包含定位元素，这可以派上用场。 默认情况下，其值为window 。 |
例子 (Example)
以下示例演示了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的标准浏览器中打开它，您还必须看到以下输出。 现在，你可以玩结果 -
新页面打开在这个例子中我们看到 -
Box 1对准div元件的中心（水平和垂直）。
Box 2与div元素的左上（水平和垂直）对齐。
Box 3显示在窗口的右上角，但留下一些填充，以便消息更突出。 这是使用my或at的水平和垂直值完成的。
对于Box 4 ，将值设置为事件对象。 这是与指针关联的事件，随鼠标事件一起移动。
