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
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Effects</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="effects_combi.css" rel="stylesheet" type="text/css" />
<script src="../../lib/MochiKit/MochiKit.js" type="text/javascript"></script>
<script src="../../lib/MochiKit/Position.js" type="text/javascript"></script>
<script src="../../lib/MochiKit/Visual.js" type="text/javascript"></script>
<script type="text/javascript">
function showEffect() {
f = document.forms[0];
v = f['effect'].value;
if (v.substring(0, 1) == '+') {
v = "MochiKit.Visual.toggle('demo-all','" + v.substring(1) + "'";
} else {
v = "MochiKit.Visual." + v + "('demo-all'";
}
if (f['slow'].checked) {
v += ',{duration:4}';
}
v += ')';
var v = eval(v);
}
function resetBox() {
e = MochiKit.DOM.getElement('demo-all');
MochiKit.Visual.appear(e);
MochiKit.Style.setStyle(e, {});
}
</script>
</head>
<body>
<h3>Here are demos of all combination effects:</h3>
<div class="demo">
<div class="example" id="demo-effect-appear" onclick="MochiKit.Visual.appear('demo-effect-fade')">
<span>Click for Visual.appear demo</span>
</div>
<div class="example" id="demo-effect-fade" onclick="MochiKit.Visual.fade(this)">
<span>Click for Visual.fade demo</span>
</div>
<div class="example" id="demo-effect-puff" onclick="MochiKit.Visual.puff(this)">
<span>Click for Visual.puff demo</span>
</div>
<div class="example" id="demo-effect-blinddown" onclick="MochiKit.Visual.blindDown(this)">
<span>Click for Visual.blindDown demo</span>
</div>
<div class="example" id="demo-effect-blindup" onclick="MochiKit.Visual.blindUp(this)">
<span>Click for Visual.blindUp demo</span>
</div>
<div class="example" id="demo-effect-switchoff" onclick="MochiKit.Visual.switchOff(this)">
<span>Click for Visual.switchOff demo</span>
</div>
<div class="example" id="demo-effect-slidedown" onclick="MochiKit.Visual.slideDown(this)">
<span>Click for Visual.slideDown demo</span>
</div>
<div class="example" id="demo-effect-slideup" onclick="MochiKit.Visual.slideUp(this)">
<span>Click for Visual.slideUp demo</span>
</div>
<div class="example" id="demo-effect-dropout" onclick="MochiKit.Visual.dropOut(this)">
<span>Click for Visual.dropOut demo</span>
</div>
<div class="example" id="demo-effect-shake" onclick="MochiKit.Visual.shake(this)">
<span>Click for Visual.shake demo</span>
</div>
<div class="example" id="demo-effect-pulsate" onclick="MochiKit.Visual.pulsate(this)">
<span>Click for Visual.pulsate demo</span>
</div>
<div class="example" id="demo-effect-squish" onclick="MochiKit.Visual.squish(this)">
<span>Click for Visual.squish demo</span>
</div>
<div class="example" id="demo-effect-fold" onclick="MochiKit.Visual.fold(this)">
<span>Click for Visual.fold demo</span>
</div>
<div class="example" id="demo-effect-grow" onclick="MochiKit.Visual.grow(this)">
<span>Click for Visual.grow demo</span>
</div>
<div class="example" id="demo-effect-shrink" onclick="MochiKit.Visual.shrink(this)">
<span>Click for Visual.shrink demo</span>
</div>
<div class="example" id="demo-effect-highlight" onclick="new MochiKit.Visual.Highlight(this)">
<span>Click for Visual.Highlight demo</span>
</div>
</div>
<h3>Here are all demos on one single element:</h3>
<div id="demo-all" class="example" onclick="showEffect()">
<span>Click to see the selected effect</span>
</div>
<form action="" style="margin-left:140px;height:150px;">
<fieldset style="border:none;">
<select name="effect" size="1">
<optgroup label="Single effects">
<option value="appear">appear</option>
<option value="fade">fade</option>
<option value="puff">puff</option>
<option value="blindDown">blindDown</option>
<option value="blindUp">blindUp</option>
<option value="slideDown">slideDown</option>
<option value="slideUp">slideUp</option>
<option value="switchOff">switchOff</option>
<option value="dropOut">dropOut</option>
<option value="shake">shake</option>
<option value="pulsate">pulsate</option>
<option value="squish">squish</option>
<option value="fold">fold</option>
<option value="grow">grow</option>
<option value="shrink">shrink</option>
<option value="Highlight">Highlight</option>
</optgroup>
<optgroup label="Toggle effects">
<option value="+appear">appear</option>
<option value="+blind">blind</option>
<option value="+slide">slide</option>
<option value="+size">size</option>
</optgroup>
</select>
<input type="checkbox" name="slow"/> in slow-motion
</fieldset>
<fieldset style="border:none;">
<input type="button" name="show" value="Click to show effect" onclick="showEffect()"/>
<input type="button" name="show" value="Click to reset box" onclick="resetBox()"/>
</fieldset>
</form>
<div class="demo">
<h3>Links to other samples:</h3>
<ul style="float:left;margin-top:0;">
<li><a href="effects_bigslide.html">Big slide effects</a></li>
<li><a href="effects_slide.html">Slide effects</a></li>
<li><a href="effects_blind.html">Blind effects</a></li>
<li><a href="effects_blindslide.html">Blind/Slide effects</a></li>
<li><a href="effects_fadeappear.html">Fade/Appear effects</a></li>
</ul>
<ul style="float:left;margin-top:0">
<li><a href="effects_onload.html">Onload effects</a></li>
<li><a href="effects_scroll.html">Scroll effects</a></li>
<li><a href="effects_grow_shrink.html">Grow/Shrink effects</a></li>
<li><a href="effects_queue.html">Queue effects</a></li>
<li><a href="effects_queue_limit.html">Queue limit effects</a></li>
</ul>
</div>
<div class="demo"/>
</body>
</html>
|
