WIZ-CODE.blog

JavaScriptやAjaxをテーマとしたブログです。

*

知っておくと便利なscript.aculo.usエフェクトのあれこれ（その１）

      2009/10/25

この書籍Prototype & script.aculo.us JavaScriptライブラリによるAjaxアプリケーション開発が非常に参考になりました。 show()/hide()：　もともとPrototypeのメソッドであるが、scriptyエフェクトの生命線である。しかし、CSSでdisplayプロパティに始めからデフォルト値以外をインライン以外で指定すると途端に動作しなくなるなど扱いが難しい。よって、始めからdisplayプロパティにnoneなどの値を設定したい場合はインラインに記述しなければならない。この記事を参照のこと Highlightエフェクト：　要素を一瞬黄色く光らせるエフェクト。非同期通信などを利用してリアルタイムでデータを更新するときなど有効。ショートカットが用意されていて、基本的な構文であるnew Effect.Highlight(element)、またはelement.visualEffect(‘Highlight’)としなくても、element.highlight()と書くだけで済む。 Moveエフェクト：　modeオプションはabsoluteとrelativeのどちらかをセットする（デフォルトはrelative）。要素を特定の場所に動かしたいというときはabsoluteに指定する（たとえば絶対座標(100, 200)に移動させたいなら、オプションのx,yをそれぞれx: 100, y: 200とする）。一方、今の座標を基準に動かしたい場合relativeを指定する（たとえば、現座標から右へ100、上へ50だけ動かしたいならx: 100, y: -50となる）。 new演算子の有無：　エフェクトはコアエフェクトと複合エフェクトに分かれている。コアエフェクト（Highlight, Move, Opacity, Parallel, Scale, Tween, Morph）はコンストラクタなので基本的にnew演算子をつけて起動する。一方、element.visualEffect(‘Highlight’)のように記述すると関数扱いになるため、複数のエフェクトを同時に起動できなくなったり制約が出てくる。また、Appear/Fadeなど複合エフェクトは関数なのでnew演算子はいらない。 beforeSetup,afterFinishコールバック：　よく使われるコールバック。エフェクトの引数のオプションに追加する。エフェクトの開始直前に何らかの処理をしたいときはbeforeSetupに、エフェクト終了後に処理をしたいときはafterFinishのコールバック関数にコードを記述すると便利。 cancel()メソッド：　実行中のエフェクトに対し、「あっ、そこで止めて！」という場面で使う。しかし、外部から停止させるにはエフェクトのインスタンスを取得していなければならない。たとえば、下のように記述するとエフェクトを任意のタイミングで停止するすべがなくなってしまう。 
	 
	new Effect.Highlight();
	 
そのため、変数に入れて参照できるようにする。また、自作エフェクトではthis.cancel()と書けばエフェクト内部で任意に停止できる。 
	 
	var effect = new Effect.Highlight();
	effect.cancel();//これが呼び出された直後にエフェクトは途中で停止する。
	 
Internalコールバック：　これはエフェクトを自作したときに使うことがある。beforeSetupやafterFinishなどのコールバックは、エフェクトの利用者が引数などで追加するものだが、作成者がこれらをエフェクト内部で使いたい場合がある。そのときはafterFinishIngernalのように各コールバックにInternalの接尾語をつけて使用することができる。Internalコールバックは同名の通常コールバックの直前に呼び出される。 Eventエフェクト：　このエフェクト自体は実際には何も起動しない。エフェクト以外の通常コードの実行順序を、エフェクトキューが実行する順番で縛るのに利用できる。また、複数のエフェクトをまとめるときに利用する。通常はafterFinishコールバック内にコードを記述する。 SlideUp/SlideDownエフェクト：　Blind系の兄弟かと思いきや、コンテンツをdivでラップしていないと起動しない不親切設計。たとえば次のようなコンテンツにSlideエフェクトをかけたい場合、 
	 
	AAAAAAAAAAAAAAAAAAAA
	BBBBBBBBBBBBBBBBBBBB
	CCCCCCCCCCCCCCCCCCCC
	 
まず、div要素内にコンテンツを入れる。 
	 
	

	AAAAAAAAAAAAAAAAAAAA
	BBBBBBBBBBBBBBBBBBBB
	CCCCCCCCCCCCCCCCCCCC


	 
これで後はID:scriptyの要素をエフェクトの引数に渡せばいいように見えるが、Slide系ではこれがうまくいかない。次のようにもうひとつdivでラップしなければエフェクトが始まらないようだ。 
	 
	

	

	AAAAAAAAAAAAAAAAAAAA
	BBBBBBBBBBBBBBBBBBBB
	CCCCCCCCCCCCCCCCCCCC


	

	 

 - JavaScript/Ajax ,