New file |
0,0 → 1,162 |
<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="#">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> |