jQuery UI API - .position()

所属类别

方法重载(Method Overrides) | 方法(Methods) | 实用工具(Utilities)

用法

描述:相对另一个元素定位一个元素。

返回:jQuery

版本新增:1.8

.position( options )
参数 类型 描述
options Object

jQuery UI .position() 方法允许您相对窗体(window)、文档、另一个元素或指针(cursor)/鼠标(mouse)来定位一个元素,无需考虑相对父元素的偏移(offset)。

注释:jQuery UI 不支持定位隐藏元素。

这是一个独立的 jQuery 插件,且对其他 jQuery UI 组件没有依赖关系。

该插件扩展自 jQuery 内置的 .position() 方法。如果 jQuery UI 未加载,调用 .position() 方法不会直接失败,因为该方法在 jQuery 中存在。但是不会发生预期的行为。

实例

一个简单的 jQuery UI 定位(Position)实例。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>.position() 实例</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>