jQuery UI API - .position()

所屬類別

方法重載（Method Overrides） | 方法（Methods） | 實(shí)用工具（Utilities）

用法

描述：相對(duì)另一個(gè)元素定位一個(gè)元素。

返回：jQuery

版本新增：1.8

.position( options )

參數(shù) 類型 描述
options Object
  • my（默認(rèn)值："center"）
    類型：String
    描述：定義被定位元素上對(duì)準(zhǔn)目標(biāo)元素的位置："horizontal vertical" 對(duì)齊方式。一個(gè)單一的值，比如 "right" 將規(guī)范為 "right center"，"top" 將規(guī)范為 "center top"（下面的 CSS 公約）?？山邮艿乃街担?left"、"center"、"right"?？山邮艿拇怪敝担?top"、"center"、"bottom"。例如，"left top" 或 "center center"。每個(gè)緯度也可以包含偏移，以像素計(jì)或以百分比計(jì)，例如 "right+10 top-25%"。百分比偏移是相對(duì)于被定位的元素。
  • at（默認(rèn)值："center"）
    類型：String
    描述：定義目標(biāo)元素上對(duì)準(zhǔn)被定位元素的位置： "horizontal vertical" 對(duì)齊方式。如需了解更多細(xì)節(jié)請(qǐng)查看 my 選項(xiàng)上的可能值。百分比偏移是相對(duì)于目標(biāo)元素。
  • of（默認(rèn)值：null）
    類型：Selector 或 Element 或 jQuery 或 Event
    描述：要定位的元素。如果您提供一個(gè)選擇器（Selector）或 jQuery 對(duì)象，將使用第一個(gè)匹配元素。如果您提供一個(gè)事件（Event）對(duì)象，將使用 pageX 和 pageY 屬性，例如 "#top-menu"。
  • collision（默認(rèn)值："flip"）
    類型：String
    描述：當(dāng)被定位元素在某些方向上溢出窗口，則移動(dòng)它到另一個(gè)位置。與 my 和 at 選項(xiàng)相似，該選項(xiàng)會(huì)接受一個(gè)單一的值或一對(duì) horizontal/vertical 值。例如："flip"、"fit"、"fit flip"、"fit none"。
    • "flip"：翻轉(zhuǎn)元素到目標(biāo)的相對(duì)一邊，再次運(yùn)行 collision 檢測(cè)一遍查看元素是否適合。無(wú)論哪一邊允許更多的元素可見，則使用那一邊。
    • "fit"：把元素從窗口的邊緣移開。
    • "flipfit"：首先應(yīng)用 flip 邏輯，把元素放置在允許更多元素可見的那一邊。然后應(yīng)用 fit 邏輯，確保盡可能多的元素可見。
    • "none"：不應(yīng)用任何 collision 檢測(cè)。
  • using（默認(rèn)值：null）
    類型：Function()
    描述：當(dāng)指定了該選項(xiàng)，實(shí)際屬性設(shè)置則委托給該回調(diào)。接受兩個(gè)參數(shù)：第一個(gè)是位置 top 和 left 值的哈希，可被轉(zhuǎn)發(fā)到 .css() 或 .animate()；第二個(gè)提供了關(guān)于兩個(gè)元素的位置和尺寸的反饋，同時(shí)也計(jì)算它們的相對(duì)位置。target 和 element 都有下列屬性：element、left、top、width、height。另外，還有 horizontal、vertical 和 important，提供了十二個(gè)可能的方向，如 { horizontal: "center", vertical: "left", important: "horizontal" }。
  • within（默認(rèn)值：window）
    類型：Selector 或 Element 或 jQuery
    描述：元素定位為 within，會(huì)影響 collision 檢測(cè)。如果您提供了一個(gè)選擇器（Selector）或 jQuery 對(duì)象，則使用第一個(gè)匹配的元素。

jQuery UI .position() 方法允許您相對(duì)窗體（window）、文檔、另一個(gè)元素或指針（cursor）/鼠標(biāo)（mouse）來(lái)定位一個(gè)元素，無(wú)需考慮相對(duì)父元素的偏移（offset）。

注釋：jQuery UI 不支持定位隱藏元素。

這是一個(gè)獨(dú)立的 jQuery 插件，且對(duì)其他 jQuery UI 組件沒(méi)有依賴關(guān)系。

該插件擴(kuò)展自 jQuery 內(nèi)置的 .position() 方法。如果 jQuery UI 未加載，調(diào)用 .position() 方法不會(huì)直接失敗，因?yàn)樵摲椒ㄔ?jQuery 中存在。但是不會(huì)發(fā)生預(yù)期的行為。

實(shí)例

一個(gè)簡(jiǎn)單的 jQuery UI 定位（Position）實(shí)例。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>.position() 實(shí)例</title>
  <link rel="stylesheet"  rel="external nofollow" target="_blank" >
  <style>
  .positionDiv {
    position: absolute;
    width: 75px;
    height: 75px;
    background: green;
  }
  </style>
  <script src="http://code.jquery.com/jquery-1.10.2.js" rel="external nofollow" ></script>
  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" ></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>

查看演示