태그 자료실

회원로그인

무료회원가입 보안로그인

아이디/비밀번호찾기

jQuery 로 텍스트 입력 박스(TextArea)에 크기 조절 막대 추가하기.

13년 전

자바스크립트 프레임워크 jQuery 를 활용해서 텍스트 입력 박스 (TextArea) 에 크기 조절 막대를 추가해 봅시다. 아래 소개한 소스를 실행하면 입력 박스 하단에 막대가 추가 되며 이 막대를 위 아래로 드래그 할 수 있으며 드래그 방향에 따라 텍스트 박스 크기를 늘리거나 줄일 수 있습니다.

[크기 조절 막대 예제 자바스크립트 소스 코드]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>TextArea Resize Demo</title>
<style type="text/css">
#in_content {width:511px; height:40px; border:1px solid #666666}
.resize_bar {background: url("images/resize_bar.gif"); cursor:s-resize; height:12px; width:100%;}
</style>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type='text/javascript'>
<!--
jQuery.fn.resizehandle = function() {
      return this.each(function() {
            var me = jQuery(this);
            me.after(
                  jQuery('<div class="resize_bar"></div>')
                        .bind('mousedown', function(e) {
                              var h = me.height();
                              var y = e.clientY;
                              var movehandler = function(e) {
                                    me.height(Math.max(40, e.clientY + h - y));
                              };
                              var uphandler = function(e) {
                                    jQuery('html').unbind('mousemove',movehandler)
                                          .unbind('mouseup',uphandler);
                              };
                              jQuery('html') .bind('mousemove', movehandler)
                                    .bind('mouseup', uphandler);
                        })
            );
      });
}
$(document).ready(function(){
      $("textarea").resizehandle();
});
</script>
</head>
<body>
<table cellspacing=0 cellpadding=0 border=0><tr><td>
<textarea name="in_content" id="in_content">아래 크기조절 막대를 이동해보세요.</textarea>
</td></tr></table>
</body>
</html>

[크기 조절 막대 예제 실행 결과]

http://cfile4.uf.tistory.com/original/114E871C4A2B29936F19D9

추천 목록

번호	제목
65	IIS에서 JSP or Java Servlet 돌리는 방법 1
64	톰캣(Tomcat)의 기능 개요 및 설치 방법
63	내용복사시 출처 자동넣기
62	Flash와 PHP를 활용하여 멀티 파일 업로드 구현하는 방법
61	linux 시간 맞추기
60	야후 세계 지도 활용하기, 야후 거기 지도 오픈 API 매시업
59	다음 지도를 내 것으로 만들기, 다음 지도 API 매쉬업
58	나만의 네이버 지도 만들기, 지도 API 매쉬업(Mashup)
57	자바스크립트로 지도 만들기, 구글 지도 API 매시업(Mashup)
	jQuery 로 텍스트 입력 박스(TextArea)에 크기 조절 막대 추가하기.
55	접근성을 해치지 않는 자바스크립트의 사용
54	display: [inline, block, none]
53	CSS line-height 속성, vertical-align 속성
52	CSS float 속성, clear 속성, z-index 속성
51	CSS display 속성, position 속성
50	CSS 마진(margin) 속성, 패딩(padding) 속성
49	CSS overflow 속성, clip 속성, visibility 속성
48	IE6 에서 CSS만으로(핵안쓰고) position:fixed 하기
47	IE 7 에서 dt, dd 좌측여백이 생기는 문제
46	CSS visibility vs display
45	파이어폭스 에서 핸드 커서 안될때. cursor:hand -> cursor:pointer
44	CSS 포지셔닝(Positioning)
43	CSS에서 브라우저 구별 (IE6, IE7, FIREFOX)
42	CSS3 소개
41	Useful CSS Tips For Beginners
40	자주 쓰는 내장함수 (VisualBasic6)
39	브라우저 버전체크 - IE Conditional Comments 필터링
38	브라우저 버전(IE7 vs IE6)에 따라 Layer Y 좌표 위치 변동
37	레이어 절대좌표/ 상대좌표
36	웹표준 DTD선언문