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;"> 위치 ko. <사업부 스타일 = "패딩 바닥 : 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 = "ko/ WP - 콘텐츠 / 업로드 / 2014/03 / earth.jpg"너비 = "458"높이 = "308"고도 = "지구"> <IMG SRC = "ko/ WP - 콘텐츠 / 업로드 / 2014/03 / flight.jpg"너비 = "512"높이 = "307"고도 = "비행"> <IMG SRC = "ko/ WP - 콘텐츠 / 업로드 / 2014/03 / rocket.jpg"너비 = "300"높이 = "353"고도 = "로켓"> 에 <a id="previous"보기 </a> </a>에 으로 <a id="next"보기 </a> </a>에 </ DIV> </ BODY> </ HTML>