+++ /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