/public/javascripts/dojo/dojox/presentation/tests/test_presentation.html

http://enginey.googlecode.com/ · HTML · 163 lines · 119 code · 26 blank · 18 comment · 0 complexity · 6a9a0c045536f56af3adcc1ea988ea78 MD5 · raw file 

    

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

  4. 	
    5. 

  5. 	<title>dojox.presentation - Presentation Mechanism</title>
    6. 

  6. 

  7. 	<style type="text/css">
    8. 

  8. 		@import "../../../dojo/resources/dojo.css";
    9. 

  9. 		@import "../../../dijit/themes/tundra/tundra.css";
    10. 

  10. 		@import "../../../dijit/tests/css/dijitTests.css";
    11. 

  11. 		@import "../resources/Show.css";
    12. 

  12. 	</style>
    13. 

  13. 

  14. 	<script type="text/javascript"> djConfig = { isDebug: true, parseOnLoad: true, popup:true }; </script>
    15. 

  15. 	<script type="text/javascript" src="../../../dojo/dojo.js"></script>
    16. 

  16. 	<script type="text/javascript" src="../../../dijit/form/Button.js"></script>
    17. 

  17. 			
    18. 

  18. 	<script type="text/javascript">
    19. 

  19. 		dojo.require("dojox.presentation");
    20. 

  20. 		dojo.require("dijit._Calendar"); 
    21. 

  21. 		dojo.require("dijit.TitlePane"); 
    22. 

  22. 		dojo.require("dojo.parser"); 
    23. 

  23. 		dojo.require("dojo.fx");
    24. 

  24. 		dojo.require("dojo.dnd.move");
    25. 

  25. 	</script>
    26. 

  26. 

  27. 	<script type="text/javascript">
    28. 

  28. 		var externalAnimation = null;
    29. 

  29. 		var titleCount=0;
    30. 

  30. 		var titles = [
    31. 

  31. 			"Just Kidding",
    32. 

  32. 			"The Title Will keep changing",
    33. 

  33. 			"but you can click to advance",
    34. 

  34. 			"nonthing fancy",
    35. 

  35. 			"just an example of",
    36. 

  36. 			"an external function controlling a slide."
    37. 

  37. 			];
    38. 

  38. 		function playIt() {
    39. 

  39. 			var node = dijit.byId('animated').slideTitle;
    40. 

  40. 			console.debug(node); 
    41. 

  41. 			// this is the fanciest animation chain i could thing of atm
    42. 

  42. 			tmpTitle = titles[titleCount++] || titles[0];
    43. 

  43. 			
    44. 

  44. 			externalAnimation = dojo.fx.chain([
    45. 

  45. 				dojo.fadeOut({ node: node,
    46. 

  46. 					duration: 500,
    47. 

  47. 					onEnd: dojo.hitch(this,function(){
    48. 

  48. 						node.innerHTML = tmpTitle;
    49. 

  49. 					})
    50. 

  50. 				}),
    51. 

  51. 				dojo.animateProperty({
    52. 

  52. 					node: node,
    53. 

  53. 					duration: 10,
    54. 

  54. 					properties: { letterSpacing: {
    55. 

  55. 						end:-26.3, unit: 'em', start:3.2
    56. 

  56. 						}	
    57. 

  57. 					}
    58. 

  58. 					
    59. 

  59. 				}),
    60. 

  60. 				dojo.fadeIn({ node: node,
    61. 

  61. 					duration:300
    62. 

  62. 				}),
    63. 

  63. 				dojo.animateProperty({
    64. 

  64. 					node: node,
    65. 

  65. 					duration: 800,
    66. 

  66. 					properties: { letterSpacing: {
    67. 

  67. 						end:2.8, unit: 'em' , start:-26.0
    68. 

  68. 						}
    69. 

  69. 					}
    70. 

  70. 				})
    71. 

  71. 			]);
    72. 

  72. 			setTimeout(function(){externalAnimation.play();},50); 
    73. 

  73. 		}
    74. 

  74. 

  75. 		function makeDraggable(node) {
    76. 

  76. 			var tmp = new dojo.dnd.Moveable(node); 
    77. 

  77. 		}
    78. 

  78. 

  79. 	</script>
    80. 

  80. 

  81. </head>
    82. 

  82. <body class="tundra">
    83. 

  83. 	<div dojoType="dojox.presentation.Deck" id="testPresentation">
    84. 

  84. 		<div dojoType="dojox.presentation.Slide" id="myFirstSlide" title="Introduction">
    85. 

  85. 		
    86. 

  86. 			<p>This is a brief overview of what this presentation widget is capable of.</p>
    87. 

  87. 

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

    90. 

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

  91. 			<input dojoType="dojox.presentation.Action" forSlide="one" toggle="wipe">
    92. 

  92. 

  93. 		</div>
    94. 

  94. 

  95. 		<div dojoType="dojox.presentation.Slide" title="Basic Actions">
    96. 

  96. 			<p>Click, and more text will appear</p>
    97. 

  97. 

  98. 			<div dojoType="dojox.presentation.Part" as="one">
    99. 

  99. 				<p>Lorem something something. I am text, hear me _roar_.</p>
    100. 

  100. 			</div>
    101. 

  101. 			<input dojoType="dojox.presentation.Action" forSlide="one" on="click" toggle="fade">
    102. 

  102. 		
    103. 

  103. 			<div dojoType="dojox.presentation.Part" as="me">
    104. 

  104. 				I am here to make sure click-advancing is disabled on normal input type elements:
    105. 

  105. 				<ul>
    106. 

  106. 					<li><a href="#">href</a></li>
    107. 

  107. 					<li>Input: <input type="text" name="foo"></li>
    108. 

  108. 				</ul>
    109. 

  109. 

  110. 			</div>
    111. 

  111. 			<input dojoType="dojox.presentation.Action" forslide="me" toggle="slide">
    112. 

  112. 

  113. 

  114. 		</div>
    115. 

  115. 		<div dojoType="dojox.presentation.Slide" title="Automatically Advance">
    116. 

  116. 			
    117. 

  117. 			<p dojoType="dojox.presentation.Part" as="one">First You See me ...</p>
    118. 

  118. 			<p dojoType="dojox.presentation.Part" as="two">Then you see ME ...</p>
    119. 

  119. 			<p dojoType="dojox.presentation.Part" as="three" style="padding:20px;">oh yeah!</p>
    120. 

  120. 			
    121. 

  121. 

  122. 			<input dojoType="dojox.presentation.Action" forSlide="one" on="click" toggle="fade" delay="1500">
    123. 

  123. 			<input dojoType="dojox.presentation.Action" forSlide="two" toggle="wipe" delay="1500">
    124. 

  124. 			<input dojoType="dojox.presentation.Action" forSlide="three" toggle="wipe" delay="1500">
    125. 

  125. 

  126. 		</div>
    127. 

  127. 		<!--
    128. 

  128. 		<div dojoType="dojox.presentation.Slide" title="Remote Slide" href="_ext1.html"></div>
    129. 

  129. 		-->
    130. 

  130. 		<div dojoType="dojox.presentation.Slide" title="Click Blocking" id="animated">
    131. 

  131. 			<p>You cannot click on this page</p>
    132. 

  132. 			<p dojoType="dojox.presentation.Part" as="1">I told you that you can't click ...</p>
    133. 

  133. 			<a href="#" onClick="playIt()">click here to move the title</a>
    134. 

  134. 			<input dojoType="dojox.presentation.Action" forSlide="1" toggle="wipe">
    135. 

  135. 			<input dojoType="dojox.presentation.Action" forSlide="2">
    136. 

  136. 			<input dojoType="dojox.presentation.Action" forSlide="1" toggle="fade">
    137. 

  137. 		</div>
    138. 

  138. 

  139. 		<div dojoType="dojox.presentation.Slide" title="Widgets in Slide" noClick="true" id="wdijit">
    140. 

  140. 			<p>There is a widget in this page:</p>
    141. 

  141. 			<!--p>clicking has been stopped on this page to demonstrate the usage ..</p>
    142. 

  142. 			<div dojoType="dojox.presentation.Part" as="foo" startVisible="true">
    143. 

  143. 				There _should_ be a _Calendar widget here<br>
    144. 

  144. 				<div dojoType="dijit._Calendar"></div>
    145. 

  145. 			</div>
    146. 

  146. 			<div dojoType="dijit.TitlePane" title="foobar" id="newTitlePane"
    147. 

  147. 					style="width:300px; position:absolute; right:40px; top:125px;">
    148. 

  148. 					I am a titlepane, you can do cool things with me. 
    149. 

  149. 					<button onClick="makeDraggable('newTitlePane')">Make me Draggable!</button>
    150. 

  150. 			</div>
    151. 

  151. 			<div style="width:400px; position:absolute; right: 40px; bottom:40px;">
    152. 

  152. 			<p>... so I'm providing a next button: <button dojoType="dijit.form.Button" value="Next" onClick="dijit.byId('testPresentation').nextSlide();">Next</button></p>
    153. 

  153. 			</div>
    154. 

  154. 			<input type="dojox.presentation.Action" forSlide="foo" toggle="slide">
    155. 

  155. 		-->
    156. 

  156. 		</div>
    157. 

  157. 

  158. 		<div dojoType="dojox.presentation.Slide" title="The End">
    159. 

  159. 			<p>Thanks for watching!</p>
    160. 

  160. 		</div>
    161. 

  161. 	</div>
    162. 

  162. </body>
    163. 

  163. </html>
    164.