diff options
| author | mensonge <mensonge@b3834d28-1941-0410-a4f8-b48e95affb8f> | 2008-11-13 09:49:11 +0000 |
|---|---|---|
| committer | mensonge <mensonge@b3834d28-1941-0410-a4f8-b48e95affb8f> | 2008-11-13 09:49:11 +0000 |
| commit | e44a7e37b6c7b5961adaffc62b9042b8d442938e (patch) | |
| tree | 95b67c356e93163467db2451f2b8cce84ed5d582 /includes/js/dojox/fx/tests/example_Line.html | |
| parent | a62b9742ee5e28bcec6872d88f50f25b820914f6 (diff) | |
| download | semanticscuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.gz semanticscuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.bz2 | |
New feature: basic Ajax suggestion for tags and implementation of Dojo toolkit
git-svn-id: https://semanticscuttle.svn.sourceforge.net/svnroot/semanticscuttle/trunk@151 b3834d28-1941-0410-a4f8-b48e95affb8f
Diffstat (limited to 'includes/js/dojox/fx/tests/example_Line.html')
| -rw-r--r-- | includes/js/dojox/fx/tests/example_Line.html | 80 |
1 files changed, 80 insertions, 0 deletions
diff --git a/includes/js/dojox/fx/tests/example_Line.html b/includes/js/dojox/fx/tests/example_Line.html new file mode 100644 index 0000000..4177e96 --- /dev/null +++ b/includes/js/dojox/fx/tests/example_Line.html @@ -0,0 +1,80 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>using a dojo._Line and dojo._Animation</title> + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../../../dijit/themes/tundra/tundra.css"; + @import "../../../dijit/tests/css/dijitTests.css"; + #node { + position:absolute; + top:100px; left:100px; + width:400px; + height:400px; + padding:12px; + -moz-border-radius:5pt; + overflow:hidden; + border:1px solid #333; + } + </style> + <script type="text/javascript" + djConfig="parseOnLoad: true, isDebug:false" + src="../../../dojo/dojo.js"></script> + <script type="text/javascript"> + dojo.require("dojo.parser"); + dojo.require("dojox.fx.easing"); + dojo.require("dojox.gfx"); + + var surface, shape, line, node; + dojo.addOnLoad(function(){ + // dojo._Line is just a simple class to hold some numbers, and return a given point + // on the line as a percentage, essentially + var _line = new dojo._Line(20,75); // a holder for the numbers 20 .. 75 + node = dojo.byId('node'); + + surface = dojox.gfx.createSurface(node,400,400); + shape = surface.createCircle({ cx: 200, cy: 200, r: 20 }) + .setFill([0,0,255]) + .setStroke({ color:[128,128,128], width: 1}); + + // so we just make a raw _Animation + var _anim = new dojo._Animation({ + // the id of the shape + node: node, + // some easing options + easing: dojox.fx.easing.easeInOut, + // our radius start and end values + curve:_line, + // call transform on the shape with the values + onAnimate: function(){ + shape.setShape({ r: arguments[0] }); + }, + duration:1200 // ms + // rate:100 // ms, so duration/rate iterations + }); + + + dojo.connect(_anim,"onEnd",function(){ + dojo.animateProperty({ + node: node, + duration:1000, + properties: { + left: { end: 300, unit:"px" } + }, + onEnd: function(){ + dojo.fadeOut({ node: node, duration:3000 }).play(); + } + }).play(500); + }); + _anim.play(2000); + }); + </script> +</head> +<body class="tundra"> + + <h1>an "animateProperty" for dojox.gfx</h1> + <div id="node"></div> + +</body> +</html> |