【Javascript】Yahoo!UIの基礎まとめ

Yahoo! User Interface Library(YUI)は、Yahoo!が提供するJavaScriptライブラリで、Ajaxを含めたDHTMLのテクニックを使用することで、リッチで対話的なウェブアプリケーションを簡単に作成するためのユーティリティやコントロール群です。

YUIのAPIは、このグローバルな唯一のオブジェクト「YAHOO」の下に、すべてのライブラリが配置されており、 YUIと組み合わせる自分のプログラム内のメンバー各名称とが、衝突するかもしれないという心配や労力を省略し、 安心して利用することができる構成になっています。

ここでは、All About内で取り上げたYUI関連の記事へのリンクをまとめて紹介します。

Ajax YUIライブラリを使う準備

YUIライブラリについての概略とダウンロードや設置方法など使うための準備を説明します。

Ajax YUIライブラリを使う準備

1: Yahoo! User Interface Library(YUI)
2: ダウンロードする
3: 解凍したファイルの構成
4: 設置
5: ネームスペース

アニメーション

YUIに含まれるさまざまなコンポーネントの中から「アニメーション(YAHOO.util.Anim)」についての簡単な解説を行います。

YUI アニメーション

YAHOO.util.Animは、DOM要素を移動したり、サイズを拡大縮小したり、不透明度を変化させたりといった、DHTMLの機能を簡易な方法でサポートしてくれる命令群です。


　



1: 簡単なサンプル
2: YAHOO.util.Anim の書式
3: Easingでエフェクト

YUI アニメーションwidth,height

YAHOO.util.Animクラスの第2引数、attributes にwidth(幅)、height(高さ)を指定し、DOM要素のサイズを手軽に変化させる方法を試します。


test2



1: height(高さ)
2: widthと組み合わせてみる
3: サンプル

YUI アニメーションto,by,unit...

絶対指定toと相対指定by。そして、attributesを別指定する方法と単位unitの利用方法について、サンプルで試してみます。


test4



1: 絶対指定toと相対指定by
2: attributesを別指定する
3: 単位unit

YUI アニメーションopacity,padding...

YUIアニメーションでCSSのいくつかのプロパティを変化させてみます。「opacity」、パディング「padding」、マージン「margin」、フォントサイズ「fontSize」などです。


0.5までフェイドアウトします



1: 不透明度opacity
2: パディングpadding
3: パディングトップpaddingTop,パディングレフトpaddingLeft
4: マージンmargin
5: フォントサイズfontSize

YUI アニメーション-簡単なEvent

YUIアニメーションで使える簡単なイベントを3つ紹介します。onStart(スタート時に動作)、onTween(アニメーション中に動作)、onComplete(終了時に動作)です。


フェイドアウトします



1: onStart(スタート時に動作)
2: onTween(アニメーション中に動作)
3: onComplete(終了時に動作)

YUI アニメーション-簡単なEvent2

イベント追加メソッドaddListenerを使ってみます。 いわゆる、IE以外のブラウザに実装されたDOMのaddEventListenerやIE独自のattachEventに相当する機能をクロスブラウザ化したものです。


クリックでフェイドアウトします
クリックでフェイドアウトします
クリックでフェイドアウトします



1: addListener(イベントを追加する)
2: 複数要素へまとめてイベントをセットする
3: removeListener(イベントを除去する)
4: purgeElement(イベントをまとめて除去する)