태그 자료실

회원로그인

무료회원가입 보안로그인

아이디/비밀번호찾기

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

추천 목록

번호	제목
1,235	엑세스 함수
1,234	함수
1,233	[script] iframe 자동리사이즈(파이어폭스, 익스 지원)
1,232	IFRAME-x 이용한 InnerBrowsig
1,231	javascript timer
1,230	올플래시 사이트에서 iframe 으로 게시판 올리기
1,229	linux 시간 맞추기
1,228	리눅스 하드디스크 배드 블럭 점검 badblocks
1,227	PHP로 FTP프로그램 만들기 알고리즘
1,226	날짜, 시간 계산하기
1,225	반드시 알아아 할 PHP 보안 30가지
1,224	[PHP] $_SESSION 변수를 이용한 장바구니
1,223	[PHP] header("Pragma:no-cache")
1,222	[PHP] 제어 구조 - foreach 배열 as 변수
1,221	PHP 시간관련함수 및 사용법 (사용기간, 사용일수, 특정일 계산법)
1,220	HTML과 자바스크립트에서 스타일시트 속성
1,219	jQuery 애니메이트로 만들어보는 이미지 슬라이더와 전광판
1,218	야후 세계 지도 활용하기, 야후 거기 지도 오픈 API 매시업
1,217	다음 지도를 내 것으로 만들기, 다음 지도 API 매쉬업
1,216	나만의 네이버 지도 만들기, 지도 API 매쉬업(Mashup)
1,215	자바스크립트로 지도 만들기, 구글 지도 API 매시업(Mashup)
	jQuery 로 텍스트 입력 박스(TextArea)에 크기 조절 막대 추가하기.
1,213	PHP 시간 관련 함수를 써서 시간 차이 계산하기, DATEDIFF
1,212	[PHP] 시간 날짜 함수
1,211	게시판 자동등록 방지 팁입니다
1,210	무단링크 방지 방법
1,209	Base62 Encode
1,208	CDATA 섹션[XML 표준]
1,207	window.onload
1,206	JavaScript로 자신의 URL 알기