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
author: mensonge 2008-11-13 09:49:11 +0000
committer: mensonge 2008-11-13 09:49:11 +0000
commit: e44a7e37b6c7b5961adaffc62b9042b8d442938e (patch)
tree: 95b67c356e93163467db2451f2b8cce84ed5d582 /includes/js/dojox/fx/tests/example_dojoAnimations.html
parent: a62b9742ee5e28bcec6872d88f50f25b820914f6 (diff)
download: scuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.gz
scuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.zip
1 files changed, 442 insertions, 0 deletions
diff --git a/includes/js/dojox/fx/tests/example_dojoAnimations.html b/includes/js/dojox/fx/tests/example_dojoAnimations.html
new file mode 100644
index 0000000..2365ea1
--- /dev/null
+++ b/includes/js/dojox/fx/tests/example_dojoAnimations.html
@@ -0,0 +1,442 @@
+<!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">&nbsp;</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>
author	mensonge	2008-11-13 09:49:11 +0000
committer	mensonge	2008-11-13 09:49:11 +0000
commit	e44a7e37b6c7b5961adaffc62b9042b8d442938e (patch)
tree	95b67c356e93163467db2451f2b8cce84ed5d582 /includes/js/dojox/fx/tests/example_dojoAnimations.html
parent	a62b9742ee5e28bcec6872d88f50f25b820914f6 (diff)
download	scuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.gz scuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.zip