JavaScript + Ajax 実践サンプル集 (1127本以上) ◇編集して実行可能◇
jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中...
ホーム
jQuery
jQuery プラグイン
jQuery UI
人気順
カテゴリ
キーワード
クール
新着
ツリー
jQuery PDF
ホット
サイト情報
サイトマップ
★ 新着サンプルトップ50のRSSを購読する
◆ DHTMLサンプル(基礎)のRSSを購読する
◆ DHTMLサンプル(応用)のRSSを購読する
◆ AJAXサンプルのRSSを購読する
◆ その他サンプルのRSSを購読する
◆ BOM(Browser Object Model)のRSSを購読する
◆ DOM(Document Object Model)のRSSを購読する
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>セクションにコピー&ペーストしてください。
ボックス内のコードを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>
コメント・提案の投稿!
名前
メール
件名
本文
送信中です...
このサンプルは、jQueryのResizable()プラグインを利用してtextareaをリサイズします。サンプルが表示されたらtextareaの緑の部分をドラッグして高さをリサイズしてください。
このサンプルを編集して試してみる!
Access
|
ASP.NET + Ajax
|
ASP.NET 3.5 + Ajax
|
JavaScript + jQuery