2013年9月27日金曜日

jQueryプラグイン:TextAreaResizer

いよいよこのブログがよく分からない事になりそうだけど、自分のための日記なので気にせずメモ…。なので、誰かの役に立てるようにとかの目的ではないので検索で辿り着いた人には不親切です。ごめんなさい。

FFやchromeではテキストエリアをリサイズできるが、IEではできないため、TextArea Resizerというプラグインを使用することに。
http://plugins.jquery.com/project/TextAreaResizer
設置方法については省略。(いくつか記述してあるサイトがあります)

一応簡単に説明するとjquery用のjsとcss設置して
$('textarea.resizable:not(.processed)').TextAreaResizer();
をscript内に書けば動く。(:not(.processed)とか別に要らない)

ただ、このプラグインを使用すると、div内にtextareaが設置してある場合、リサイズでみょーんと動かしてもdivが自動で伸びず、textareaの縦幅がdivを超えてしまう。
その場合下記のようにresize()内に縦幅を指定しなおす。(※下記ソースではtextareaは複数ある)
また、IE6はgrippie画像が変な風に表示されるのでwidthを揃える。

// テキストエリアのリサイズ
var textarea_obj=$('.resizable_textarea').TextAreaResizer({
  resize:function(){
    textarea_obj.each(function(){
      $(textarea_div).css({height:$(this).height()+10}); // heightは適当に…
    });
  }
});
// IE6対策:TextAreaResizer の 持ち手の場所を修正
if(browser().isIE6){
  textarea_obj.each(function(){
    $(this).next(".grippie").width($(this).width());
  });
}

もっとスマートなやり方知ってたら教えてください。

0 件のコメント:

コメントを投稿