Yahoo!UIの基礎まとめ
Yahoo! User Interface Library(YUI)は、Yahoo!が提供するJavaScriptライブラリで、Ajaxを含めたDHTMLのテクニックを使用することで、リッチで対話的なウェブアプリケーションを簡単に作成するためのユーティリティやコントロール群です。 YUIのAPIは、このグローバルな唯一のオブジェクト「YAHOO」の下に、すべてのライブラリが配置されており、 YUIと組み合わせる自分のプログラム内のメンバー各名称とが、衝突するかもしれないという心配や労力を省略し、 安心して利用することができる構成になっています。
ここでは、All About内で取り上げたYUI関連の記事へのリンクをまとめて紹介します。
Ajax YUIライブラリを使う準備
YUIライブラリについての概略とダウンロードや設置方法など使うための準備を説明します。Ajax YUIライブラリを使う準備
アニメーション
YUIに含まれるさまざまなコンポーネントの中から「アニメーション(YAHOO.util.Anim)」についての簡単な解説を行います。YUI アニメーション
- YAHOO.util.Animは、DOM要素を移動したり、サイズを拡大縮小したり、不透明度を変化させたりといった、DHTMLの機能を簡易な方法でサポートしてくれる命令群です。
YUI アニメーションwidth,height
- YAHOO.util.Animクラスの第2引数、attributes にwidth(幅)、height(高さ)を指定し、DOM要素のサイズを手軽に変化させる方法を試します。
test2
YUI アニメーションto,by,unit...
- 絶対指定toと相対指定by。そして、attributesを別指定する方法と単位unitの利用方法について、サンプルで試してみます。
test4
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(終了時に動作)です。
フェイドアウトします
YUI アニメーション-簡単なEvent2
- イベント追加メソッドaddListenerを使ってみます。 いわゆる、IE以外のブラウザに実装されたDOMのaddEventListenerやIE独自のattachEventに相当する機能をクロスブラウザ化したものです。
クリックでフェイドアウトします
クリックでフェイドアウトします
クリックでフェイドアウトします
