Commit | Line | Data |
---|---|---|
6a1aa64f DV |
1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" |
2 | "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> | |
3 | <html xmlns="http://www.w3.org/1999/xhtml"> | |
4 | <head> | |
5 | <title>Test Effects</title> | |
6 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | |
7 | <link href="effects_combi.css" rel="stylesheet" type="text/css" /> | |
8 | <script src="../../MochiKit/MochiKit.js" type="text/javascript"></script> | |
9 | <script src="../../MochiKit/Position.js" type="text/javascript"></script> | |
10 | <script src="../../MochiKit/Visual.js" type="text/javascript"></script> | |
11 | </head> | |
12 | ||
13 | <body> | |
14 | <h3>Here are demos of all combination effects:</h3> | |
15 | <div class="demo"> | |
16 | <div class="example" id="demo-effect-appear" onclick="MochiKit.Visual.appear('demo-effect-fade')"> | |
17 | <span>Click for Visual.appear demo</span> | |
18 | </div> | |
19 | <div class="example" id="demo-effect-fade" onclick="MochiKit.Visual.fade(this)"> | |
20 | <span>Click for Visual.fade demo</span> | |
21 | </div> | |
22 | <div class="example" id="demo-effect-puff" onclick="MochiKit.Visual.puff(this)"> | |
23 | <span>Click for Visual.puff demo</span> | |
24 | </div> | |
25 | <div class="example" id="demo-effect-blinddown" onclick="MochiKit.Visual.blindDown(this)"> | |
26 | <div style="height:120px;"> | |
27 | ||
28 | <span>Click for Visual.blindDown demo</span> | |
29 | </div> | |
30 | </div> | |
31 | <div class="example" id="demo-effect-blindup" onclick="MochiKit.Visual.blindUp(this)"> | |
32 | <span>Click for Visual.blindUp demo</span> | |
33 | </div> | |
34 | <div class="example" id="demo-effect-switchoff" onclick="MochiKit.Visual.switchOff(this)"> | |
35 | <span>Click for Visual.switchOff demo</span> | |
36 | </div> | |
37 | <div class="example" id="demo-effect-slidedown" onclick="MochiKit.Visual.slideDown(this)"><div style="height:120px;"> | |
38 | <span>Click for Visual.slideDown demo</span> | |
39 | </div></div> | |
40 | <div class="example" id="demo-effect-slideup" onclick="MochiKit.Visual.slideUp(this)"><div style="height:120px;"> | |
41 | <span>Click for Visual.slideUp demo</span> | |
42 | </div></div> | |
43 | <div class="example" id="demo-effect-dropout" onclick="MochiKit.Visual.dropOut(this)"> | |
44 | <span>Click for Visual.dropOut demo</span> | |
45 | </div> | |
46 | <div class="example" id="demo-effect-shake" onclick="MochiKit.Visual.shake(this)"> | |
47 | <span>Click for Visual.shake demo</span> | |
48 | </div> | |
49 | <div class="example" id="demo-effect-pulsate" onclick="MochiKit.Visual.pulsate(this)"> | |
50 | <span>Click for Visual.pulsate demo</span> | |
51 | </div> | |
52 | <div class="example" id="demo-effect-squish" onclick="MochiKit.Visual.squish(this)"> | |
53 | <span>Click for Visual.squish demo</span> | |
54 | </div> | |
55 | <div class="example" id="demo-effect-fold" onclick="MochiKit.Visual.fold(this)"> | |
56 | <span>Click for Visual.fold demo</span> | |
57 | </div> | |
58 | <div class="example" id="demo-effect-grow" onclick="MochiKit.Visual.grow(this)"> | |
59 | <span>Click for Visual.grow demo</span> | |
60 | </div> | |
61 | <div class="example" id="demo-effect-shrink" onclick="MochiKit.Visual.shrink(this)"> | |
62 | <span>Click for Visual.shrink demo</span> | |
63 | </div> | |
64 | <div class="example" id="demo-effect-highlight" onclick="new MochiKit.Visual.Highlight(this)"> | |
65 | <span>Click for Visual.Highlight demo</span> | |
66 | </div> | |
67 | </div> | |
68 | ||
69 | <h3>Here are all demos on one single element:</h3> | |
70 | <ul class="demo"> | |
71 | <li onclick="MochiKit.Visual.appear('demo-all')">Click for Visual.appear demo</li> | |
72 | <li onclick="MochiKit.Visual.fade('demo-all')">Click for Visual.fade demo</li> | |
73 | <li onclick="MochiKit.Visual.puff('demo-all')">Click for Visual.puff demo</li> | |
74 | <li onclick="MochiKit.Visual.blindDown('demo-all')">Click for Visual.blindDown demo</li> | |
75 | <li onclick="MochiKit.Visual.blindUp('demo-all')">Click for Visual.blindUp demo</li> | |
76 | <li onclick="MochiKit.Visual.switchOff('demo-all')">Click for Visual.switchOff demo</li> | |
77 | <li onclick="MochiKit.Visual.slideDown('demo-all')">Click for Visual.slideDown demo</li> | |
78 | <li onclick="MochiKit.Visual.slideUp('demo-all')">Click for Visual.slideUp demo</li> | |
79 | <li onclick="MochiKit.Visual.dropOut('demo-all')">Click for Visual.dropOut demo</li> | |
80 | <li onclick="MochiKit.Visual.shake('demo-all')">Click for Visual.shake demo</li> | |
81 | <li onclick="MochiKit.Visual.pulsate('demo-all')">Click for Visual.pulsate demo</li> | |
82 | <li onclick="MochiKit.Visual.squish('demo-all')">Click for Visual.squish demo</li> | |
83 | <li onclick="MochiKit.Visual.fold('demo-all')">Click for Visual.fold demo</li> | |
84 | <li onclick="MochiKit.Visual.grow('demo-all')">Click for Visual.grow demo</li> | |
85 | <li onclick="MochiKit.Visual.shrink('demo-all')">Click for Visual.shrink demo</li> | |
86 | <li onclick="new MochiKit.Visual.Highlight('demo-all')">Click for Visual.Highlight demo</li> | |
87 | <li onclick="MochiKit.Visual.toggle('demo-all', 'blind')">Click for Visual.toggle demo (blind)</li> | |
88 | <li onclick="MochiKit.Visual.toggle('demo-all', 'slide')">Click for Visual.toggle demo (slide)</li> | |
89 | <li onclick="MochiKit.Visual.toggle('demo-all', 'appear')">Click for Visual.toggle demo (appear)</li> | |
90 | <li onclick="MochiKit.Visual.toggle('demo-all', 'size')">Click for Visual.toggle demo (size)</li> | |
91 | </ul> | |
92 | <div id="demo-all"> | |
93 | <span>Click on one of the left to see the effect</span> | |
94 | </div> | |
95 | <span id="reset" onclick="new MochiKit.Visual.appear('demo-all')">Click here to reset box</span> | |
96 | ||
97 | <div> | |
98 | Links to other samples: | |
99 | <ul> | |
100 | <li><a href="effects_bigslide.html">Big slide effects</a></li> | |
101 | <li><a href="effects_slide.html">Slide effects</a></li> | |
102 | <li><a href="effects_blind.html">Blind effects</a></li> | |
103 | <li><a href="effects_blindslide.html">Blind/Slide effects</a></li> | |
104 | <li><a href="effects_fadeappear.html">Fade/Appear effects</a></li> | |
105 | <li><a href="effects_onload.html">Onload effects</a></li> | |
106 | <li><a href="effects_scroll.html">Scroll effects</a></li> | |
107 | <li><a href="effects_grow_shrink.html">Grow/Shrink effects</a></li> | |
108 | <li><a href="effects_queue.html">Queue effects</a></li> | |
109 | <li><a href="effects_queue_limit.html">Queue limit effects</a></li> | |
110 | </ul> | |
111 | </div> | |
112 | </body> | |
113 | </html> |