← Back to branch summary

~lutostag/ubuntu/utopic/maas/1.5.2

« back to all changes in this revision

Viewing changes to src/maasserver/static/jslibs/yui/3.4.1/docs/anim/colors.html

  • Committer: Package Import Robot
  • Author(s): Andres Rodriguez
  • Date: 2012-03-15 18:14:08 UTC
  • mfrom: (1.1.3)
  • Revision ID: package-import@ubuntu.com-20120315181408-zgl94hzo0x4n99an
Tags: 0.1+bzr295+dfsg-0ubuntu2
* debian/patches:
  - 01-fix-database-settings.patch: Update to set PSERV_URL.
  - 02-pserv-config.patch: Set port to 8001.
* debian/maas.postinst: Run maas-import-isos on install.
* debian/control: Depends on rabbitmq-server.

Show diffs side-by-side

added added

removed removed

Lines of Context:
src/maasserver/static/jslibs/yui/3.4.1/docs/anim/colors.html
 
1
<!DOCTYPE html>
 
2
<html lang="en">
 
3
<head>
 
4
    <meta charset="utf-8">
 
5
    <title>Example: Animating Colors</title>
 
6
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
 
7
    <link rel="stylesheet" href="../assets/css/main.css">
 
8
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
 
9
    <script src="../../build/yui/yui-min.js"></script>
 
10
</head>
 
11
<body>
 
12
 
 
13
<div id="doc">
 
14
    <h1>Example: Animating Colors</h1>
 
15
 
 
16
    
 
17
 
 
18
    <div class="yui3-g">
 
19
        <div id="main" class="yui3-u">
 
20
            <div class="content"><link href="../assets/anim/anim.css" rel="stylesheet" type="text/css">
 
21
<div class="intro">
 
22
    <p>This demonstrates how to animate color attributes.</p>
 
23
    <p>Mouse over the link to begin the animation.</p>
 
24
</div>
 
25
 
 
26
<div class="example">
 
27
<a href="#" id="demo">hover me</a>
 
28
 
 
29
<script type="text/javascript">
 
30
YUI().use('anim', function(Y) {
 
31
    var node = Y.one('#demo');
 
32
 
 
33
    var anim = new Y.Anim({
 
34
        node: node,
 
35
        from: {
 
36
            backgroundColor:node.getStyle('backgroundColor'),
 
37
            color: node.getStyle('color'),
 
38
            borderColor: node.getStyle('borderTopColor')
 
39
        },
 
40
 
 
41
        to: {
 
42
            color: '#fff',
 
43
            backgroundColor:'#ffa928',
 
44
            borderColor: '#71241a'
 
45
        },
 
46
 
 
47
        duration:0.5
 
48
    });
 
49
 
 
50
    var hover = function(e) {
 
51
        var reverse = false;
 
52
        if (anim.get('running')) {
 
53
            anim.pause();
 
54
        }
 
55
        if (e.type === 'mouseout') {
 
56
            reverse = true;
 
57
        }
 
58
        anim.set('reverse', reverse);
 
59
        anim.run();
 
60
    };
 
61
    node.on('mouseover', hover);
 
62
    node.on('mouseout', hover);
 
63
 
 
64
});
 
65
 
 
66
</script>
 
67
 
 
68
</div>
 
69
 
 
70
<h2>Setting up the HTML</h2>
 
71
<p>First we add some HTML to animate.</p>
 
72
 
 
73
<pre class="code prettyprint">&lt;a href=&quot;#&quot; id=&quot;demo&quot;&gt;hover me&lt;&#x2F;a&gt;</pre>
 
74
 
 
75
 
 
76
<h2>Creating the Anim Instance</h2>
 
77
<p>Now we create an instance of <code>Y.Anim</code>, passing it a configuration object that includes the <code>node</code> we wish to animate and the <code>to</code> attribute containing the final properties and their values.</p>
 
78
<p>Adding a <code>from</code> attribute allows us to reset the colors <code>onmouseout</code> using the <code>reverse</code> attribute, which we will see below.</p>
 
