jQuery UI API - .position ()

ก่อนหน้านี้: jQuery UI API - .focus ()

ถัดไป: API jQuery UI - .disableSelection ()

หมวดหมู่

วิธีการบรรทุกเกินพิกัด (วิธีการแทนที่) | วิธีการ (วิธีการ) | ยูทิลิตี้ (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 对象，则使用第一个匹配的元素。

UI ที่ jQuery .position() วิธีการช่วยให้คุณในรูปแบบสัมพัทธ์ (หน้าต่าง) เอกสารหรือตัวชี้องค์ประกอบอื่น (เคอร์เซอร์) / เมาส์ (Mouse) เพื่อหาองค์ประกอบโดยไม่คำนึงถึงการชดเชยเมื่อเทียบกับองค์ประกอบหลัก (offset)

หมายเหตุ: jQuery UI ไม่สนับสนุนสถานที่ซ่อนองค์ประกอบ

นี้เป็นปลั๊กอิน jQuery อิสระและพึ่งพาส่วนประกอบอื่น ๆ ที่ jQuery UI ไม่มี

นามสกุล Plug-in จาก jQuery สร้าง .position () วิธีการ หาก jQuery UI ไม่โหลดโทร .position() วิธีการไม่เพียงล้มเหลวเพราะวิธีการที่มีอยู่ใน jQuery แต่ก็ไม่ได้คาดว่าจะเกิด

ตัวอย่าง

ง่ายแปล jQuery UI (ตำแหน่ง) ตัวอย่างเช่น

<! Doctype html>
<html lang = "th">
<head>
  <Meta charset = "UTF-8">
  <title> .position () ตัวอย่าง </ title>
  <link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <style>
  .positionDiv {
    position: absolute;
    ความกว้าง: 75px;
    ความสูง: 75px;
    พื้นหลัง: สีเขียว;
  }
  </ 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 ({
  ฉัน: "ศูนย์"
  ที่: "ศูนย์"
  ของ "#targetElement"
});
 
$ ( "# Position2") .position ({
  ฉัน: "บนซ้าย"
  ที่: "บนซ้าย"
  ของ "#targetElement"
});
 
$ ( "# Position3") .position ({
  ฉัน: "กลางขวา"
  ที่: "ด้านล่างขวา"
  ของ "#targetElement"
});
 
$ (เอกสาร) .mousemove (ฟังก์ชั่น (event) {
  $ ( "# Position4") .position ({
    ฉัน: "ซ้าย + 3 ล่าง 3"
    ของ: เหตุการณ์
    ชน: "พอดี"
  });
});
</ script>
 
</ body>
</ html>

ก่อนหน้านี้: jQuery UI API - .focus ()

ถัดไป: API jQuery UI - .disableSelection ()

jQuery UI หลักสูตร

jQuery UI กระทู้

jQuery UI ห้องสมุดองค์ประกอบ

jQuery UI คู่มืออ้างอิง

jQuery UI ตัวอย่าง

jQuery UI API - .position ()

หมวดหมู่

การใช้

ตัวอย่าง