- 2008-08-19 (火) 3:06
- 01.Blog
先日公開された「Yahoo! UI Library(YUI) 3」ですが、早速一番簡単なサンプルを作ってみました。
ここでは最初にもっとも分かりやすい「Animation Utility」を利用して、アニメーションのサンプルを作ってみます。
まずは HTMLを準備しましょう。
<div id="demo" style="background-color: #ccc; width: 500px; height: 500px">
次に、<head>要素に<script>要素を記述します。
<script src="http://yui.yahooapis.com/3.0.0pr1/build/yui/yui-min.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function() {
YUI().use("anim-base", function(Y) {
var myAnim = new Y.Anim({
node: '#demo',
to: {
width: 0,
height: 0
}
});
myAnim.run();
});
}
</script>
これでWebブラウザで実行すると、次のようになります。
最初に「YUI」というメインオブジェクトの「use」メソッドを利用します。これは、必要なモジュールを参照して、動作させるYUIのコアとなる部分です。
次に、「Y.Anim」というオブジェクトに、様々なパラメータを指定します。ここでは「IDが “demo”という要素を、幅0、高さ0にする」というパラメータを指定しました。
あとは、ここで作った「myAnim」というインスタンスを、好きなタイミングで「run」メソッドで実行させれば完了です。ここでは、表示したらすぐに実行しました。
Comments:0
Trackback+Pingback:0
- TrackBack URL for this entry
- http://www.h2o-ajax.com/archives/130/trackback
- Listed below are links to weblogs that reference
- Yahoo! UI Library(YUI) 3で、アニメーションをするサンプル from Recently Ajax