최고의 jQuery를 UI 인스턴스 - 줌 (크기 조정) 튜토리얼 2024년, 이 튜토리얼에서는 기본 기능,생기,줌 영역을 제한,지연 시작,조수,최대 / 최소 크기,가로 세로 비율을 유지,그리드에 스냅,동기 줌,텍스트 상자,시각적 피드백,를 배울 수 있습니다.
소자의 크기를 변경하는 마우스.
크기 재조정 상호 작용에 대한 자세한 내용은 API 문서를 참조하십시오 크기 조정 위젯합니다 (크기 조정 위젯을) .
모든 DOM 요소의 크기 조정 기능을 활성화합니다. 원하는 너비 또는 높이에 대한 권리 또는 아래쪽 테두리에 마우스를 드래그합니다.
<! 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"> <스타일> #resizable {폭 : 150 픽셀, 높이 150 픽셀, 패딩 : 0.5em;} #resizable H3 {텍스트 정렬 : 센터; 여백 : 0;} </ 스타일> <스크립트> $ (함수 () { $ ( "#resizable") .resizable (); }); </ 스크립트> </ 헤드> <바디> <사업부 아이디 = "크기 조정"클래스 = "UI 위젯 콘텐츠"> <H3 클래스 = "UI 위젯 헤더"> 줌 (크기 조정) </ H3> </ DIV> </ BODY> </ HTML>
를 사용하여 animate
옵션 (부울) 애니메이션의 동작을 확장 할 수 있습니다. 이 옵션이 TRUE로 설정되면 원하는 위치로 드래그 윤곽은 소자의 크기를 조정할 때 움직이는 드래그 멈춘다.
<! 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"> <스타일> #resizable {폭 : 150 픽셀, 높이 150 픽셀, 패딩 : 0.5em;} #resizable H3 {텍스트 정렬 : 센터; 여백 : 0;} .ui-크기 조정 헬퍼 {국경 : 1 픽셀 점선 회색;} </ 스타일> <스크립트> $ (함수 () { {(.resizable $ ( "#resizable") 애니메이션 : 사실 }); }); </ 스크립트> </ 헤드> <바디> <사업부 아이디 = "크기 조정"클래스 = "UI 위젯 콘텐츠"> <H3 클래스 = "UI 위젯 헤더"> 애니메이션 </ H3> </ DIV> </ BODY> </ HTML>
정의 스케일링 경계. 사용 containment
부모 DOM 요소 또는 같은 jQuery를 선택, 지정 옵션을 '문서를.'.
<! 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"> <스타일> #container {폭 : 300 픽셀, 높이 300 픽셀;} #container의 H3 {텍스트 정렬 : 센터; 여백 : 0; 마진 - 하단 : 10px;} #resizable {배경 위치 : 상단 왼쪽, 폭 : 150 픽셀, 높이 150 픽셀을} #resizable, #container {패딩 : 0.5em;} </ 스타일> <스크립트> $ (함수 () { {(.resizable $ ( "#resizable") 봉쇄 "#container" }); }); </ 스크립트> </ 헤드> <바디> <사업부 아이디 = "컨테이너"클래스 = "UI 위젯 콘텐츠"> <H3 클래스 = "UI 위젯 헤더"> 제한 </ H3> <사업부 아이디 = "크기 조정"클래스 = "UI 상태 활성"> <H3 클래스 = "UI 위젯 헤더"> 줌 (크기 조정) </ H3> </ DIV> </ DIV> </ BODY> </ HTML>
으로 delay
지연 (밀리 초)는 스케일링 옵션을 시작합니다. 으로 distance
옵션을 누를 때와 스케일링을 허용하기 전에 지정된 픽셀에 커서를 끕니다.
<! 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"> <스타일> #resizable, #의 resizable2 {폭 : 150 픽셀, 높이 150 픽셀, 패딩 : 0.5em;} #resizable H3, #의 resizable2의 H3 {텍스트 정렬 : 센터; 여백 : 0;} </ 스타일> <스크립트> $ (함수 () { {(.resizable $ ( "#resizable") 지연 : 1000 }); $ ( "# Resizable2") .resizable ({ 거리 : 40 }); }); </ 스크립트> </ 헤드> <바디> <H3 클래스 = "문서"> 시간 지연 (밀리 초) : </ H3> <사업부 아이디 = "크기 조정"클래스 = "UI 위젯 콘텐츠"> <H3 클래스 = "UI 위젯 헤더"> 시간 </ H3> </ DIV> <H3 클래스 = "문서"> 거리 지연 (픽셀) : </ H3> <사업부 아이디 = "resizable2"클래스 = "UI 위젯 콘텐츠"> <H3 클래스 = "UI 위젯 헤더"> 거리 </ H3> </ DIV> </ BODY> </ HTML>
설정에 따라 helper
CSS 클래스에 옵션을 확대 할 경우에만 형상 요소를 표시합니다.
<! 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"> <스타일> #resizable {폭 : 150 픽셀, 높이 150 픽셀, 패딩 : 0.5em;} #resizable H3 {텍스트 정렬 : 센터; 여백 : 0;} .ui-크기 조정 헬퍼 {국경 : 2 픽셀 점 # 00F;} </ 스타일> <스크립트> $ (함수 () { {(.resizable $ ( "#resizable") 도우미 : "UI-크기 조정 도우미" }); }); </ 스크립트> </ 헤드> <바디> <사업부 아이디 = "크기 조정"클래스 = "UI 위젯 콘텐츠"> <H3 클래스 = "UI 위젯 헤더"> 지원 </ H3> </ DIV> </ BODY> </ HTML>
사용 maxHeight
, maxWidth
, minHeight
과 minWidth
옵션은 최대 또는 최소 요소 크기 조정이 가능한 높이 또는 폭을 제한한다.
<! 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"> <스타일> #resizable {폭 : 200 픽셀, 높이 150 픽셀; 패딩 : 5px;} #resizable H3 {텍스트 정렬 : 센터; 여백 : 0;} </ 스타일> <스크립트> $ (함수 () { {(.resizable $ ( "#resizable") 의 maxHeight : 250, 의 maxWidth : (350) 의 minHeight : 150, 의 minWidth : 200 }); }); </ 스크립트> </ 헤드> <바디> <사업부 아이디 = "크기 조정"클래스 = "UI 위젯 콘텐츠"> <H3 클래스 = "UI 위젯 헤더"> 확대 / 축소 </ H3> </ DIV> </ BODY> </ HTML>
현재의 종횡비를 유지하거나 종횡비 스케일링 새로운 제한을 설정한다. 설정 aspectRatio
옵션은 사실이며, 선택적으로 (예를 들어, 4/3 위해) 새로운 속도를 제공합니다.
<! 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"> <스타일> #resizable {폭 : 160 픽셀, 높이 : 90 픽셀; 패딩 : 0.5em;} #resizable H3 {텍스트 정렬 : 센터; 여백 : 0;} </ 스타일> <스크립트> $ (함수 () { {(.resizable $ ( "#resizable") aspectRatio : 16/9 }); }); </ 스크립트> </ 헤드> <바디> <사업부 아이디 = "크기 조정"클래스 = "UI 위젯 콘텐츠"> <H3 클래스 = "UI 위젯 헤더"> 유지 종횡비 </ H3> </ DIV> </ BODY> </ HTML>
크기 조정 요소는 그리드에 정렬됩니다. 으로 grid
크기 옵션 격자 세포 (픽셀 높이 및 너비)을 설정합니다.
<! 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"> <스타일> #resizable {폭 : 150 픽셀, 높이 150 픽셀, 패딩 : 0.5em;} #resizable H3 {텍스트 정렬 : 센터; 여백 : 0;} </ 스타일> <스크립트> $ (함수 () { {(.resizable $ ( "#resizable") 그리드 : 50 }); }); </ 스크립트> </ 헤드> <바디> <사업부 아이디 = "크기 조정"클래스 = "UI 위젯 콘텐츠"> <H3 클래스 = "UI 위젯 헤더"> 그리드 </ H3> </ DIV> </ BODY> </ HTML>
가장자리의 요소를 클릭하고 드래그하여 동시에 여러 요소의 크기를 조정합니다. 에 alsoResize
옵션은 공유 선택기를 통과했다.
<! 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"> <스타일> #resizable {배경 위치 : 상단 왼쪽;} #resizable, #also {폭 : 150 픽셀, 높이 120 픽셀, 패딩 : 0.5em;} #resizable H3, H3 #also {텍스트 정렬 : 센터; 여백 : 0;} #also {마진 - 맨 : 1em;} </ 스타일> <스크립트> $ (함수 () { {(.resizable $ ( "#resizable") alsoResize "#also" }); $ ( "#also")를 .resizable (); }); </ 스크립트> </ 헤드> <바디> <사업부 아이디 = "크기 조정"클래스 = "UI 위젯 헤더"> <H3 클래스 = "UI 상태 활성"> 확대 </ H3> </ DIV> <사업부 아이디 = "또한"클래스 = "UI 위젯 콘텐츠"> <H3 클래스 = "UI 위젯 헤더"> 줌 동기화 </ H3> </ 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"> <스타일> .ui-크기 조정 - 자체 { 하단 : 17px; } </ 스타일> <스크립트> $ (함수 () { {(.resizable $ ( "#resizable") 처리 : "그 자체" }); }); </ 스크립트> </ 헤드> <바디> <텍스트 영역 아이디 = "크기 조정"행 = "5"COLS = "20"> </ 텍스트 영역> </ BODY> </ HTML>
이 설정의 ghost
옵션 것은 사실, 소자는 확대 대신 실제 표시 소자 중 반투명으로 표시 될 수있다.
<! 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"> <스타일> #resizable {폭 : 150 픽셀, 높이 150 픽셀, 패딩 : 0.5em;} #resizable H3 {텍스트 정렬 : 센터; 여백 : 0;} .ui-크기 조정 - 유령 {국경 : 1 픽셀 점선 회색;} </ 스타일> <스크립트> $ (함수 () { {(.resizable $ ( "#resizable") 유령 : 사실 }); }); </ 스크립트> </ 헤드> <바디> <사업부 아이디 = "크기 조정"클래스 = "UI 위젯 콘텐츠"> <H3 클래스 = "UI 위젯 헤더"> 고스트 </ H3> </ DIV> </ BODY> </ HTML>