※ 2018/03/20 新しいブログへ移行中http://kazunori-toybox.com/blog/

jQuery TextArea Resizer ドラッグアンドドロップでテキストエリアのサイズを変更する

仕事のとある件で、テキストエリアにコマンドプロンプトの出力結果を出していたのですが、

とある人にスクロールさせるのがいやだから大きい方がいい。
「これ、ドラッグして大きくするとかできないの?」

と言われた。たしかに。

調べてみると一瞬で発見しました。

TextArea Resizer
http://plugins.jquery.com/project/TextAreaResizer

動作サンプル demo
http://www.itsavesyou.com/TextArea_Resizer_example.htm

テキストエリアを使用する場合だいたいのサイズで指定しますが、そのサイズを
ドラッグアンドドロップで大きくする事が可能になるプラグインです。

いつも通り jQueryのプラグインは簡単

 1.JavaScriptファイルとCSSのファイルを読み込む。
 2.反映させたいタグにIDを仕込む。
 3.初期化時に そのIDに関して適用。

ですよね。ダウンロードしたらついてあるサンプルで説明します。

1.JavaScriptファイルとCSSのファイルを読み込む。

jQuery.js と、プラグインのjsファイルを読み込みます。
サンプルでは、Web上のファイルを指定していますので、ネットワークから遮断されていると、動作しないので注意してください。

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="jquery.textarearesizer.compressed.js"></script>

そして CSS 設定です。

<style type="text/css">
	div.grippie {
		background:#EEEEEE url(grippie.png) no-repeat scroll center 2px;
		border-color:#DDDDDD;
		border-style:solid;
		border-width:0pt 1px 1px;
		cursor:s-resize;
		height:9px;
		overflow:hidden;
	}
	.resizable-textarea textarea {
		display:block;
		margin-bottom:0pt;
		width:95%;
		height: 20%;
	}
</style>

これねぇ~・・・。 埋め込むのはHTMLが汚れるので、使用時にやっぱり css ファイルにしました。jquery.textarearesizer.css ですよね。

2.反映させたいタグにIDを仕込む。

識別用にクラス指定しています。別にID指定でかまわないと思います。

<textarea class="resizable"></textarea>

3.初期化時に そのIDに関して適用。

先ほど仕込んだ resizable クラスが定義されているタグに適用します。

<script type="text/javascript">
	$(document).ready(function() {
		$('textarea.resizable:not(.processed)').TextAreaResizer();
	});
</script>

 
もうこれでバッチリです。
 
 
 
サンプルをみるとわかりますが、iframe にも対応しています。
ぜひぜひお試しあれ。


  1. コメントはまだありません。

  1. 2011年 3月19日
    トラックバック先 :mi-ko

This blog is kept spam free by WP-SpamFree.