Latest web development tutorials

jQuery를 UI의 API - .position ()

범주

메소드 오버로딩 (방법, 오버라이드 (override)) | (메소드) 메소드 | 유틸리티 (유틸리티)

용법

설명 : 다른 요소에 배치 부재에 대하여.

반환 값 : 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() 메서드는 상대 (창)을 형성 할 수 있도록, 문서, 또는 다른 요소 포인터 (커서) / 마우스 (마우스) 부모 요소 (오프셋)에 관계없이 오프셋 상대의 요소를 찾습니다.

참고 : jQuery를 UI 위치 숨겨진 요소를 지원하지 않습니다.

이것은 독립적 인 jQuery 플러그인 및 기타 jQuery를 UI 구성 요소에 종속되지이다.

jQuery를에서 플러그인 확장 내장 .position () 메소드를. jQuery를 UI가로드되지 않은 경우, 전화 .position() 방법은 jQuery를에 존재하기 때문에, 방법은 단순히 실패하지 않습니다. 그러나 예상 된 동작하지 않습니다.

예

간단한 jQuery를 UI 현지화 (위치) 예. 

<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
  <메타 문자 집합 = "UTF-8">
  <제목> .position () 예 </ 제목>
  <링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <스타일>
  .positionDiv {
    위치 : 절대;
    폭 : 75px;
    높이 : 75px;
    배경 : 녹색;
  }
  </ 스타일>
  <스크립트 SRC = "// code.jquery.com/jquery-1.10.2.js"> </ script>
  <스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
</ 헤드>
<바디>
 
<사업부 아이디 = "targetElement">
  <사업부 클래스 = "positionDiv"ID = "position1"> </ DIV>
  <사업부 클래스 = "positionDiv"ID = "위치 2"> </ DIV>
  <사업부 클래스 = "positionDiv"ID = "position3"> </ DIV>
  <사업부 클래스 = "positionDiv"ID = "position4"> </ DIV>
</ DIV>
 
<스크립트>
$ ( "# Position1") .position ({
  내 "센터"
  에서 "센터"
  의 "#targetElement"
});
 
$ ( "# 자릿수 :") .position ({
  내 "상단 왼쪽",
  에서 "상단 왼쪽",
  의 "#targetElement"
});
 
$ ( "# Position3") .position ({
  내 "권리 센터"
  에서 "우측 하단"
  의 "#targetElement"
});
 
$ (문서) .mousemove (함수 (이벤트) {
  $ ( "# Position4") .position ({
    내 "3 + 왼쪽 하단 3",
    의 : 이벤트,
    충돌 "적합"
  });
});
</ 스크립트>
 
</ BODY>
</ HTML>