jQuery UI API - .position() · W3School jQuery UI 教程

# jQuery UI API - .position() ## 所屬類別 [方法重載（Method Overrides）](ref-overrides.html) | [方法（Methods）](ref-methods.html) | [實用工具（Utilities）](ref-utilities.html) ## 用法 **描述：**相對另一個元素定位一個元素。 **返回：**[jQuery](//api.jquery.com/Types/#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/css-position.html) 方法。如果 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> ```