← Back to branch summary

~ubuntu-branches/ubuntu/quantal/maas/quantal-updates

« 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-07-03 17:42:37 UTC
  • mfrom: (1.1.13)
  • Revision ID: package-import@ubuntu.com-20120703174237-p8l0keuuznfg721k
Tags: 0.1+bzr709+dfsg-0ubuntu1
* New Upstream release
* debian/control:
  - Depends on python-celery, python-tempita, libjs-yui3-{full,min},
    libjs-raphael
* debian/maas.install:
  - Install apiclient, celeryconfig.py, maas-import-pxe-files, preseeds_v2.
  - Update to install various files from chroot, rather tha manually copy
    them from the source.
* debian/maas.links: symlink celeryconfig.py
* debian/maas.maas-celery.upstart: Add job.
* debian/rules:
  - Install celery upstart job.
  - Do not install jslibs as packages are now used.
  - Drop copying of maas_local_settings_sample.py as source now ships
    a maas_local_settings.py
* debian/patches:
  - 04-maas-http-fix.patch: Drop. Merged upstream.
  - 01-fix-database-settings.patch: Refreshed.
  - 99_enums_js.patch: Added until creation of enum.js / build process
    is fixed.
* debian/maas.postinst: Update bzr version to correctly handle upgrades.

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>