コメント欄のサイズをマウスドラッグで伸縮できるようにする

Posted by
ぴろり
Posted at
2008/08/21 15:02
Trackbacks
関連記事 (0)
Post Comment
コメントできます
Category
開発メモ カテゴリ

 ブログのコメント欄のサイズをマウスドラッグで自由に伸縮できるようにする方法を紹介します。以前にコメント欄を伸縮できるボタンを設置する方法を紹介しましたが、それよりも少ない設置面積で感覚的に操作できるメリットがあります。jQuery と呼ばれる JavaScript のライブラリを利用するので設置も比較的簡単です。

この記事を Delicious に追加する   このエントリーをはてなブックマークに追加  

ダウンロード

 以下のサイトから二つの JavaScript ファイルをダウンロードします。

jQuery

 jQuery のホームページから"Download"をクリックします。
Download をクリック
 ダウンロードページから JavaScript ファイルをダウンロードします。
Download をクリック

TextArea Resizer

 TextAreaResizer プラグインのページからアーカイブファイル(zip)をダウンロードします。
Download をクリック

設置方法

 ダウンロードした jquery-1.2.6.min.js、zip アーカイブの中に含まれる jquery.textarearesizer.jsgrippie.png をサーバにアップロードします。次に、以下のようにテキストエリアを設置し、JavaScript コードを書き加えます。
 グリップ部分のデザインは div.grippie で定義されたスタイルを使用します。

<style>
  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;
}
</style>

<textarea class="resizable">
some test text
</textarea>

<script src="jquery-1.2.6.min.js"></script>
<script src="jquery.textarearesizer.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('textarea.resizable:not(.processed)').TextAreaResizer();
});
</script>
この記事を Delicious に追加する   このエントリーをはてなブックマークに追加  


この記事を読んだ人はこんな記事も読んでいます記事リコメンデーションについて

カバー画像:コメントフォームにテキストエリアを伸縮できるボタンを付ける

関連記事/トラックバック

関連記事/トラックバックはまだありません

この記事にトラックバックを送るには?

コメントを投稿する

 
 (必須, 匿名可, 公開, トリップが使えます)
 (必須, 匿名可, 非公開, Gravatar に対応しています)
 (必須)
スパム コメント防止のため「投稿確認」欄に ランダムな数字 CAPTCHAについて を入力してから送信してください。お手数ですがご協力のほど宜しくお願いいたします。