summaryrefslogtreecommitdiff
path: root/includes/js/dojox/fx/tests/example_Line.html
diff options
context:
space:
mode:
authormensonge <mensonge@b3834d28-1941-0410-a4f8-b48e95affb8f>2008-11-13 09:49:11 +0000
committermensonge <mensonge@b3834d28-1941-0410-a4f8-b48e95affb8f>2008-11-13 09:49:11 +0000
commite44a7e37b6c7b5961adaffc62b9042b8d442938e (patch)
tree95b67c356e93163467db2451f2b8cce84ed5d582 /includes/js/dojox/fx/tests/example_Line.html
parenta62b9742ee5e28bcec6872d88f50f25b820914f6 (diff)
downloadsemanticscuttle-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.html80
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>