Yahoo!UIの基礎まとめ

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

    フェイドアウトします


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