+++ /dev/null
-<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(function(){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="#">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="#" 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>
projects / eow / blobdiff