root / trunk / demos / lfx / lfx.html

Revision 7826, 5.8 kB (checked in by dmachi, 22 months ago)

minor change to recent lfx demo commit

Line 
1<!DOCTYPE html
2        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
6<head>
7        <title>HTML Effects</title>
8        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
9        <style type="text/css">
10                body,html {
11                        background:#fff;
12                }
13
14                #fadeElm {
15                        padding : 0px;
16                        background : transparent;
17                        color : #000;
18                        position:absolute; top:50px; left:300px;               
19                        }
20
21                #fadeNav { color:#666; overflow:hidden; font:10pt Arial,sans-serif;  }
22                #fadeNav ul { margin:5px; padding:12px;   }
23
24                #exploder {
25       
26                        width:200px; height:175px;
27                        position: absolute;
28                        top:200px; left:300px;
29                        background:#dedede;
30                        border:1px solid #000;
31                        text-align:center;
32                        display:none;
33
34                }
35
36        </style>
37        <script type="text/javascript" src="../../dojo.js"></script>
38        <script type="text/javascript">
39                dojo.require("dojo.lfx.*");
40                dojo.require("dojo.lfx.rounded");
41                dojo.require("dojo.widget.Menu2");
42                dojo.require("dojo.widget.AccordionContainer");
43
44
45        var fadeElem, flash, unflash, wiper;
46        var fadeOverEnabled = true;
47
48        dojo.addOnLoad(function() {
49                dojo.html.setOpacity(dojo.byId('fadeElm'), 0.15)
50                // see notes:
51                //slideNodeLots('fadeElm');
52        });
53
54        function slideNodeLots(node) {
55                // chained animations break here, because you setup the animation initially
56                // and each animation calculated the node's inital position at the time of
57                // animation creation. we could put a callback function to call the animation
58                // again, but there will probably be a noticable delay between animations.
59                var slide1 = dojo.lfx.html.slideBy(node, { top: 50, left: 0 } , 300);
60                var slide2 = dojo.lfx.html.slideBy(node, { top: 0, left: 50 } , 300);
61                var slide3 = dojo.lfx.html.slideBy(node, { top: -50, left: 0 } , 300);
62                var slide4 = dojo.lfx.html.slideBy(node, { top: 0, left: -50 } , 300);
63                dojo.lfx.chain(slide1,slide2,slide3,slide4).play();
64        }
65
66        function showFade() {
67                if (fadeOverEnabled) {
68                dojo.lfx.html.fade('fadeElm',{ start:dojo.html.getOpacity(dojo.byId('fadeElm')), end:0.99}, 300).play()         
69                }
70        }
71
72        function stopFade() {
73                if (fadeOverEnabled) {
74                        dojo.lfx.html.fade('fadeElm',{ start:dojo.html.getOpacity(dojo.byId('fadeElm')), end:0.15}, 300).play()
75                }
76        }
77
78        function roundExploder() {
79                // return;
80                dojo.lfx.rounded({
81                                tl:{ radius:15 },
82                                tr:{ radius:15 },
83                                bl:{ radius:15 },
84                                br:{ radius:15 }
85                        },["exploder"]);
86        }
87
88        function testExplode(start){
89                dojo.lfx.explode(start, "exploder", 250).play();
90        }
91
92        function testImplode(start){
93                dojo.lfx.implode("exploder", start, 250).play();
94        }
95
96
97        function toggleFadeEnabled() {
98
99        fadeOverEnabled = (fadeOverEnabled) ? false : true;
100        if (!fadeOverEnabled) {
101                dojo.html.setOpacity('fadeElm',0.99);
102                } else {
103                dojo.html.setOpacity('fadeElm',0.15);
104                }
105       
106        }
107
108        function wowi(node) {
109                var wipeOut = dojo.lfx.wipeOut(node, null, null, function(n) {
110                        n.innerHTML = "I have been replaced "
111                                + "with something completely different "
112                                + "in the middle of the wipe effects.";
113                        dojo.lfx.wipeIn(n).play();
114                });
115                wipeOut.play();
116        }
117        </script>
118</head>
119<body>
120
121        <h2>dojo.lfx demo(s)</h2>
122
123        <div id="fadeNav">
124
125        <div id="ControlNav" dojoType="AccordionContainer" duration="200" 
126                style="float:left; margin-right:30px; width:200px;
127                height:320px; overflow:hidden; ">
128
129                <div dojoType="ContentPane" selected="true" label="Fade(s)" style="overflow:scroll;">
130        <ul>   
131                <li><a href="javascript:void(dojo.lfx.html.fadeOut('fadeElm', 300).play())">Fade out</a></li>
132                <li><a href="javascript:void(dojo.lfx.html.fadeIn('fadeElm', 300).play())">Fade in</a></li>
133                <li><a href="javascript:void(dojo.lfx.html.fade('fadeElm',{ start:0.99, end:0.25}, 300).play())">fade from 100% -> 25%</a></li>
134                <li><a href="javascript:void(dojo.lfx.html.fade('fadeElm',{ start:dojo.html.getOpacity(dojo.byId('fadeElm')), end:0.25}, 300).play())">fade from current -> 25%</a></li>
135                <li><a href="javascript:void(dojo.html.setOpacity(dojo.byId('fadeElm'), 0.5))">Set opacity = 50% (no transition)</a></li>
136                <li><a href="javascript:void(toggleFadeEnabled())">Toggle mouseOver Fade</a></li>
137        </ul>
138
139                </div>
140
141                <div dojoType="ContentPane" label="Slide(s)" style="overflow:auto;">
142        <ul>
143        <li><a href="javascript:void(dojo.lfx.html.slideTo('fadeElm', { top: 200, left: 200 }, 300).play())">Slide
144to: 200, 200</a></li>
145        <li>
146        <a href="javascript:void(dojo.lfx.html.slideBy('fadeElm', { top: -50, left: -50 } , 300).play())">Slide by: -50, -50</a>
147        </li><li>
148        <a href="javascript:void(dojo.lfx.html.slideBy('fadeElm', { top: 50, left: 50 } , 300).play())">Slide by: 50, 50</a>
149        </li><li>
150        <a href="javascript:void(dojo.lfx.html.slideTo('fadeElm', { top: 50, left: 300 }, 300).play())">Reset</a>
151        </li>
152                </div>
153
154                <div dojoType="ContentPane" label="Wipe(s)" style="overflow:auto;">
155
156                        <ul>
157
158                        <li>
159                        <div id="wiper2">
160                        This one does a wipeOut+wipeIn that you could use
161                        to replace the content. Go ahead, give it a
162                        <a href="javascript:;" onclick="wowi(this.parentNode)">try</a>
163                        </div>
164
165                        </li>
166
167                        <li><a href="javascript:wowi('fadeElm');">wipeOut/In the logo</a></li>
168
169                        </ul>
170
171
172                </div>
173
174                <div dojoType="ContentPane" label="Explosion(s)" style="overflow:auto;">
175
176                <ul>
177                        <li><a href="javascript:;" onclick="testExplode(this)">Explode!</a></li>
178                        <li><a href="javascript:;" onclick="testImplode(this)">Implode!</a></li>
179<!--                    <li>broken:<br /><a href="javascript:roundExploder();">Rounded Corners</a></li> -->
180                </ul>
181                       
182
183                </div>
184
185
186
187                <div dojoType="ContentPane" label="empty" style="overflow:auto;"></div>
188
189        </div>
190
191
192        </div>
193
194       
195
196        <div id="fadeElm" onMouseOver="showFade()" onMouseOut="stopFade()"><img src="dojoLogo.png" alt="Dojo Logo" /></div>
197
198        <div id="exploder">
199                <img src="dojoLogo.png" alt="Dojo Logo Explode instance" />
200                <br /><a href="http://dojotoolkit.org">Link to dojotoolkit.org</a>
201        </div>
202</body>
203</html>
Note: See TracBrowser for help on using the browser.