位置(Position)
在本章中,我们将看到jqueryUi的一种实用方法,即position()方法。 position()方法允许您相对于另一个元素或鼠标事件定位元素。
jQuery UI以一种方式从jQuery核心扩展.position()方法,这种方式可以让你描述你想要如何定位元素,就像你自然地将它描述给另一个人一样。 您可以使用有意义的单词(例如左右)和关系,而不是使用数字和数学。
语法 (Syntax)
以下是position()方法的语法 -
.position( options )
其中options是Object类型,并提供指定如何定位包装集的元素的信息。 下表列出了可与此方法一起使用的不同options -
Sr.No. | 选项和说明 |
---|---|
1 | my 此选项指定包装元素(重新定位的元素)的位置,以与目标元素或位置对齐。 默认情况下,其值为center 。 Option - my 此选项指定包装元素(重新定位的元素)的位置,以与目标元素或位置对齐。 默认情况下,其值为center 。 其中两个值用于指定位置: top, left, bottom, right, and center ,由空格字符分隔,其中第一个值是horizontal值,第二个值是vertical 。 指定的单个值是horizontal还是vertical取决于您使用的值(例如, top是垂直的,而right是水平的)。 Example
|
2 | at 此选项的类型为String,并指定目标元素的位置,以便与重新定位的元素对齐。 采用与my选项相同的值。 默认情况下,其值为center 。 Option - at 此选项的类型为String,并指定目标元素的位置,以便与重新定位的元素对齐。 采用与my选项相同的值。 默认情况下,其值为center 。 Example
|
3 | of 这是Selector或Element类型或jQuery或Event类型。 它标识要重新定位包装元素的目标元素,或包含用作目标位置的鼠标坐标的Event实例。 默认情况下,其值为null 。 Option - of 这是Selector或Element类型或jQuery或Event类型。 它标识要重新定位包装元素的目标元素,或包含用作目标位置的鼠标坐标的Event实例。 默认情况下,其值为null 。 Example
|
4 | collision 此选项的类型为String,并指定当定位元素在任何方向上延伸到窗口之外时要应用的规则。 默认情况下,其值为flip 。 Option - collision 此选项的类型为String,并指定当定位元素在任何方向上延伸到窗口之外时要应用的规则。 默认情况下,其值为flip 。 接受以下两个(水平跟随垂直) -
如果指定了单个值,则它适用于两个方向。 Example
|
5 | using 此选项是替换更改元素位置的内部函数的函数。 使用单个参数调用每个包装元素,该参数由对象哈希组成, left和top属性设置为计算目标位置,元素设置为函数上下文。 默认情况下,其值为null 。 Option - using 此选项是替换更改元素位置的内部函数的函数。 使用单个参数调用每个包装元素,该参数由对象哈希组成, left和top属性设置为计算目标位置,元素设置为函数上下文。 默认情况下,其值为null 。 Example
|
6 | within 此选项是Selector或Element或jQuery元素,允许您指定要用作碰撞检测边界框的元素。 如果您需要在页面的特定部分中包含定位元素,这可以派上用场。 默认情况下,其值为window 。 Option - 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 ,将值设置为事件对象。 这是与指针关联的事件,随鼠标事件一起移动。