jquery位置函数/对象

Question

我在现在与 jquery 滑块相关的两个网站上看到了类似的代码

function reCenterButton() {
    $(".button").position({
        "my": "center center",
        "at": "center center",
        "of": $("#button-box")
    });
};

谁能告诉我位置函数对象中的名称/值对是什么意思

在这里看到http://jsfiddle.net/william/RSkpH/1/
在这里http://css-tricks.com/examples/ButtonMaker/

我在查找 position() 的文档时似乎找不到它，它是滑块功能的一部分吗？

Answer 1

这是 jQuery UI 1.8 中的新功能。您可以使用它进行快速定位。

用于相对于窗口、文档、特定元素或光标/鼠标定位任何小部件的实用脚本。

我的（字符串）

定义要定位的元素上的哪个位置与目标元素对齐：“水平垂直”对齐。诸如“right”之类的单个值将默认为“right center”，“top”将默认为“center top”（遵循 CSS 约定）。可接受的值：“top”、“center”、“bottom”、“left”、“right”。示例：“左上”或“居中”

在（字符串）

定义目标元素上的哪个位置对齐定位的元素：“水平垂直”对齐。诸如“right”之类的单个值将默认为“right center”，“top”将默认为“center top”（遵循 CSS 约定）。可接受的值：“top”、“center”、“bottom”、“left”、“right”。示例：“左上”或“居中”

的（选择器、元素、jQuery、事件）

要定位的元素。如果您提供选择器，将使用第一个匹配元素。如果您提供 jQuery 对象，将使用第一个元素。如果您提供事件对象，将使用 pageX 和 pageY 属性。示例：“#top-menu”

偏移量（字符串）

将这些左上角的值添加到计算的位置，例如。 “50 50”（左上角）“50”等单个值将应用于两者。

碰撞（字符串）

当定位的元素在某个方向溢出窗口时，将其移动到另一个位置。与 my 和 at 类似，它接受单个值或水平/垂直对，例如。 “翻转”、“适合”、“适合翻转”、“不适合”。

• 翻转到另一侧，然后再次运行碰撞检测以查看它是否适合。如果它不适合任何一个位置，则应该使用 center 选项作为后备选项。

• 适合，因此元素保持在所需的方向，但会重新定位以使其适合。

• 无不做碰撞检测。

使用（函数）

当指定时，实际的属性设置被委托给这个回调。接收单个参数，该参数是应设置位置的顶部和左侧值的哈希值。

更多信息

• jQuery - UI/API/1.8/Position

Answer 2

jQuery UI Position 提供了一种相对于窗口、文档或其他元素定位元素的方法。

关于选项：

• of：匹配元素（在其上调用 .position() - .button）的相对位置

• my：将用于被定位的元素的对齐规则 (.button)

• at：将用于目标元素的对齐规则 (#button-box)

因此，在您的示例中，元素 .button 将以元素 #button-box 为中心。

另一个例子：

$('#menu').position({
    my: 'left top',
    at: 'left bottom',
    of: '#selectMenu'
});

这可用于定位自定义下拉小部件。 #selectMenu 是“选择”，#menu 是单击选择时出现的选项列表。

这会将选项列表定位在选择的正下方。