Anim
昨日に引き続き「DataTable Control； Complex Example of Multiple Features」の調査。YUI2.6.0では、右端の編集可能（editable）な列のセルを更新すると、更新した行が黄色く光るようになっていた。これが、YUI2.7.0だと光らない。（Official Exampleも光…
YUIのExample「DataTable Control: Complex Example of Multiple Features」へのリンク このExampleは、これまでのExampleでやってきた、いくつかの要素を組み合わせた例。 state列でのソーティングは、「DataTable Control: Client-side Sorting」でやった…
このExampleは、先の「Menu Family: Website Top Nav Using Animation With Submenus Built From Markup」のサンプルをScriptで記述したものである。（YUIのExampleページへのリンクはこちら）したがって、画面とその動作は、「Menu Family: Website Top Nav…
この例は、「Menu Family: Website Top Nav With Submenus Built From Markup」と同様にメニューバーからサブメニューが開くものだが、１点だけ サブメニューがメニューバーからスライドして降りてくる という工夫を施してある。この工夫を実装するにあたり…
このExampleは、先のExample「Menu Family: Website Left Nav With Submenus From JavaScript」を「サブメニューを表示する際に、それが浮かび上がってくるようなEffectをつける」よう改造したものである。（YUIのExampleのページへのリンクはこちら）したが…
このExampleは、先のExample「Menu Family: Website Left Nav With Submenus From Markup」を「サブメニューを表示する際に、それが浮かび上がってくるようなEffectをつける」よう改造したものである。（YUIのExampleのページへのリンクはこちら）したがって…
次のサンプルは、YAHOO.util.Scroll。 これも、YAHOO.util.Animの子孫。overflowしている要素中の子要素（たとえば、divで囲まれた「文章」など）があったときに、イベントで、子要素の位置を指定した場所まで移動する。これもサンプルがつまらないので、実…
この例は、div要素の矩形に「変わった動き」を与えるやり方を示している。このために、YAHOO.util.Motionオブジェクトに与える属性オブジェクト(attributes）にcontrol pointという座標を定義する。 そのためには、attributeオブジェクトを var attributes =…
YAHOO.util.Motionは、要素をスムーズに移動させるためのオブジェクト。Exampleのページにある例がつまらないので、調査もかねて、ちょっと変えてみた。 YAHOO.util.Motionオブジェクトを使うには、「移動目的地」をあらわすattributesオブジェクトを var at…
先の「Chaining Animations Using onComplete」でも出てきたYAHOO.util.ColorAnimのExample。 AnimationのTopページで書かれているが、Yahoo.util.Animの子孫らしい。サンプルとして挙げられているのは、簡単。 以下にソースを示す。 <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=UTF-8"> <META http-equiv="Content-Style-Type" content="text/css"> </meta></meta></head></html>
このExampleは、AnimのonCompleteイベントのサンプル。 ソースを覗いてみると、YAHOO.util.ColorAnimとYAHOO.widget.Buttonのサンプルにもなっている。 これらについては、簡単に以下のソースコード中にメモを記入。また、JavaScriptの発動をbody中の最後の…
次のExample、 Using Custom Units for an Animation(これ)は、属性（attributes）で単位（unit）を指定するだけなので、とばして、Animating Multiple Attributeへ。この例は、複数の属性を指定するというだけなので、easingを変えて、動きを少し変更してみ…
次のサンプルは、タイトル通り、属性（attributes）にfrom属性をつけたもの。簡単なサンプルなので、動きを２つ足してみた。 これで、ボタンクリックでのスライドイン/アウトが可能になる。 <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=UTF-8"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE>Ajax_Sampling</TITLE> <style type="text/css"> #demo { ba…</meta></meta></head></html>
YUIのAnimationを呼んでいると、Easing Methodという言葉が出てくる。 とても、訳しずらいので、今後、そのままeasingと呼ぶが、ようするにAnimationの終端の扱いのことらしい。 YAHOO.utilにEasingというオブジェクトがあって、そのAPIドキュメントをみると…
Animation Exampleの最初（Basic)は、とてもシンプルなサンプル。runボタンを押すと、矩形が短くなって消えてしまうというもの。ソースコードは以下。 <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=UTF-8"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE>Ajax_Sampling</TITLE> <style type="text/css"> #demo { background:#ccc…</meta></meta></head></html>
サイトのナビゲーション通りに進み、いよいよYahooアニメーション(Animation)のサンプリングに入る。AnimationのトップページのGetting Startedをみると、以下のjsファイルを読み込めと書いてある。 <script src="scripts/yahoo-dom-event/yahoo-dom-event.js" type="text/javascript"> </script>
