jQuery를 UI 예 - 위치 (위치)
상대 창 문서 앵커 커서 / 마우스 및 포지셔닝 부재의 다른 요소.
더에 대한 자세한 내용은 .position() 방법의 세부 사항은 API 문서를 참조하십시오 .position을 () .
기본 기능
사용 형태의 레이아웃 위치를 제어하거나 드래그 요소의 오프셋을 수정 위치된다. 주변의 부모 요소에 드래그하여 충돌 감지를 볼 수 있습니다.
<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
<메타 문자 집합 = "UTF-8">
<제목> jQuery를 UI 위치 (위치) - 기본 기능 </ 제목>
<링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css">
<스타일>
#parent {
폭 : 60 %;
높이 : 40px;
여백 : 10px 자동;
패딩 : 5px;
국경 : 1 픽셀 고체 # 777;
배경 색상 : # fbca93;
텍스트 정렬 : 센터;
}
.positionable {
위치 : 절대;
디스플레이 : 블록;
오른쪽 : 0;
바닥 : 0;
배경 색상 : # bcd5e6;
텍스트 정렬 : 센터;
}
# Positionable1 {
폭 : 75px;
높이 : 75px;
}
# Positionable2 {
폭 : 120 픽셀;
높이 : 40px;
}
선택, 입력 {
마진 왼쪽 : 15 픽셀;
}
</ 스타일>
<스크립트>
$ (함수 () {
위치 함수 () {
{($ ( ".positionable") .position
의 : $ ( "#parent"),
내 : $ .val ( "#my_horizontal") () + ""+ $ .val ( ""#my_vertical) ()
에서 : $ ( "#at_horizontal")) (.val () + ""+ $ ( ""#at_vertical) .val,
충돌 : $ ( "#collision_horizontal") .val () + ""+ $ ( "#collision_vertical") .val ()
});
}
$ ( ".positionable")에 .css ( "불투명도", 0.5);
$ ( "선택 입력") .bind ( "의 keyup 변경을 클릭", 위치);
.draggable $ ( "#parent"() {
드래그 : 위치
});
위치 ();
});
</ 스크립트>
</ 헤드>
<바디>
<사업부 아이디 = "부모">
<P>
이것은 부모 요소의 위치이다.
</ P>
</ DIV>
<사업부 클래스 = "위치 지정"ID = "positionable1">
<P>
위치로
</ P>
</ DIV>
<사업부 클래스 = "위치 지정"ID = "positionable2">
<P>
이 위치합니다
</ P>
</ DIV>
<사업부 스타일 = "패딩 : 20 픽셀; 여백 - 가기 : 75px;">
위치 ...
<사업부 스타일 = "패딩 바닥 : 20 픽셀;">
<B> 내 </ B>
<선택 한 id = "my_horizontal">
<옵션 값 = "왼쪽"> 왼쪽 </ 옵션>
<옵션 값 = "센터"> 센터 </ 옵션>
<= "오른쪽"옵션 값> 오른쪽 </ 옵션>
</ 선택>
<선택 한 id = "my_vertical">
<옵션 값 = "최고"> 위에 </ 옵션>
<옵션 값 = "센터"> 센터 </ 옵션>
<= "바닥"옵션 값> 하단 </ 옵션>
</ 선택>
</ DIV>
<사업부 스타일 = "패딩 바닥 : 20 픽셀;">
에서 <B> </ B>
<ID = "at_horizontal"를 선택>
<옵션 값 = "왼쪽"> 왼쪽 </ 옵션>
<옵션 값 = "센터"> 센터 </ 옵션>
<= "오른쪽"옵션 값> 오른쪽 </ 옵션>
</ 선택>
<선택 한 id = "at_vertical">
<옵션 값 = "최고"> 위에 </ 옵션>
<옵션 값 = "센터"> 센터 </ 옵션>
<= "바닥"옵션 값> 하단 </ 옵션>
</ 선택>
</ DIV>
<사업부 스타일 = "패딩 바닥 : 20 픽셀;">
<B> 충돌 사항 : </ b>
<선택 한 id = "collision_horizontal">
<= "플립"옵션 값> 플립 </ 옵션>
<옵션 값 = "적합"> 맞춤 </ 옵션>
<= "flipfit"옵션 값> flipfit </ 옵션>
<옵션 값 = "없음"> 없음 </ 옵션>
</ 선택>
<선택 한 id = "collision_vertical">
<= "플립"옵션 값> 플립 </ 옵션>
<옵션 값 = "적합"> 맞춤 </ 옵션>
<= "flipfit"옵션 값> flipfit </ 옵션>
<옵션 값 = "없음"> 없음 </ 옵션>
</ 선택>
</ DIV>
</ DIV>
</ BODY>
</ HTML>
이미지 사이클
사진 브라우저 프로토 타입, 각각 왼쪽, 중앙, 오른쪽 사진 다음주기와 위치를 사용하여. 이미지를 통해 순환 왼쪽 또는 오른쪽 클릭의 이미지를 통해 순환 상단에 링크 또는 이미지를 사용합니다. 창 크기를 조정할 때, 이미지를 재 위치합니다.
<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
<메타 문자 집합 = "UTF-8">
<제목> jQuery를 UI 위치 (위치) - 이미지 순환 </ 제목>
<링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css">
<스타일>
몸 {
여백 : 0;
}
#container {
오버 플로우 : 숨겨진;
위치 : 상대;
높이 : 400 픽셀;
}
IMG {
위치 : 절대;
}
</ 스타일>
<스크립트>
$ (함수 () {
// 재구성이 플러그인 방식 = 함수 (사용) {$ .fn.left 제거 수단
{(this.position 반환
내 "오른쪽 중간"
에서 "25 중간 + 왼쪽",
의 "#container"
충돌 : "없음"
사용 : 사용
});
};
(사용) $ .fn.right = 기능 {
{(this.position 반환
내 "중간 왼쪽",
에서 "오른쪽-25 중간"
의 "#container"
충돌 : "없음"
사용 : 사용
});
};
$ .fn.center = 기능 (사용) {
{(this.position 반환
내 "센터 중"
에서 "센터 중"
의 "#container"
사용 : 사용
});
};
$ ( "IMG : EQ (0)") .left ();
$ ( "IMG : 당량 (1)") .center ();
$ ( "IMG : 당량 (2)") 됐지 ();
기능 애니메이션 (에) {
$ (이) .stop (에) (참, 거짓) .animate;
}
{다음 (이벤트)를 작동
에서는 event.preventDefault ();
$ ( "IMG : EQ (2)") .center (애니메이션)
$ ( "IMG : EQ (1)") .left (애니메이션)
. $ ( "IMG : EQ (0)") 됐지 () appendTo ( "#container");
}
{이전 (이벤트)를 작동
에서는 event.preventDefault ();
$ ( "IMG : EQ (0)") .center (애니메이션)
$ ( "IMG : EQ (1)") 됐지 (애니메이션)
. $ ( "IMG : 당량 (2)") .left () prependTo ( "#container");
}
$ ( "# 이전") .click (이전);
$ ( "# 다음") .click (다음)
$ ( "IMG") .click (함수 (이벤트) {
$ ( "IMG")있는 .index (이) === 0 이전 (이벤트) : 다음 (이벤트);?
});
$ (창) .resize (함수 () {
$ ( "IMG : EQ (0)") .left (애니메이션)
$ ( "IMG : EQ (1)") .center (애니메이션)
$ ( "IMG : EQ (2)") 됐지 (애니메이션)
});
});
</ 스크립트>
</ 헤드>
<바디>
<사업부 아이디 = "컨테이너">
<IMG SRC = "../ WP - 콘텐츠 / 업로드 / 2014/03 / earth.jpg"너비 = "458"높이 = "308"고도 = "지구">
<IMG SRC = "../ WP - 콘텐츠 / 업로드 / 2014/03 / flight.jpg"너비 = "512"높이 = "307"고도 = "비행">
<IMG SRC = "../ WP - 콘텐츠 / 업로드 / 2014/03 / rocket.jpg"너비 = "300"높이 = "353"고도 = "로켓">
에 <a id="previous"보기 </a> </a>에
으로 <a id="next"보기 </a> </a>에
</ DIV>
</ BODY>
</ HTML>