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>Full Effects Test Suite</title> | |
6 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | |
7 | <link rel="stylesheet" href="../../include/css/documentation.css" type="text/css" /> | |
8 | <script src="../../MochiKit/MochiKit.js" type="text/javascript"></script> | |
9 | <style type="text/css"> | |
10 | #demo { | |
11 | } | |
12 | ||
13 | #demo li { | |
14 | color: #8ba726; | |
15 | font-size: 1.2em; | |
16 | } | |
17 | ||
18 | #democontainer { | |
19 | margin: 30px 5px 0px 5px; | |
20 | } | |
21 | ||
22 | #demoall { | |
23 | position: absolute; | |
24 | top: 250px; | |
25 | left: 400px; | |
26 | font-size: 20px; | |
27 | background: #f3f3f3; | |
28 | color: #1C1D1F; | |
29 | text-align: center; | |
30 | border: 1px solid #ccc; | |
31 | width: 150px; | |
32 | height: 150px; | |
33 | } | |
34 | </style> | |
35 | </head> | |
36 | ||
37 | <body> | |
38 | <div class="document"> | |
39 | <div class="section"> | |
40 | <h1>Full Effects Test Suite</h1> | |
41 | <ul id="demo"> | |
42 | <li onclick="setStyle('demoall', {'display': 'block'});fade('demoall')">fade</li> | |
43 | <li onclick="setStyle('demoall', {'display': 'none'});appear('demoall')">appear</li> | |
44 | <li onclick="setStyle('demoall', {'display': 'block'});puff('demoall')">puff</li> | |
45 | <li onclick="blindDown('demoall')">blindDown</li> | |
46 | <li onclick="setStyle('demoall', {'display': 'block'});blindUp('demoall')">blindUp</li> | |
47 | <li onclick="switchOff('demoall')">switchOff</li> | |
48 | <li onclick="slideDown('demoall')">slideDown</li> | |
49 | <li onclick="slideUp('demoall')">slideUp</li> | |
50 | <li onclick="setStyle('demoall', {'display': 'block'});dropOut('demoall', {'distance': 500})">dropOut</li> | |
51 | <li onclick="setStyle('demoall', {'display': 'block'});shake('demoall')">shake</li> | |
52 | <li onclick="setStyle('demoall', {'display': 'block'});pulsate('demoall')">pulsate</li> | |
53 | <li onclick="setStyle('demoall', {'display': 'block'});squish('demoall')">squish</li> | |
54 | <li onclick="setStyle('demoall', {'display': 'block'});fold('demoall')">fold</li> | |
55 | <li onclick="grow('demoall')">grow</li> | |
56 | <li onclick="setStyle('demoall', {'display': 'block'});shrink('demoall')">shrink</li> | |
57 | <li onclick="setStyle('demoall', {'display': 'block'});Highlight('demoall', {startcolor: '#ffff33'})">Highlight</li> | |
58 | <li onclick="setStyle('demoall', {'display': 'block'});Morph('demoall', {'style': {'font-size': '3px'}, 'queue': 'start'});Morph('demoall', {'style': {'font-size': '20px'}, 'queue': 'end'});">Morph font</li> | |
59 | <li onclick="setStyle('demoall', {'display': 'block'});Morph('demoall', {'style': {'background-color': 'red'}, 'queue': 'start'});Morph('demoall', {'style': {'background-color': '#f3f3f3'}, 'queue': 'end'});">Morph color</li> | |
60 | <li onclick="toggle('demoall', 'blind')">toggle (blind)</li> | |
61 | <li onclick="toggle('demoall', 'slide')">toggle (slide)</li> | |
62 | <li onclick="toggle('demoall', 'appear')">toggle (appear)</li> | |
63 | <li onclick="toggle('demoall', 'size')">toggle (size)</li> | |
64 | </ul> | |
65 | <div id="demoall"> | |
66 | <div id="democontainer">Click on one of the left to see the effect</div> | |
67 | </div> | |
68 | </div> | |
69 | </div> | |
70 | </body> | |
71 | </html> |