« Ajax : Yahoo UI Library ver 3 PR1 | メイン | 雑ネタ：プログラマ・SE向け － 難題のプロジェクトに挑む気概 － »
2008年08月14日
Ajax : Yahoo UI Library ver 3 PR1、アニメーションサンプル
とりあえず、簡単なサンプルでテスト。
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/3.0.0pr1/build/cssfonts/fonts-min.css" />
<link type="text/css" rel="stylesheet" href="css/main.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/3.0.0pr1/build/yui/yui-min.js"></script>
<script type="text/javascript"><!--
function startAnime(){
YUI().use("anim-base", myAnime);
}
// アニメーション処理
function myAnime(Y){
var aObj = new Y.Anim({
node : "#box",
to : { opacity : 0 }
});
aObj.run();
}
// --></script>
</head>
<body class=" yui-skin-sam">
<h1>フェードアウトさせる</h1>
<form>
<input type="button" value="開始" onClick="startAnime()">
</form>
<div id="box">
ここの四角い領域の不透明度が変わります。
</div>
</body>
</html>
ver 2.xだと
http://www.openspc2.org/JavaScript/Ajax/ref/YahooUI/ver2.5.2/ref/Animation/Anim_opacity/index.html
にあるような具合なので、確かに互換性がなくなっちゃってます。
jQueryのようにnodeに.boxとすると全部のboxクラスがフェードアウトするかと思ってやってみたら駄目でした。
オプションなどは別途指定なので、そういうことも可能なのかもしれません。
が、jQueryやExtJSと比べるとYUIは考え方が時代遅れのような感じもしますが・・・
でも、まあまだテスト中なのでYUIはもっと違うところを目指しているのかもしれませんし。
投稿者 openspc : 2008年08月14日 14:29