79
 
 
80
<pre class="code prettyprint">var node = Y.one(&#x27;#demo&#x27;);
 
81
 
 
82
var anim = new Y.Anim({
 
83
    node: node,
 
84
    from: {
 
85
        backgroundColor:node.getStyle(&#x27;backgroundColor&#x27;),
 
86
        color: node.getStyle(&#x27;color&#x27;),
 
87
        borderColor: node.getStyle(&#x27;borderTopColor&#x27;)
 
88
    },
 
89
 
 
90
    to: {
 
91
        color: &#x27;#fff&#x27;,
 
92
        backgroundColor:&#x27;#ffa928&#x27;,
 
93
        borderColor: &#x27;#71241a&#x27;
 
94
    },
 
95
 
 
96
    duration:0.5
 
97
});</pre>
 
98
 
 
99
 
 
100
<h2>Running the Animation</h2>
 
101
<p>Next we need a handler to run when the link is moused over, and reverse when moused out.</p>
 
102
<pre class="code prettyprint">var hover = function(e) {
 
103
    var reverse = false;
 
104
    if (anim.get(&#x27;running&#x27;)) {
 
105
        anim.pause();
 
106
    }
 
107
    if (e.type === &#x27;mouseout&#x27;) {
 
108
        reverse = true;
 
109
    }
 
110
    anim.set(&#x27;reverse&#x27;, reverse);
 
111
    anim.run();
 
112
};</pre>
 
113
 
 
114
 
 
115
<h2>Listening for the Events</h2>
 
116
<p>Finally we add an event handler to run the animation.</p>
 
117
<pre class="code prettyprint">node.on(&#x27;mouseover&#x27;, hover);
 
118
node.on(&#x27;mouseout&#x27;, hover);</pre>
 
119
 
 
120
 
 
121
<h2>Complete Example Source</h2>
 
122
<pre class="code prettyprint">&lt;a href=&quot;#&quot; id=&quot;demo&quot;&gt;hover me&lt;&#x2F;a&gt;
 
123
 
 
124
&lt;script type=&quot;text&#x2F;javascript&quot;&gt;
 
125
YUI().use(&#x27;anim&#x27;, function(Y) {
 
126
    var node = Y.one(&#x27;#demo&#x27;);
 
127
 
 
128
    var anim = new Y.Anim({
 
129
        node: node,
 
130
        from: {
 
131
            backgroundColor:node.getStyle(&#x27;backgroundColor&#x27;),
 
132
            color: node.getStyle(&#x27;color&#x27;),
 
133
            borderColor: node.getStyle(&#x27;borderTopColor&#x27;)
 
134
        },
 
135
 
 
136
        to: {
 
137
            color: &#x27;#fff&#x27;,
 
138
            backgroundColor:&#x27;#ffa928&#x27;,
 
139
            borderColor: &#x27;#71241a&#x27;
 
140
        },
 
141
 
 
142
        duration:0.5
 
143
    });
 
144
 
 
145
    var hover = function(e) {
 
146
        var reverse = false;
 
147
        if (anim.get(&#x27;running&#x27;)) {
 
148
            anim.pause();
 
149
        }
 
150
        if (e.type === &#x27;mouseout&#x27;) {
 
151
            reverse = true;
 
152
        }
 
153
        anim.set(&#x27;reverse&#x27;, reverse);
 
154
        anim.run();
 
155
    };
 
156
    node.on(&#x27;mouseover&#x27;, hover);
 
157
    node.on(&#x27;mouseout&#x27;, hover);
 
158
 
 
159
});
 
160
 
 
161
&lt;&#x2F;script&gt;</pre>
 
162
 
 
163
</div>
 
164
        </div>
 
165
 
 
166
        <div id="sidebar" class="yui3-u">
 
167
            
 
168
 
 
169
            
 
170
                <div class="sidebox">
 
171
                    <div class="hd">
 
172
                        <h2 class="no-toc">Examples</h2>
 
173
                    </div>
 
174
 
 
175
                    <div class="bd">
 
176
                        <ul class="examples">
 
177
                            
 
178
                                
 
179
                                    <li data-description="Creating and using a simple animation.">
 
180
                                        <a href="basic.html">Basic Animation</a>
 
181
                                    </li>
 
182
                                
 
183
                            
 
184
                                
 
185
                                    <li data-description="The Animation Utility allows you to implement &#x27;easing effects&#x27; &mdash; for example, when an animation gradually slows down as it nears completion, that&#x27;s an easing effect known as &#x27;ease-in&#x27;.  This example shows you how to use easing effects with your animations.">
 
186
                                        <a href="easing.html">Easing Effects</a>
 
187
                                    </li>
 
188
                                
 
189
                            
 
190
                                
 
191
                                    <li data-description="Color animations can be effective indicators of state during the lifespan of a dynamic page.  This example shows you how to animate color attributes of an element.">
 
192
                                        <a href="colors.html">Animating Colors</a>
 
193
                                    </li>
 
194
                                
 
195
                            
 
196
                                
 
197
                                    <li data-description="The direction attribute can be used to reverse the animation on alternate iterations.">
 
198
                                        <a href="alt-iterations.html">Alternating Iterations</a>
 
199
                                    </li>
 
200
                                
 
201
                            
 
202
                                
 
203
                                    <li data-description="This example shows you how to animate the xy coordinates of an element.">
 
204
                                        <a href="anim-xy.html">Animating XY Position</a>
 
205
                                    </li>
 
206
                                
 
207
                            
 
208
                                
 
209
                                    <li data-description="This example demonstrates animating an element along a curved path using bezier control points.">
 
210
                                        <a href="curve.html">Animating Along a Curved Path</a>
 
211
                                    </li>
 
212
                                
 
213
                            
 
214
                                
 
215
                                    <li data-description="The reverse attribute allows you to change the run direction of an animation.">
 
216
                                        <a href="reverse.html">Reversing an Animation</a>
 
217
                                    </li>
 
218
                                
 
219
                            
 
220
                                
 
221
                                    <li data-description="This example demonstrates how to use the end event.">
 
222
                                        <a href="end-event.html">Using the End Event</a>
 
223
                                    </li>
 
224
                                
 
225
                            
 
226
                                
 
227
                            
 
228
                                
 
229
                            
 
230
                                
 
231
                            
 
232
                        </ul>
 
233
                    </div>
 
234
                </div>
 
235
            
 
236
 
 
237
            
 
238
                <div class="sidebox">
 
239
                    <div class="hd">
 
240
                        <h2 class="no-toc">Examples That Use This Component</h2>
 
241
                    </div>
 
242
 
 
243
                    <div class="bd">
 
244
                        <ul class="examples">
 
245
                            
 
246
                                
 
247
                            
 
248
                                
 
249
                            
 
250
                                
 
251
                            
 
252
                                
 
253
                            
 
254
                                
 
255
                            
 
256
                                
 
257
                            
 
258
                                
 
259
                            
 
260
                                
 
261
                            
 
262
                                
 
263
                                    <li data-description="Shows how to create a simple plugin to animate the Overlay&#x27;s movement and visibility.">
 
264
                                        <a href="../overlay/overlay-anim-plugin.html">Animation Plugin</a>
 
265
                                    </li>
 
266
                                
 
267
                            
 
268
                                
 
269
                                    <li data-description="Working with multiple YUI instances.">
 
270
                                        <a href="../yui/yui-multi.html">Multiple Instances</a>
 
271
                                    </li>
 
272
                                
 
273
                            
 
274
                                
 
275
                                    <li data-description="How to make an animated node a Drop target.">
 
276
                                        <a href="../dd/anim-drop.html">Animated Drop Targets</a>
 
277
                                    </li>
 
278
                                
 
279
                            
 
280
                        </ul>
 
281
                    </div>
 
282
                </div>
 
283
            
 
284
        </div>
 
285
    </div>
 
286
</div>
 
287
 
 
288
<script src="../assets/vendor/prettify/prettify-min.js"></script>
 
289
<script>prettyPrint();</script>
 
290
 
 
291
</body>
 
292
</html>