実践 prototype.js [4] rico.js のEffect.Size

今日は prototype.js を利用した Effect を調べていました。

prototype.jsの配布元からもリンクされていますが Ricoのデモがすごいことになっています。

百聞は一見に如かず。
例えば、「CINEMATIC DEMOS」の中にある「Animate Size & Position」を見てみましょう。
画面下のほうにある「Size & Position Me」をクリックしてみてください。
div がぐにょーんと大きくなりながら、移動します。（我ながら表現力がないなぁ）

また「DRAG & DROP DEMOS」もかなり熱いです。
「Custom Draggable」などは、ここまで出来るのか・・・と思ってしまいます。

さて今回、目をつけたのはデモ画面の左上にいつもある「Hide demo panel」というリンクです。
これをクリックしてみると分かるのですが、今まで表示していたデモのメニューが、するりと緞帳が上がるように折りたたまれます。
さらにもう一度クリックすると、折りたたみが解除され再び表示されます。

これは、はてなRSSの「もっと読む」機能のような用途に使えそう。
ソースを見てみると

   var saveHeight;
   var showing = true;

   function toggleSlide() {
      if ( showing )
         { slideMenuUp(); showing = false; }
      else
         { slideMenuDown(); showing = true; }
   }

   function slideMenuUp() {
      var menu = $('demosMenu');
      saveHeight = menu.offsetHeight;

      menu.style.overflow = "hidden";
      new Effect.Size( menu, null, 1, 120, 8 );

      $('demoPanelLink').innerHTML = "Show demo panel";
   }

   function slideMenuDown() {
      var menu = $('demosMenu');
      new Effect.Size( menu, null, saveHeight, 120, 8, {complete:function() { $(menu).style.overflow = "visible"; }} );
      $('demoPanelLink').innerHTML = "Hide demo panel";
   }
</script>
<!-- I did have this as float:right but it screws up in firefox -->
<div style="margin-left:6px"><a id="demoPanelLink" href="javascript:toggleSlide();">Hide demo panel</a></div>

<div id="demosMenu" ondblclick="toggleSlide()" style="margin-left:2px;margin-top:2px;padding-left:6px;background-color:#adba8c;width:575px">

とても短いコードです。
rico.js の中で定義されている Effect.Size クラスを利用して目的のdiv を表示・非表示を切り替えていることが分かります。

Sizeクラスのコンストラクタは、順にwidth, height, かける時間, ステップ数となっています。
この場合、120ms、8stepで、divの高さを1にしたり、元の高さに戻したりしています。

このデモの場合は、もともとが開いている状態でクリックすると閉じるという形です。
「もっと読む」の場合は先に閉じていて、クリックで開くという動作になります。
このデモをちょっと改造すれば「もっと読む」も簡単に出来るかなぁと、たかをくくっていたのですが問題発覚。

初期表示で閉じた状態の場合、divの中身を表示したときの高さ(style.height)が事前に分からない。
⇒slideMenuDownしたときの height が決められない！。

ということで、最初は開いた状態にして、onloadで高さを調べた後閉じて隠すという苦肉の策を試すも IE, Firefoxの両方で動くコードはかけずに時間切れ。

JavaScript & DHTMLクックブック―Webエキスパート必携テクニック集