PerfectEquation
/
GZ


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162
							<html>
<head>
	
	<title>dojox.presentation - Presentation Mechanism</title>

	<script type="text/javascript"> djConfig = { isDebug: true, parseOnLoad: true }; </script>
	<script type="text/javascript" src="../../../dojo/dojo.js"></script>
	<script type="text/javascript" src="../../../dijit/form/Button.js"></script>
	
		
	<script type="text/javascript">
		dojo.require("dojox.presentation");
		dojo.require("dijit._Calendar"); 
		dojo.require("dijit.TitlePane"); 
		dojo.require("dojo.parser"); 
		dojo.require("dojo.fx");
		dojo.require("dojo.dnd.move");
	</script>

	<style type="text/css">
		@import "../../../dojo/resources/dojo.css";
	        @import "../../../dijit/themes/tundra/tundra.css";
        	@import "../../../dijit/tests/css/dijitTests.css";
		@import "../resources/Show.css"; 		
	</style>

	<script type="text/javascript">
		var externalAnimation = null;
		var titleCount=0;
		var titles = [
			"Just Kidding",
			"The Title Will keep changing",
			"but you can click to advance",
			"nonthing fancy",
			"just an example of",
			"an external function controlling a slide."
			];
		function playIt() {
			var node = dijit.byId('animated').slideTitle;
			console.debug(node); 
			// this is the fanciest animation chain i could thing of atm
			tmpTitle = titles[titleCount++] || titles[0];
			
			externalAnimation = dojo.fx.chain([
				dojo.fadeOut({ node: node,
					duration: 500,
					onEnd: dojo.hitch(this,function(){
						node.innerHTML = tmpTitle;
					})
				}),
				dojo.animateProperty({
					node: node,
					duration: 10,
					properties: { letterSpacing: {
						end:-26.3, unit: 'em', start:3.2
						}	
					}
					
				}),
				dojo.fadeIn({ node: node,
					duration:300
				}),
				dojo.animateProperty({
					node: node,
					duration: 800,
					properties: { letterSpacing: {
						end:2.8, unit: 'em' , start:-26.0
						}
					}
				})
			]);
			setTimeout("externalAnimation.play()",50); 
		}

		function makeDraggable(node) {
			var tmp = new dojo.dnd.Moveable(node); 
		}

	</script>

</head>
<body class="tundra">
	<div dojoType="dojox.presentation.Deck" id="testPresentation">
		<div dojoType="dojox.presentation.Slide" id="myFirstSlide" title="Introduction">
		
			<p>This is a brief overview of what this presentation widget is capable of.</p>

			<div dojoType="dojox.presentation.Part" as="one">... it's new, and completely different, so watch close</div>

			<input dojoType="dojox.presentation.Action" forSlide="one" toggle="fade" duration="3000">
			<input dojoType="dojox.presentation.Action" forSlide="one" toggle="wipe">

		</div>

		<div dojoType="dojox.presentation.Slide" title="Basic Actions">
			<p>Click, and more text will appear</p>

			<div dojoType="dojox.presentation.Part" as="one">
				<p>Lorem something something. I am text, hear me _roar_.</p>
			</div>
			<input dojoType="dojox.presentation.Action" forSlide="one" on="click" toggle="fade">
		
			<div dojoType="dojox.presentation.Part" as="me">
				I am here to make sure click-advancing is disabled on normal input type elements:
				<ul>
					<li><a href="javascript:;">href</a></li>
					<li>Input: <input type="text" name="foo"></li>
				</ul>

			</div>
			<input dojoType="dojox.presentation.Action" forslide="me" toggle="slide">


		</div>
		<div dojoType="dojox.presentation.Slide" title="Automatically Advance">
			
			<p dojoType="dojox.presentation.Part" as="one">First You See me ...</p>
			<p dojoType="dojox.presentation.Part" as="two">Then you see ME ...</p>
			<p dojoType="dojox.presentation.Part" as="three" style="padding:20px;">oh yeah!</p>
			

			<input dojoType="dojox.presentation.Action" forSlide="one" on="click" toggle="fade" delay="1500">
			<input dojoType="dojox.presentation.Action" forSlide="two" toggle="wipe" delay="1500">
			<input dojoType="dojox.presentation.Action" forSlide="three" toggle="wipe" delay="1500">

		</div>
		<!--
		<div dojoType="dojox.presentation.Slide" title="Remote Slide" href="_ext1.html"></div>
		-->
		<div dojoType="dojox.presentation.Slide" title="Click Blocking" id="animated">
			<p>You cannot click on this page</p>
			<p dojoType="dojox.presentation.Part" as="1">I told you that you can't click ...</p>
			<a href="javascript:;" onClick="playIt()">click here to move the title</a>
			<input dojoType="dojox.presentation.Action" forSlide="1" toggle="wipe">
			<input dojoType="dojox.presentation.Action" forSlide="2">
			<input dojoType="dojox.presentation.Action" forSlide="1" toggle="fade">
		</div>

		<div dojoType="dojox.presentation.Slide" title="Widgets in Slide" noClick="true" id="wdijit">
			<p>There is a widget in this page:</p>
			<p>clicking has been stopped on this page to demonstrate the usage ..</p>
			<div dojoType="dojox.presentation.Part" as="foo" startVisible="true">
				There _should_ be a _Calendar widget here<br>
				<div dojoType="dijit._Calendar"></div>
			</div>
			<div dojoType="dijit.TitlePane" title="foobar" id="newTitlePane"
					style="width:300px; position:absolute; right:40px; top:125px;">
					I am a titlepane, you can do cool things with me. 
					<button onClick="makeDraggable('newTitlePane')">Make me Draggable!</button>
			</div>
			<div style="width:400px; position:absolute; right: 40px; bottom:40px;">
			<p>... so I'm providing a next button: <button dojoType="dijit.form.Button" value="Next" onClick="dijit.byId('testPresentation').nextSlide();">Next</button></p>
			</div>
			<input type="dojox.presentation.Action" forSlide="foo" toggle="slide">
		</div>

		<div dojoType="dojox.presentation.Slide" title="The End">
			<p>Thanks for watching!</p>
		</div>
	</div>
</body>
</html>