(jquery) Textarea Rezise

소스 - textarea Rezise

jQuery.fn.resizehandle = function(width) {
	return this.each(function() {
		var width1 = width + 10; //환경에 따라 조절
		var me = jQuery(this);
		me.after(
			jQuery('<div style="position:relative;z-index:10;height:15px;padding-top:1px;cursor:s-resize;width:'+width1+'px;height:14px;border:1px solid #cccccc;background:#fafafa;color:#333;font-size:11px;font-family:arial;margin-top:-1px;text-align:center"><div style="display:block;clear:both;position:relative;width:100%;height:15px;text-align:center;cursor:n-resize"><span  style="display:block;visibility:visible;height:15px;font-size:12px;line-height:0;color:#666;margin-top:6px">▼</span></div></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(){
	var width = $("#byul_textarea").width(); //textarea width
	$("#byul_textarea").resizehandle(width);
}); 

실행

<textarea name="byul_textarea" id="byul_textarea" style="width:90%;height:150px;">아래 크기조절 막대를 이동해보세요.</textarea>

실행결과

아래 크기조절 막대를 이동해보세요.

▼ resize