Latest web development tutorials

jQuery UI API - .position ()

category

Method overloading (Method, Overrides) | method (in Methods) | utility (Utilities)

usage

Description: a positioning element relative to another element.

Returns: the jQuery

New version: 1.8

.position( options )

参数 类型 描述
options Object
  • my (默认值: "center"
    类型:String
    描述:定义被定位元素上对准目标元素的位置:"horizontal vertical" 对齐方式。一个单一的值,比如 "right" 将规范为 "right center","top" 将规范为 "center top"(下面的 CSS 公约)。可接受的水平值:"left"、"center"、"right"。可接受的垂直值:"top"、"center"、"bottom"。例如,"left top" 或 "center center"。每个纬度也可以包含偏移,以像素计或以百分比计,例如 "right+10 top-25%"。百分比偏移是相对于被定位的元素。
  • at (默认值: "center"
    类型:String
    描述:定义目标元素上对准被定位元素的位置: "horizontal vertical" 对齐方式。如需了解更多细节请查看 my 选项上的可能值。百分比偏移是相对于目标元素。
  • of (默认值: null
    类型:Selector 或 Element 或 jQuery 或 Event
    描述:要定位的元素。如果您提供一个选择器(Selector)或 jQuery 对象,将使用第一个匹配元素。如果您提供一个事件(Event)对象,将使用 pageX 和 pageY 属性,例如 "#top-menu"。
  • collision (默认值: "flip"
    类型:String
    描述:当被定位元素在某些方向上溢出窗口,则移动它到另一个位置。与 my 和 at 选项相似,该选项会接受一个单一的值或一对 horizontal/vertical 值。例如:"flip"、"fit"、"fit flip"、"fit none"。
    • "flip":翻转元素到目标的相对一边,再次运行 collision 检测一遍查看元素是否适合。无论哪一边允许更多的元素可见,则使用那一边。
    • "fit":把元素从窗口的边缘移开。
    • "flipfit":首先应用 flip 逻辑,把元素放置在允许更多元素可见的那一边。然后应用 fit 逻辑,确保尽可能多的元素可见。
    • "none":不应用任何 collision 检测。
  • using (默认值: null
    类型:Function()
    描述:当指定了该选项,实际属性设置则委托给该回调。接受两个参数:第一个是位置 top 和 left 值的哈希,可被转发到 .css() 或 .animate();第二个提供了关于两个元素的位置和尺寸的反馈,同时也计算它们的相对位置。target 和 element 都有下列属性:element、left、top、width、height。另外,还有 horizontal、vertical 和 important,提供了十二个可能的方向,如 { horizontal: "center", vertical: "left", important: "horizontal" }。
  • within (默认值: window
    类型:Selector 或 Element 或 jQuery
    描述:元素定位为 within,会影响 collision 检测。如果您提供了一个选择器(Selector)或 jQuery 对象,则使用第一个匹配的元素。

the UI the jQuery .position() method allows you to form a relative (window), a document, or another element pointer (cursor) / mouse (mouse) to locate an element, regardless of the offset relative to the parent element (offset).

Note: jQuery UI does not support location hidden element.

This is an independent jQuery plugin, and no dependencies to other jQuery UI components.

The plug-in extensions from jQuery built .position () method. If jQuery UI is not loaded, call .position() method does not simply fail, because the method exists in jQuery. But it is not expected behavior.

Examples

A simple jQuery UI localization (Position) instance.

<! Doctype html>
<Html lang = "en">
<Head>
  <Meta charset = "utf-8">
  <Title> .position () Examples </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Style>
  .positionDiv {
    position: absolute;
    width: 75px;
    height: 75px;
    background: green;
  }
  </ Style>
  <Script src = "// code.jquery.com/jquery-1.10.2.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
</ Head>
<Body>
 
<Div id = "targetElement">
  <Div class = "positionDiv" id = "position1"> </ div>
  <Div class = "positionDiv" id = "position2"> </ div>
  <Div class = "positionDiv" id = "position3"> </ div>
  <Div class = "positionDiv" id = "position4"> </ div>
</ Div>
 
<Script>
$ ( "# Position1") .position ({
  my: "center",
  at: "center",
  of: "#targetElement"
});
 
$ ( "# Position2") .position ({
  my: "left top",
  at: "left top",
  of: "#targetElement"
});
 
$ ( "# Position3") .position ({
  my: "right center",
  at: "right bottom",
  of: "#targetElement"
});
 
$ (Document) .mousemove (function (event) {
  $ ( "# Position4") .position ({
    my: "left + 3 bottom-3",
    of: event,
    collision: "fit"
  });
});
</ Script>
 
</ Body>
</ Html>