テキストエリアのサイズ変更/ユーザー補助/SolidStateEveryday - Ajax,javascript,UIサンプルとチュートリアル -

スポンサードリンク

SAMPLE
CODE
DownLoad

<!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>無題ドキュメント</title>

</head>
 
<body> 

<div id="textDiv" style="left:10px;top:10px;width:200px;height:150px;position:relative;">
  <textarea id="textBox" style="width:197px;height:147px;left:0px;top:0px;position:absolute;"></textarea>
  
  <div id="handleRight" style="width:3px;height:150px;background-color:#CCC;position:absolute;left:200px;top:0px;cursor:e-resize;"></div>
  
  <div id="handleCorner" style="width:3px;height:3px;left:200px;top:150px;background-color:#000;position:absolute;cursor:se-resize;"></div>
  
  <div id="handleBottom" style="width:200px;height:3px;background-color:#CCC;position:absolute;left:0px;top:150px;cursor:s-resize;"></div>
</div>
<script type="text/javascript" src="SOTC-ResizeableTexbox-v1.js"></script>
 
</body> 
</html>

	Javascript Tutorial - Resizeable Textboxes \| Switch on the Code

テキストエリアのサイズを変更できるスクリプト。
縦のみ、横のみ、縦横同時、という感じにドラッグ＆ドロップでリサイズ可能になります。

セッティング

ダウンロード/セッティング

まずサイトへ行きSOTC-ResizeableTexbox-v1.jsをダウンロードします。
それを適当な箇所にアップしたら、テキストエリアの編集をします。

各IDはjsファイル内で指定されているので、リネームしたい場合は、jsファイルを編集します。
またCSSの記述についてですが、インライン以外で記述をした場合、挙動がおかしくなりました。（ドラッグするとまず最小幅になる感じ）
なのでとりあえずはインラインで指定します。
テキストエリアの編集が終わりましたら、その</textarea>の後に、以下のようにjsファイルを読み込ませます。

これで動作設定完了です。