이미지 크기 드래그로 조절 - resizable()
1. 정의
- 이미지 혹은 텍스트 박스를 드래그를 이용하여 크기를 조절한다
- resizable()
2. 구문
- $(대상 요소).resizable({매개변수명: 값})
3. 주요 매개변수
1) aspectRatio
- 크기 조정시 종횡비 지정
- aspectRatio:2/3 이면 가로 세로 비율이 2:3을 유지하여 크기 지정
2) ghost/helper
- ghost : 투명 크기 조정 이미지 우효화
- helper : 크기 조정 시 표시할 대체 요소에 적용되는 스타일 클래스 지정
3) grid
- 기본은 연속적으로 사이즈를 조절하지만 grid를 지정함으로 지정된 단위의 요소 크기를 조절
- grid:[40,30] 가로 40px, 세로30px의 단위로 조정
2. 예
1) 이미지
- resizable() 제대로 작동을 안한다면 ?
: <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
위 부분을 추가
2) 텍스트
- 이미지와 비슷하다
- 그러나 텍스트는 콘텐츠가 영역에 벗어나지 않도록 'overflow:hidden' 처리한다
'Front-End > jQueryUI' 카테고리의 다른 글
| [jQueryUI] 드래그 드랍 정렬요소 제한하기 - sortable()[items, cancel] (0) | 2017.01.12 |
|---|---|
| [jQueryUI] 드래그를 이용한 데이터 정렬 - sortable() (0) | 2017.01.12 |
| [jQueryUI] 에니메이션 무효화 - $.fx.off() (0) | 2017.01.12 |
| [jQueryUI] 에니메이션 변화를 효과를 주며 지정 - Easings (0) | 2017.01.11 |
| [jQueryUI] 드래그엔드롭효과 - effect(), transfer (0) | 2017.01.10 |
리딩리드