--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
+ "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+ <head>
+
+ <title>skeleton page | The Dojo Toolkit</title>
+
+ <style type="text/css">
+ @import "../../../dijit/themes/tundra/tundra.css";
+ body, html {
+ width:100%;
+ margin:0;
+ padding:0;
+ font:11pt Arial,sans-serif;
+ color:#666;
+ }
+
+ #container {
+ width:760px;
+ margin:0 auto;
+ }
+
+ div.testBox {
+ border:2px solid #ededed;
+ background:#fefefe;
+ height:200px;
+ margin:0 auto;
+ position:relative;
+ }
+
+ div.testItem {
+ position:absolute;
+ background:#fff url('images/averycutedog.jpg') no-repeat center center;
+ border:2px solid #f0f0f0;
+ margin:0;
+ padding:0;
+ height:175px;
+ width:175px;
+ top:10px;
+ left:10px;
+ }
+
+ .altItem {
+ position:absolute;
+ top:10px;
+ left:295px;
+ }
+
+ .pad {
+ padding:4px;
+ }
+
+ .trick {
+ height:175px;
+ width:175px;
+ visibility:hidden;
+ }
+ .odd,
+ .even { margin-left:1px; }
+
+ #lorem {
+ position:absolute;
+ top:10px;
+ left:15px;
+ font:8pt Arial,sans-serif;
+ width:175px;
+ padding:4px;
+ background:#ededed;
+ }
+
+ #fisheyeList {
+ width:95px;
+ background:#666;
+ padding:7px;
+ }
+ #fisheyeList li {
+ color:#fff;
+ }
+ </style>
+
+ <script type="text/javascript" src="../../../dojo/dojo.js"
+ djConfig="parseOnLoad:true, isDebug:true"></script>
+
+ <script type="text/javascript">
+ dojo.require("dijit.form.Button"); // for the tests
+
+ // core animations:
+ dojo.require("dojo.fx");
+
+ // provides dojo.query() animations:
+ dojo.require("dojo.NodeList-fx");
+ dojo.require("dojox.fx.ext-dojo.NodeList");
+
+ // core dojox package:
+ dojo.require("dojox.fx");
+ dojo.require("dojox.fx._core"); // _Line
+
+ // addons:
+ dojo.require("dojox.fx.style");
+ dojo.require("dojox.fx.easing");
+
+ // examples inline:
+ dojo.require("dojox.widget.FisheyeLite");
+ </script>
+
+</head>
+<body class="tundra">
+ <div id="container">
+
+ <h2>Dojo FX: base animations</h2>
+
+ <button dojoType="dijit.form.Button">
+ Fade In/Out
+ <script type="dojo/method" event="onClick">
+ dojo.fadeOut({ node:"testSlide",
+ onEnd:function(){
+ dojo.fadeIn({ node:"testSlide", delay:300 }).play();
+ }
+ }).play();
+ </script>
+ </button>
+
+ <button dojoType="dijit.form.Button">
+ animateProperty: height
+ <script type="dojo/method" event="onClick">
+ dojo.animateProperty({
+ node:"testSlide",
+ properties:{ height:{ end:1, unit:"px" } },
+ onEnd:function(){
+ dojo.animateProperty({
+ node:"testSlide",
+ delay:300,
+ properties:{ height:{ end:175, unit:"px" } }
+ }).play();
+ }
+ }).play();
+ </script>
+ </button>
+
+ <button dojoType="dijit.form.Button">
+ animateProperty: width
+ <script type="dojo/method" event="onClick">
+ dojo.animateProperty({
+ node:"testSlide",
+ properties:{ width:{ end:1, unit:"px" } },
+ onEnd:function(){
+ dojo.animateProperty({
+ node:"testSlide",
+ delay:300,
+ properties:{ width:{ end:175, unit:"px" } }
+ }).play();
+ }
+ }).play();
+ </script>
+ </button>
+
+ <div class="testBox" id="testSlideWrapper">
+ <div class="testItem" id="testSlide">
+ <div class="trick"> </div>
+ </div>
+ </div>
+
+
+ <h2>Animate CSS Properties:</h2>
+
+ <button dojoType="dijit.form.Button">
+ marginLeft
+ <script type="dojo/method" event="onClick">
+ dojo.animateProperty({
+ node:"lorem",
+ properties:{
+ marginLeft:{ end:322, unit:"px", start:1 }
+ },
+ onEnd: function(){
+ dojo.animateProperty({
+ node:"lorem",
+ properties:{
+ marginLeft:{ end:1, start:322, unit:"px" }
+ },
+ delay:300
+ }).play();
+ }
+ }).play();
+ </script>
+ </button>
+
+ <button dojoType="dijit.form.Button">
+ left / paddingTop
+ <script type="dojo/method" event="onClick">
+ dojo.animateProperty({
+ node:"lorem",
+ properties:{
+ left: {
+ end: dojo.marginBox("cssNodeWrap").w - 195,
+ unit:"px"
+ },
+ paddingTop:{ end:17, unit:"px", start:4 }
+ },
+ onEnd: function(){
+ dojo.animateProperty({
+ node:"lorem",
+ properties:{
+ paddingTop:{ end:4, start:17, unit:"px" },
+ left: { end: 10, unit:"px" }
+ },
+ delay:300
+ }).play();
+ }
+ }).play();
+ </script>
+ </button>
+
+ <button dojoType="dijit.form.Button">
+ fontSize / width
+ <script type="dojo/method" event="onClick">
+ dojo.animateProperty({
+ node:"lorem",
+ properties:{
+ width: { end:700, unit:"px", start:175 },
+ fontSize:{ end:21, unit:"pt", start:11 }
+ },
+ onEnd: function(){
+ dojo.animateProperty({
+ node:"lorem",
+ properties:{
+ width: { end:175, unit:"px" },
+ fontSize:{ end:11, start:21, unit:"pt" }
+ },
+ delay:700
+ }).play();
+ }
+ }).play();
+ </script>
+ </button>
+
+ <div class="testBox" id="cssNodeWrap">
+ <div id="cssNode">
+ <p id="lorem">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+ Nam facilisis enim. Pellentesque in elit et lacus euismod dignissim.
+ Aliquam dolor pede, convallis eget, dictum a, blandit ac, urna.
+ Pellentesque sed nunc ut justo volutpat egestas. Class aptent taciti
+ sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
+ In erat.
+ </p>
+ </div>
+ </div>
+
+ <h2>dojo.fx - Core animations</h2>
+
+ <button dojoType="dijit.form.Button">
+ Slide
+ <script type="dojo/method" event="onClick">
+ // we're 175px, slide to containerWidth - 195
+ var left = dojo.marginBox("testSlideWrapper").w - 195;
+ // make and play the animation
+ dojo.fx.slideTo({
+ top:10,
+ left:left,
+ node:"testSlideToo",
+ onEnd: function(){
+ // slide'er back:
+ dojo.fx.slideTo({ top:10, left:10, node:"testSlideToo" }).play();
+ }
+ }).play()
+ </script>
+ </button>
+
+ <button dojoType="dijit.form.Button">
+ Combine Slide / Fade
+ <script type="dojo/method" event="onClick">
+ var anim1 = dojo.fx.slideTo({
+ top: 10,
+ left: dojo.marginBox("testSlideWrapper").w - 195,
+ node: "testSlideToo",
+ onEnd: function(){
+ // slide'er back:
+ dojo.fx.slideTo({ top:10, left:10, node:"testSlideToo" }).play();
+ }
+ });
+ var anim2 = dojo.fadeOut({
+ node: "testSlideToo",
+ onEnd: function(){
+ // we could switch out the backgroundImage property here.
+ dojo.fadeIn({ node:"testSlideToo" }).play();
+ }
+ });
+ var combined = dojo.fx.combine([anim1,anim2]);
+ combined.play();
+ </script>
+ </button>
+
+ <button dojoType="dijit.form.Button">
+ Chain (4)
+ <script type="dojo/method" event="onClick">
+ var anim1 = dojo.fadeOut({ node:"testSlideToo",
+ // so anim1 is over, making this onEnd and anim2 basically
+ // a combine() (depending on the duration: )
+ onEnd:function(){
+ var delay = 125;
+ dojo.fadeIn({ node:'testSlideToo' }).play(delay);
+ }
+ });
+
+ var anim2 = dojo.animateProperty({
+ node:"testSlideToo",
+ properties:{
+ left:{
+ end: dojo.marginBox("testSlideTooWrap").w - 195,
+ unit: "px"
+ }
+ },
+ onEnd: function(){
+ dojo.fx.slideTo({ node:"testSlideToo", top:10, left:10 }).play(123);
+ }
+ });
+ dojo.fx.chain([anim1,anim2]).play();
+ </script>
+ </button>
+
+ <div class="testBox" id="testSlideTooWrap">
+ <div class="testItem" id="testSlideToo">
+ <div class="trick"></div>
+ </div>
+ </div>
+
+ <h2>dojo.query FX</h2>
+
+ <button dojoType="dijit.form.Button">
+ fade .even
+ <script type="dojo/method" event="onClick">
+ dojo.query(".even","queryUl").fadeOut({
+ onEnd:function(){
+ dojo.query(".even","queryUl").fadeIn({ delay: 300 }).play();
+ }
+ }).play();
+ </script>
+ </button>
+
+ <button dojoType="dijit.form.Button">
+ fade .odd
+ <script type="dojo/method" event="onClick">
+ dojo.query(".odd","queryUl").fadeOut({
+ onEnd:function(){
+ dojo.query(".odd","queryUl").fadeIn({ delay: 300 }).play();
+ }
+ }).play();
+ </script>
+ </button>
+
+ <button dojoType="dijit.form.Button">
+ shift .odd
+ <script type="dojo/method" event="onClick">
+ dojo.query(".odd","queryUl").animateProperty({
+ properties:{
+ marginLeft:{ end:34, unit:"px" }
+ },
+ duration:300,
+ onEnd:function(){
+ dojo.query(".odd","queryUl").animateProperty({
+ delay: 300,
+ properties:{
+ marginLeft:{ end:1, unit:"px" }
+ }
+ }).play();
+ }
+ }).play();
+ </script>
+ </button>
+
+ <button dojoType="dijit.form.Button">
+ mmm, easing
+ <script type="dojo/method" event="onClick">
+ dojo.query(".odd","queryUl").animateProperty({
+ easing:dojox.fx.easing.backOut,
+ properties:{
+ marginLeft:{ end:34, unit:"px" }
+ },
+ duration:600,
+ onEnd:function(){
+ dojo.query(".odd","queryUl").animateProperty({
+ delay: 300,
+ duration:1300,
+ easing:dojox.fx.easing.bounceOut,
+ properties:{
+ marginLeft:{ end:1, unit:"px" }
+ }
+ }).play();
+ }
+ }).play();
+ </script>
+ </button>
+
+ <button dojoType="dijit.form.Button">
+ Setup FisheyeList
+ <script type="dojo/method" event="onClick">
+ this.setAttribute("disabled",true);
+ dojo.query("li","fisheyeList").forEach(function(n){
+ new dojox.widget.FisheyeLite({
+ properties:{
+ marginLeft:17,
+ width:1.175
+ },
+ onClick:function(){
+ dojo.byId("clickAlert").innerHTML = "clicked: " + this.id;
+ },
+ easeIn:dojox.fx.easing.elasticOut,
+ durationIn:1700
+ },n).startup();
+ }).style("cursor","pointer");
+ </script>
+ </button>
+
+ <div class="testBox" id="queryParent">
+ <ul id="queryUl">
+ <li class="odd">odd row</li>
+ <li class="even">even row</li>
+ <li class="odd">odd row</li>
+ <li class="even">even row</li>
+ <li class="odd">odd row</li>
+ <li class="even">even row</li>
+ <li class="odd">odd row</li>
+ <li class="even">even row</li>
+ <li class="odd">odd row</li>
+ </ul>
+ <div class="altItem">
+ <p>(FisheyeLite makes this easy. be creative:)</p>
+ <ul id="fisheyeList">
+ <li class="odd">odd row</li>
+ <li class="even">even row</li>
+ <li class="odd">odd row</li>
+ <li class="even">even row</li>
+ <li class="odd">odd row</li>
+ <li class="even" id="testIdFish">with id</li>
+ <li class="odd">odd row</li>
+ </ul>
+ <p id="clickAlert"></p>
+ </div>
+ </div>
+
+ </div>
+</body>
+</html>
projects / eow / blobdiff