div 크기 사용자가 조절 가능한 플러그인
안녕하세요.
고코더 입니다.
자바스크립트에서 사용자에게 특정 요소를
특히 div 를 자유로운 크기로 조절 할 수 있게 하는
기능을 소개하려고 합니다.
resizeble 이라는 UI 기능이빈다.
해당 기능은 다양한 곳에 사용이 가능합니다.
사용자 편의에 대시보드를 만들게 하는 곳에 특히
많이 쓰입니다.
그래서 오늘은 이 기능에 대해 다루려고 합니다.
먼저 제가 정리한 간단 예제를 보시겠습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <html> <head> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script> $(function(){ $("#resizeble").resizable(); }); </script> </head> <body> <div id="resizeble" class="ui-widget-content"> gocoder Resizeble </div> </body> </html> | cs |
gocoder_resizeble.html해당 페이지를 브라우저에서 실행하면
이렇게 오른쪽 아래에 크기 조절 창이 있고
이걸 사용하여 자유롭게 요소의
크기를 자유롭게 조절 가능합니다.
소스설명
▼ 3개의 참조 파일이 필요합니다.
jquery-ui.css 가 필요한 부분을 낯설어 하는 분들이 있겠네요
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
▼ 해당 함수를 원하는 요소에 실행합니다.
$("#resizeble").resizable();
▼ 그리고 .css 를 참조해야 하는 이야기
해당 "ui-widget-content"를
class 명에 넣어줘야 합니다.
<div id="resizeble" class="ui-widget-content">
gocoder Resizeble
</div>
마무리
실무에서도 많이 사용하는 함수이기에
한번 눈으로 손으로 익혀보세요
'IT_Developers > Javascript' 카테고리의 다른 글
| JavaScript - 문자열 치환 replace, replaceAll 사용하기 (0) | 2019.03.22 |
|---|---|
| JavaScript- 타이핑 애니메이션 / typewriterjs (7) | 2019.03.21 |
| jQuery - 색상코드 선택 플러그인 / Color Picker (0) | 2019.03.12 |
| JavaScript - 자바스크립트 파라미터 받아오기 / location.search (0) | 2019.03.08 |
| JavaScript - .js 안에서 jquery 사용하는 방법 (0) | 2019.03.08 |
댓글