자바스크립트 프레임워크 jQuery 를 활용해서 텍스트 입력 박스 (TextArea) 에 크기 조절 막대를 추가해 봅시다. 아래 소개한 소스를 실행하면 입력 박스 하단에 막대가 추가 되며 이 막대를 위 아래로 드래그 할 수 있으며 드래그 방향에 따라 텍스트 박스 크기를 늘리거나 줄일 수 있습니다.
[크기 조절 막대 예제 자바스크립트 소스 코드]
[크기 조절 막대 예제 실행 결과]
웹프로그래머의 홈페이지 정보 블로그 http://hompy.info/577
(0) 
(0)
[크기 조절 막대 예제 자바스크립트 소스 코드]
<!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>
<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://hompy.info/577
(0) (0)