jQuery UI API - .position()

所屬類別

方法重載（Method Overrides） | 方法（Methods） | 實用工具（Utilities）

用法

描述：相對另一個元素定位一個元素。

返回：jQuery

版本新增：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 對象，則使用第一個匹配的元素。

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>