jQuery를 UI 인스턴스 - 줌 (크기 조정)
소자의 크기를 변경하는 마우스.
크기 재조정 상호 작용에 대한 자세한 내용은 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>