JavaScript + Ajax 実践サンプル集 - jQueryのResizableプラグインでTextareaをリサイズする

jQueryのResizableプラグインでTextareaをリサイズする　《プログラマーがネットで副収入を得る方法とは》

説明コード分割コード関連書籍コメント投稿

このサンプルは、jQueryのResizable()プラグインを利用してtextareaをリサイズします。サンプルが表示されたら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>
  <title>jQuery - Resize Textarea </title>
  <link href="jQuery/interface/iresizable.css" rel="stylesheet" type="text/css" />
  <script src="jQuery/jquery-1.2.6.js" type="text/javascript"></script>
  <script src="jQuery/interface/interface.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function() {
      $('#resizeMe').Resizable(
			{
			  minWidth: 50,
			  minHeight: 50,
			  maxWidth: 400,
			  maxHeight: 400,
			  minTop: 10,
			  minLeft: 10,
			  maxRight: 700,
			  maxBottom: 350,
			  handlers: {
			    s: '#resizeS'
			  },
			  onResize: function(size) {
			    $('textarea', this).css('height', size.height - 6 + 'px');
			  }
			}
		);
    });  
  </script>

</head>
<body>
  <div id="resizeMe">
    <textarea>
I'm a resizable textarea. Try to resize me.

Some filler text:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Phasellus scelerisque nulla ut magna. In hac habitasse platea dictumst. 
Suspendisse est. Mauris auctor dapibus magna. Vivamus neque magna, 
facilisis quis, dictum quis, dapibus gravida, neque. 
Pellentesque tincidunt. Ut lacus nunc, aliquam in, blandit vitae, dignissim a, 
nisi. Etiam eget quam. Fusce eu ipsum. Quisque et urna. 
Phasellus tincidunt odio ac sem. Proin blandit libero vestibulum arcu. 
Suspendisse id massa id mi varius ullamcorper. 
Ut tempor sagittis purus. Nam vitae risus. Etiam dapibus laoreet nunc. 
Sed nec sapien. Vestibulum tellus sem, venenatis sed, 
tincidunt nec, vestibulum id, massa.
	</textarea>
    <div id="resizeS">
    </div>
  </div>
</body>
</html>

CSS部HEAD部BODY部

ボックス内のスタイルシート(CSS)を外部ファイル(*.css)、またはHTMLドキュメントの<HEAD>セクションの<style>タグ内にコピー＆ペーストしてください。

            
body
{
  background: #fff;
  margin: 0;
  padding: 0;
  height: 100%;
}
#resizeMe
{
  position: absolute;
  width: 400px;
  height: 200px;
  left: 10px;
  top: 10px;
  cursor: ns-resize;
  cursor: n-resize;
}
#resizeMe textarea
{
  width: 100%;
  height: 194px;
}
#resizeS
{
  width: 398px;
  height: 6px;
  background-color: #ccc;
  position: absolute;
  bottom: 0;
  left: 0;
  background-image: url(images/resize_textarea.jpg);
  background-position: center;
  overflow: hidden;
  font-size: 1px;
}

ボックス内のコードをHTMLドキュメントの<HEAD>セクションにコピー＆ペーストしてください。

            
  <link href="jQuery/interface/iresizable.css" rel="stylesheet" type="text/css" />
  <script src="jQuery/jquery-1.2.6.js" type="text/javascript"></script>
  <script src="jQuery/interface/interface.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function() {
      $('#resizeMe').Resizable(
			{
			  minWidth: 50,
			  minHeight: 50,
			  maxWidth: 400,
			  maxHeight: 400,
			  minTop: 10,
			  minLeft: 10,
			  maxRight: 700,
			  maxBottom: 350,
			  handlers: {
			    s: '#resizeS'
			  },
			  onResize: function(size) {
			    $('textarea', this).css('height', size.height - 6 + 'px');
			  }
			}
		);
    });  
  </script>

ボックス内のコードをHTMLドキュメントの<BODY>セクションにコピー＆ペーストしてください。

            
  <div id="resizeMe">
    <textarea>
I'm a resizable textarea. Try to resize me.

Some filler text:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Phasellus scelerisque nulla ut magna. In hac habitasse platea dictumst. 
Suspendisse est. Mauris auctor dapibus magna. Vivamus neque magna, 
facilisis quis, dictum quis, dapibus gravida, neque. 
Pellentesque tincidunt. Ut lacus nunc, aliquam in, blandit vitae, dignissim a, 
nisi. Etiam eget quam. Fusce eu ipsum. Quisque et urna. 
Phasellus tincidunt odio ac sem. Proin blandit libero vestibulum arcu. 
Suspendisse id massa id mi varius ullamcorper. 
Ut tempor sagittis purus. Nam vitae risus. Etiam dapibus laoreet nunc. 
Sed nec sapien. Vestibulum tellus sem, venenatis sed, 
tincidunt nec, vestibulum id, massa.
	</textarea>
    <div id="resizeS">
    </div>
  </div>

コメント・提案の投稿！

名前
メール
件名
本文

JavaScript + Ajax 実践サンプル集 (1276本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... powered by asp.net 3.5

jQueryのResizableプラグインでTextareaをリサイズする　《プログラマーがネットで副収入を得る方法とは》

JavaScript + Ajax 実践サンプル集 (1276本以上) ◇編集して実行可能◇

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... powered by asp.net 3.5

jQueryのResizableプラグインでTextareaをリサイズする 《プログラマーがネットで副収入を得る方法とは》

JavaScript + Ajax 実践サンプル集 (1276本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... powered by asp.net 3.5

jQueryのResizableプラグインでTextareaをリサイズする　《プログラマーがネットで副収入を得る方法とは》