'resizeble'에 해당되는 글 1건


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>




마무리


실무에서도 많이 사용하는 함수이기에
한번 눈으로 손으로 익혀보세요


댓글을 달아 주세요