1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
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(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>
|
