| 2150 |
mathias |
1 |
<html>
|
|
|
2 |
<head>
|
|
|
3 |
|
|
|
4 |
<title>dojox.presentation - Presentation Mechanism</title>
|
|
|
5 |
|
|
|
6 |
<script type="text/javascript"> djConfig = { isDebug: true, parseOnLoad: true }; </script>
|
|
|
7 |
<script type="text/javascript" src="../../../dojo/dojo.js"></script>
|
|
|
8 |
<script type="text/javascript" src="../../../dijit/form/Button.js"></script>
|
|
|
9 |
|
|
|
10 |
|
|
|
11 |
<script type="text/javascript">
|
|
|
12 |
dojo.require("dojox.presentation");
|
|
|
13 |
dojo.require("dijit._Calendar");
|
|
|
14 |
dojo.require("dijit.TitlePane");
|
|
|
15 |
dojo.require("dojo.parser");
|
|
|
16 |
dojo.require("dojo.fx");
|
|
|
17 |
dojo.require("dojo.dnd.move");
|
|
|
18 |
</script>
|
|
|
19 |
|
|
|
20 |
<style type="text/css">
|
|
|
21 |
@import "../../../dojo/resources/dojo.css";
|
|
|
22 |
@import "../../../dijit/themes/tundra/tundra.css";
|
|
|
23 |
@import "../../../dijit/tests/css/dijitTests.css";
|
|
|
24 |
@import "../resources/Show.css";
|
|
|
25 |
</style>
|
|
|
26 |
|
|
|
27 |
<script type="text/javascript">
|
|
|
28 |
var externalAnimation = null;
|
|
|
29 |
var titleCount=0;
|
|
|
30 |
var titles = [
|
|
|
31 |
"Just Kidding",
|
|
|
32 |
"The Title Will keep changing",
|
|
|
33 |
"but you can click to advance",
|
|
|
34 |
"nonthing fancy",
|
|
|
35 |
"just an example of",
|
|
|
36 |
"an external function controlling a slide."
|
|
|
37 |
];
|
|
|
38 |
function playIt() {
|
|
|
39 |
var node = dijit.byId('animated').slideTitle;
|
|
|
40 |
console.debug(node);
|
|
|
41 |
// this is the fanciest animation chain i could thing of atm
|
|
|
42 |
tmpTitle = titles[titleCount++] || titles[0];
|
|
|
43 |
|
|
|
44 |
externalAnimation = dojo.fx.chain([
|
|
|
45 |
dojo.fadeOut({ node: node,
|
|
|
46 |
duration: 500,
|
|
|
47 |
onEnd: dojo.hitch(this,function(){
|
|
|
48 |
node.innerHTML = tmpTitle;
|
|
|
49 |
})
|
|
|
50 |
}),
|
|
|
51 |
dojo.animateProperty({
|
|
|
52 |
node: node,
|
|
|
53 |
duration: 10,
|
|
|
54 |
properties: { letterSpacing: {
|
|
|
55 |
end:-26.3, unit: 'em', start:3.2
|
|
|
56 |
}
|
|
|
57 |
}
|
|
|
58 |
|
|
|
59 |
}),
|
|
|
60 |
dojo.fadeIn({ node: node,
|
|
|
61 |
duration:300
|
|
|
62 |
}),
|
|
|
63 |
dojo.animateProperty({
|
|
|
64 |
node: node,
|
|
|
65 |
duration: 800,
|
|
|
66 |
properties: { letterSpacing: {
|
|
|
67 |
end:2.8, unit: 'em' , start:-26.0
|
|
|
68 |
}
|
|
|
69 |
}
|
|
|
70 |
})
|
|
|
71 |
]);
|
|
|
72 |
setTimeout("externalAnimation.play()",50);
|
|
|
73 |
}
|
|
|
74 |
|
|
|
75 |
function makeDraggable(node) {
|
|
|
76 |
var tmp = new dojo.dnd.Moveable(node);
|
|
|
77 |
}
|
|
|
78 |
|
|
|
79 |
</script>
|
|
|
80 |
|
|
|
81 |
</head>
|
|
|
82 |
<body class="tundra">
|
|
|
83 |
<div dojoType="dojox.presentation.Deck" id="testPresentation">
|
|
|
84 |
<div dojoType="dojox.presentation.Slide" id="myFirstSlide" title="Introduction">
|
|
|
85 |
|
|
|
86 |
<p>This is a brief overview of what this presentation widget is capable of.</p>
|
|
|
87 |
|
|
|
88 |
<div dojoType="dojox.presentation.Part" as="one">... it's new, and completely different, so watch close</div>
|
|
|
89 |
|
|
|
90 |
<input dojoType="dojox.presentation.Action" forSlide="one" toggle="fade" duration="3000">
|
|
|
91 |
<input dojoType="dojox.presentation.Action" forSlide="one" toggle="wipe">
|
|
|
92 |
|
|
|
93 |
</div>
|
|
|
94 |
|
|
|
95 |
<div dojoType="dojox.presentation.Slide" title="Basic Actions">
|
|
|
96 |
<p>Click, and more text will appear</p>
|
|
|
97 |
|
|
|
98 |
<div dojoType="dojox.presentation.Part" as="one">
|
|
|
99 |
<p>Lorem something something. I am text, hear me _roar_.</p>
|
|
|
100 |
</div>
|
|
|
101 |
<input dojoType="dojox.presentation.Action" forSlide="one" on="click" toggle="fade">
|
|
|
102 |
|
|
|
103 |
<div dojoType="dojox.presentation.Part" as="me">
|
|
|
104 |
I am here to make sure click-advancing is disabled on normal input type elements:
|
|
|
105 |
<ul>
|
|
|
106 |
<li><a href="#">href</a></li>
|
|
|
107 |
<li>Input: <input type="text" name="foo"></li>
|
|
|
108 |
</ul>
|
|
|
109 |
|
|
|
110 |
</div>
|
|
|
111 |
<input dojoType="dojox.presentation.Action" forslide="me" toggle="slide">
|
|
|
112 |
|
|
|
113 |
|
|
|
114 |
</div>
|
|
|
115 |
<div dojoType="dojox.presentation.Slide" title="Automatically Advance">
|
|
|
116 |
|
|
|
117 |
<p dojoType="dojox.presentation.Part" as="one">First You See me ...</p>
|
|
|
118 |
<p dojoType="dojox.presentation.Part" as="two">Then you see ME ...</p>
|
|
|
119 |
<p dojoType="dojox.presentation.Part" as="three" style="padding:20px;">oh yeah!</p>
|
|
|
120 |
|
|
|
121 |
|
|
|
122 |
<input dojoType="dojox.presentation.Action" forSlide="one" on="click" toggle="fade" delay="1500">
|
|
|
123 |
<input dojoType="dojox.presentation.Action" forSlide="two" toggle="wipe" delay="1500">
|
|
|
124 |
<input dojoType="dojox.presentation.Action" forSlide="three" toggle="wipe" delay="1500">
|
|
|
125 |
|
|
|
126 |
</div>
|
|
|
127 |
<!--
|
|
|
128 |
<div dojoType="dojox.presentation.Slide" title="Remote Slide" href="_ext1.html"></div>
|
|
|
129 |
-->
|
|
|
130 |
<div dojoType="dojox.presentation.Slide" title="Click Blocking" id="animated">
|
|
|
131 |
<p>You cannot click on this page</p>
|
|
|
132 |
<p dojoType="dojox.presentation.Part" as="1">I told you that you can't click ...</p>
|
|
|
133 |
<a href="#" onClick="playIt()">click here to move the title</a>
|
|
|
134 |
<input dojoType="dojox.presentation.Action" forSlide="1" toggle="wipe">
|
|
|
135 |
<input dojoType="dojox.presentation.Action" forSlide="2">
|
|
|
136 |
<input dojoType="dojox.presentation.Action" forSlide="1" toggle="fade">
|
|
|
137 |
</div>
|
|
|
138 |
|
|
|
139 |
<div dojoType="dojox.presentation.Slide" title="Widgets in Slide" noClick="true" id="wdijit">
|
|
|
140 |
<p>There is a widget in this page:</p>
|
|
|
141 |
<p>clicking has been stopped on this page to demonstrate the usage ..</p>
|
|
|
142 |
<div dojoType="dojox.presentation.Part" as="foo" startVisible="true">
|
|
|
143 |
There _should_ be a _Calendar widget here<br>
|
|
|
144 |
<div dojoType="dijit._Calendar"></div>
|
|
|
145 |
</div>
|
|
|
146 |
<div dojoType="dijit.TitlePane" title="foobar" id="newTitlePane"
|
|
|
147 |
style="width:300px; position:absolute; right:40px; top:125px;">
|
|
|
148 |
I am a titlepane, you can do cool things with me.
|
|
|
149 |
<button onClick="makeDraggable('newTitlePane')">Make me Draggable!</button>
|
|
|
150 |
</div>
|
|
|
151 |
<div style="width:400px; position:absolute; right: 40px; bottom:40px;">
|
|
|
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 |
</div>
|
|
|
154 |
<input type="dojox.presentation.Action" forSlide="foo" toggle="slide">
|
|
|
155 |
</div>
|
|
|
156 |
|
|
|
157 |
<div dojoType="dojox.presentation.Slide" title="The End">
|
|
|
158 |
<p>Thanks for watching!</p>
|
|
|
159 |
</div>
|
|
|
160 |
</div>
|
|
|
161 |
</body>
|
|
|
162 |
</html>
|