軽量 javascript effect library - moo.fx -

ajax moo.fx

特徴

  • シンプルで基本的なエフェクト効果のみを提供するjavascriptライブラリ。
  • ファイルサイズを押さえ軽量であることに努めている。

[原文] moo.fx is not a replacement for script.aculo.us or other effects libraries. It's just a little alternative for people (like me) that do not need more than just simple, basic effects (and want to keep their filesize small).

[筆者訳]
moo.fxはscript.aculo.usや他のeffectライブラリと競合し置き換わるものではありません。
簡単で、基本的なeffect効果以上を必要としない人達(私のような)のためのひとつの選択肢にすぎないのです。
(また、これからもファイルサイズを小さなものに保っていきたいと思います。)

ファイル構成

  • moo.fx.js　(シンプルで基本的なエフェクト効果を提供する)
  • moo.fx.pack.js　(多少特殊であったり複数のエフェクト効果を使った複雑なエフェクト効果を提供する)
  • prototype.lite.js　(prototype.jsのサブセット。よく使うと思われる便利なユーティリティ関数を抜きだし提供する)

エフェクトリファレンス

moo.fx.js スクリプト
  • fx.Height オブジェクト

このオブジェクトは(窓に取り付ける)ブラインドの上げ下げエフェクト効果をシミュレートしたものです。
script.aculo.usでは、Effect.BlindUpとEffect.BlindDownに相当します。

メソッド 種類 引数 説明
[ctor](element, options) constractor element: 要素オブジェクトかID,
options: moo.fx.options		 指定されたoptionsを使って指定された要素オブジェクトに対してエフェクトを実行するオブジェクトのインスタンスを作成する。
toggle() instance (なし) ブラインドの上げ下げエフェクト効果を実行する。要素の状態によってBlind Upエフェクト、Blind Downエフェクトとなる。
increase() instance (なし) 基本的にはこのメソッドは外部から呼ばれることはない。要素オブジェクトの状態を変化するのにつかわれる。この場合は属性Heightの値を変えることにつかわれる。

サンプル

<script type="text/javascript">
window.onload = function() {
  //duration(持続期間)とエフェクト終了後に呼び出される
  //カスタム関数をoptionsにセットしてインスタンスを作成する。
  effect = new fx.Height('target_element', {duration: 400,
                  onComplete: function() { alert('Effect Completed!'); }
               });
  $('exec_element').onclick = function() {
    //エフェクト効果の実行
    effect.toggle();
  }
}
</script>

//エフェクトの対象となる要素
<div id="target_element"
   style="width:100px;height:100px;border:1px solid black;"></div>
//エフェクトを実行する要素
<div id="exec_element">click</div>

06.10.23 追記
moo.fx ではCSSのheightとoverflowを使ってエフェクトを実現している。
クローズ状態の場合、height:0とするが子ノードがあれば表示されてしまう。
そこで、overflow:hidden(ボックスからはみ出た部分は表示しない)を使ってはみ出し部分を表示しないようにしている。

  • fx.Width オブジェクト

このオブジェクトは前出のブラインドの上げ下げエフェクト効果を横にしたものです。いうなれば、引き戸の開け閉めエフェクト効果をシミュレートしたものです。
script.aculo.usでは、ちょっと見当たりませんでした。情報を求めまーす(>0<)

メソッド 種類 引数 説明
[ctor](element, options) constractor element: 要素オブジェクトかID,
options: moo.fx.options		 指定されたoptionsを使って指定された要素オブジェクトに対してエフェクトを実行するオブジェクトのインスタンスを作成する。
toggle() instance (なし) 引き戸の開け閉めエフェクト効果を実行する。要素の状態によってSliding Rightエフェクト、Sliding Leftエフェクトとなる。
increase() instance (なし) 基本的にはこのメソッドは外部から呼ばれることはない。要素オブジェクトの状態を変化するのにつかわれる。この場合は属性Widthの値を変えることにつかわれる。



options引数オブジェクト
optionsクラスというのは存在せず、期待されるプロパティさえ持っていれば、どんなオブジェクトでも渡すことができます。無名オブジェクトを作成するのが一般的です。

プロパティ 型 デフォルト値 説明
duration Number 500 エフェクト効果の持続時間。数値が少なければ早くエフェクトが終了する。
onComplete Function null エフェクト効果が終了した場合に呼び出されるカスタム関数。デフォルトでは何も呼び出されない。


随時、追加していく予定です。


Tags: ,