← Back to branch summary

~ubuntu-branches/ubuntu/raring/maas/raring-updates

« back to all changes in this revision

Viewing changes to src/maasserver/static/jslibs/yui/3.4.1/docs/yui/yui-multi.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/yui/yui-multi.html
1
 
<!DOCTYPE html>
2
 
<html lang="en">
3
 
<head>
4
 
    <meta charset="utf-8">
5
 
    <title>Example: Multiple Instances</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: Multiple Instances</h1>
15
 
 
16
 
    
17
 
        <a href="#toc" class="jump">Jump to Table of Contents</a>
18
 
    
19
 
 
20
 
    <div class="yui3-g">
21
 
        <div id="main" class="yui3-u">
22
 
            <div class="content"><div class="intro">
23
 
<p>This example shows how to work with multiple YUI instances.</p>
24
 
</div>
25
 
 
26
 
<div class="example">
27
 
    <style>
28
 
    #demo {
29
 
        height: 100px;
30
 
        width: 100px;
31
 
        border: 1px solid black;
32
 
        background-color: #8DD5E7;
33
 
        cursor: move;
34
 
    }
35
 
    #play {
36
 
        height: 200px;
37
 
    }
38
 
</style>
39
 
 
40
 
<div id="play">
41
 
    <div id="demo"></div>
42
 
</div>
43
 
 
44
 
<script>
45
 
YUI().use('anim', function(Y) {
46
 
    var anim = new Y.Anim({
47
 
        node: '#demo',
48
 
        to: {
49
 
            height: 50,
50
 
            width: 150
51
 
        },
52
 
        from: {
53
 
            height: 100,
54
 
            width: 100
55
 
        },
56
 
        direction: 'alternate',
57
 
        iterations: 30,
58
 
        duration: .5
59
 
    });
60
 
    anim.run();
61
 
});
62
 
 
63
 
YUI().use('dd-drag', function(Y) {
64
 
    var dd = new Y.DD.Drag({
65
 
        node: '#demo'
66
 
    });
67
 
});
68
 
 
69
 
</script>
70
 
 
71
 
</div>
72
 
 
73
 
<h3 id="setting-up-the-first-yui-instance">Setting up the first YUI Instance</h3>
74
 
<p>Here we will create our first YUI instance and tell it to load the <code>anim</code> module.</p>
75
 
 
76
 
<pre class="code prettyprint">YUI().use(&#x27;anim&#x27;, function(Y) {
77
 
 
78
 
});</pre>
79
 
 
80
 
 
81
 
<h3 id="using-animation">Using Animation</h3>
82
 
<p>Now let's setup a simple animation on the Node <code>#demo</code>.</p>
83
 
 
84
 
<pre class="code prettyprint">YUI().use(&#x27;anim&#x27;, function(Y) {
85
 
    var anim = new Y.Anim({
86
 
        node: &#x27;#demo&#x27;,
87
 
        to: {
88
 
            height: 50,
89
 
            width: 150
90
 
        },
91
 
        from: {
92
 
            height: 100,
93
 
            width: 100
94
 
        },
95
 
        direction: &#x27;alternate&#x27;,
96
 
        iterations: 30,
97
 
        duration: .5
98
 
    });
99
 
    anim.run();
100
 
});</pre>
101
 
 
102
 
 
103
 
<h3 id="setting-up-the-second-yui-instance">Setting up the second YUI Instance</h3>
104
 
 
105
 
<p>Here we will create our second YUI instance and tell it to load the <code>dd-drag</code> module.</p>
106
 
<p>Since we didn't specify the <code>anim</code> module, we will not have access to it in this instance.</p>
107
 
 
108
 
<pre class="code prettyprint">YUI().use(&#x27;dd-drag&#x27;, function(Y) {
109
 
 
110
 
});</pre>
111
 
 
112
 
 
113
 
<h3 id="making-the-node-draggable">Making the node draggable</h3>
114
 
<p>Now let's make the same node draggable (while it's animated).</p>
115
 
 
116
 
<pre class="code prettyprint">YUI().use(&#x27;dd-drag&#x27;, function(Y) {
117
 
    var dd = new Y.DD.Drag({
118
 
        node: &#x27;#demo&#x27;
119
 
    });
120
 
});</pre>
121
 
 
122
 
 
123
 
<h3 id="full-example-source">Full Example Source</h3>
124
 
 
125
 
<pre class="code prettyprint">&lt;style&gt;
126
 
    #demo {
127
 
        height: 100px;
128
 
        width: 100px;
129
 
        border: 1px solid black;
130
 
        background-color: #8DD5E7;
131
 
        cursor: move;
132
 
    }
133
 
    #play {
134
 
        height: 200px;
135
 
    }
136
 
&lt;&#x2F;style&gt;
137
 
 
138
 
&lt;div id=&quot;play&quot;&gt;
139
 
    &lt;div id=&quot;demo&quot;&gt;&lt;&#x2F;div&gt;
140
 
&lt;&#x2F;div&gt;
141
 
 
142
 
&lt;script&gt;
143
 
YUI().use(&#x27;anim&#x27;, function(Y) {
144
 
    var anim = new Y.Anim({
145
 
        node: &#x27;#demo&#x27;,
146
 
        to: {
147
 
            height: 50,
148
 
            width: 150
149
 
        },
150
 
        from: {
151
 
            height: 100,
152
 
            width: 100
153
 
        },
154
 
        direction: &#x27;alternate&#x27;,
155
 
        iterations: 30,
156
 
        duration: .5
157
 
    });
158
 
    anim.run();
159
 
});
160
 
 
161
 
YUI().use(&#x27;dd-drag&#x27;, function(Y) {
162
 
    var dd = new Y.DD.Drag({
163
 
        node: &#x27;#demo&#x27;
164
 
    });
165
 
});
166
 
 
167
 
&lt;&#x2F;script&gt;</pre>
168
 
 
169
 
</div>
170
 
        </div>
171
 
 
172
 
        <div id="sidebar" class="yui3-u">
173
 
            
174
 
                <div id="toc" class="sidebox">
175
 
                    <div class="hd">
176
 
                        <h2 class="no-toc">Table of Contents</h2>
177
 
                    </div>
178
 
 
179
 
                    <div class="bd">
180
 
                        <ul class="toc">
181
 
<li>
182
 
<a href="#setting-up-the-first-yui-instance">Setting up the first YUI Instance</a>
183
 
</li>
184
 
<li>
185
 
<a href="#using-animation">Using Animation</a>
186
 
</li>
187
 
<li>
188
 
<a href="#setting-up-the-second-yui-instance">Setting up the second YUI Instance</a>
189
 
</li>
190
 
<li>
191
 
<a href="#making-the-node-draggable">Making the node draggable</a>
192
 
</li>
193
 
<li>
194
 
<a href="#full-example-source">Full Example Source</a>
195
 
</li>
196
 
</ul>
197
 
                    </div>
198
 
                </div>
199
 
            
200
 
 
201
 
            
202
 
                <div class="sidebox">
203
 
                    <div class="hd">
204
 
                        <h2 class="no-toc">Examples</h2>
205
 
                    </div>
206
 
 
207
 
                    <div class="bd">
208
 
                        <ul class="examples">
209
 
                            
210
 
                                
211
 
                                    <li data-description="Setting up a YUI Instance">
212
 
                                        <a href="yui-core.html">YUI Core</a>
213
 
                                    </li>
214
 
                                
215
 
                            
216
 
                                
217
 
                                    <li data-description="Working with multiple YUI instances.">
218
 
                                        <a href="yui-multi.html">Multiple Instances</a>
219
 
                                    </li>
220
 
                                
221
 
                            
222
 
                                
223
 
                                    <li data-description="On-demand loading of YUI and non-YUI assets">
224
 
                                        <a href="yui-loader-ext.html">YUI Loader - Dynamically Adding YUI and External Modules</a>
225
 
                                    </li>
226
 
                                
227
 
                            
228
 
                                
229
 
                                    <li data-description="Create Class Hierarchies with &#x60;extend&#x60;">
230
 
                                        <a href="yui-extend.html">Create Class Hierarchies with &#x60;extend&#x60;</a>
231
 
                                    </li>
232
 
                                
233
 
                            
234
 
                                
235
 
                                    <li data-description="Creating a composition-based class structure using &#x60;augment&#x60;">
236
 
                                        <a href="yui-augment.html">Compose Classes of Objects with &#x60;augment&#x60;</a>
237
 
                                    </li>
238
 
                                
239
 
                            
240
 
                                
241
 
                                    <li data-description="Add behaviors to objects or static classes with &#x60;mix&#x60;">
242
 
                                        <a href="yui-mix.html">Add Behaviors to Objects with &#x60;mix&#x60;</a>
243
 
                                    </li>
244
 
                                
245
 
                            
246
 
                                
247
 
                                    <li data-description="Combine data sets and create shallow copies of objects with &#x60;merge&#x60;">
248
 
                                        <a href="yui-merge.html">Combine Data Sets with &#x60;merge&#x60;</a>
249
 
                                    </li>
250
 
                                
251
 
                            
252
 
                                
253
 
                                    <li data-description="Check data types with the &#x60;Lang Utilities&#x60;">
254
 
                                        <a href="yui-isa.html">Check Data Types with &#x60;Lang&#x60;</a>
255
 
                                    </li>
256
 
                                
257
 
                            
258
 
                                
259
 
                                    <li data-description="Get information about the current user agent with &#x60;UA&#x60;">
260
 
                                        <a href="yui-ua.html">Browser Detection with &#x60;UA&#x60;</a>
261
 
                                    </li>
262
 
                                
263
 
                            
264
 
                                
265
 
                                    <li data-description="Working with YUI 2 in 3">
266
 
                                        <a href="yui-yui2.html">Working with YUI 2 in 3</a>
267
 
                                    </li>
268
 
                                
269
 
                            
270
 
                                
271
 
                                    <li data-description="Natively use YUI Gallery Modules">
272
 
                                        <a href="yui-gallery.html">Natively use YUI Gallery Modules</a>
273
 
                                    </li>
274
 
                                
275
 
                            
276
 
                        </ul>
277
 
                    </div>
278
 
                </div>
279
 
            
280
 
 
281
 
            
282
 
        </div>
283
 
    </div>
284
 
</div>
285
 
 
286
 
<script src="../assets/vendor/prettify/prettify-min.js"></script>
287
 
<script>prettyPrint();</script>
288
 
 
289
 
</body>
290
 
</html>