← 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/sortable/sortable-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/sortable/sortable-multi.html
1
 
<!DOCTYPE html>
2
 
<html lang="en">
3
 
<head>
4
 
    <meta charset="utf-8">
5
 
    <title>Example: Multiple Lists</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 Lists</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 makes multiple sortable lists that are separate from one another and do not interact with each other.</p>
24
 
</div>
25
 
 
26
 
<div class="example">
27
 
    <style>
28
 
#demo h4 {
29
 
    margin: 10px auto;
30
 
    width: 165px;
31
 
    text-align: center;
32
 
}
33
 
 
34
 
#demo ul {
35
 
    margin: 0 auto;
36
 
    width: 165px;
37
 
    padding: 0;
38
 
}
39
 
#demo li {
40
 
    list-style-type: none;
41
 
    padding: 3px;
42
 
    width: 150px;
43
 
    border: 1px solid black;
44
 
    margin: 3px;
45
 
    font-weight: bold;
46
 
    cursor: move;
47
 
}
48
 
#demo li.one {
49
 
    background-color: #8DD5E7;
50
 
}
51
 
#demo li.two {
52
 
    background-color: #EDFF9F;
53
 
    text-align: center;
54
 
}
55
 
 
56
 
</style>
57
 
 
58
 
<div id="demo" class="yui3-g">
59
 
    <div class="yui3-u-1-2">
60
 
        <h4 id="list-1">List 1</h4>
61
 
        <ul id="list1">
62
 
            <li class="one">1</li>
63
 
            <li class="one">2</li>
64
 
            <li class="one">3</li>
65
 
            <li class="one">4</li>
66
 
            <li class="one">5</li>
67
 
            <li class="one">6</li>
68
 
            <li class="one">7</li>
69
 
            <li class="one">8</li>
70
 
            <li class="one">9</li>
71
 
            <li class="one">10</li>
72
 
        </ul>
73
 
        </div>
74
 
    <div class="yui3-u-1-2">
75
 
        <h4 id="list-2">List 2</h4>
76
 
        <ul id="list2">
77
 
            <li class="two">A</li>
78
 
            <li class="two">B</li>
79
 
            <li class="two">C</li>
80
 
            <li class="two">D</li>
81
 
            <li class="two">E</li>
82
 
            <li class="two">F</li>
83
 
            <li class="two">G</li>
84
 
            <li class="two">H</li>
85
 
            <li class="two">I</li>
86
 
            <li class="two">J</li>
87
 
        </ul>
88
 
    </div>
89
 
</div>
90
 
 
91
 
 
92
 
<script>
93
 
YUI().use('dd-constrain', 'sortable', function(Y) {
94
 
    var list1 = new Y.Sortable({
95
 
        container: '#list1',
96
 
        nodes: 'li',
97
 
        opacity: '.1'
98
 
    });
99
 
 
100
 
    var list2 = new Y.Sortable({
101
 
        container: '#list2',
102
 
        nodes: 'li',
103
 
        opacity: '.1'
104
 
    });
105
 
 
106
 
});
107
 
 
108
 
</script>
109
 
 
110
 
 
111
 
</div>
112
 
 
113
 
<h3 id="setting-up-the-list">Setting Up the List</h3>
114
 
<p>First we need to create the HTML structure for the lists. Since <code>Sortable</code> uses <code>Y.DD.Delegate</code>, we need to set up the delegation containers (<code>#list1, #lists2</code>) and the list items (<code>li</code>).</p>
115
 
 
116
 
<pre class="code prettyprint">&lt;div id=&quot;demo&quot; class=&quot;yui3-g&quot;&gt;
117
 
    &lt;div class=&quot;yui3-u-1-2&quot;&gt;
118
 
        &lt;h4&gt;List 1&lt;&#x2F;h4&gt;
119
 
        &lt;ul id=&quot;list1&quot;&gt;
120
 
            &lt;li class=&quot;one&quot;&gt;1&lt;&#x2F;li&gt;
121
 
            &lt;li class=&quot;one&quot;&gt;2&lt;&#x2F;li&gt;
122
 
            &lt;li class=&quot;one&quot;&gt;3&lt;&#x2F;li&gt;
123
 
            &lt;li class=&quot;one&quot;&gt;4&lt;&#x2F;li&gt;
124
 
            &lt;li class=&quot;one&quot;&gt;5&lt;&#x2F;li&gt;
125
 
            &lt;li class=&quot;one&quot;&gt;6&lt;&#x2F;li&gt;
126
 
            &lt;li class=&quot;one&quot;&gt;7&lt;&#x2F;li&gt;
127
 
            &lt;li class=&quot;one&quot;&gt;8&lt;&#x2F;li&gt;
128
 
            &lt;li class=&quot;one&quot;&gt;9&lt;&#x2F;li&gt;
129
 
            &lt;li class=&quot;one&quot;&gt;10&lt;&#x2F;li&gt;
130
 
        &lt;&#x2F;ul&gt;
131
 
        &lt;&#x2F;div&gt;
132
 
    &lt;div class=&quot;yui3-u-1-2&quot;&gt;
133
 
        &lt;h4&gt;List 2&lt;&#x2F;h4&gt;
134
 
        &lt;ul id=&quot;list2&quot;&gt;
135
 
            &lt;li class=&quot;two&quot;&gt;A&lt;&#x2F;li&gt;
136
 
            &lt;li class=&quot;two&quot;&gt;B&lt;&#x2F;li&gt;
137
 
            &lt;li class=&quot;two&quot;&gt;C&lt;&#x2F;li&gt;
138
 
            &lt;li class=&quot;two&quot;&gt;D&lt;&#x2F;li&gt;
139
 
            &lt;li class=&quot;two&quot;&gt;E&lt;&#x2F;li&gt;
140
 
            &lt;li class=&quot;two&quot;&gt;F&lt;&#x2F;li&gt;
141
 
            &lt;li class=&quot;two&quot;&gt;G&lt;&#x2F;li&gt;
142
 
            &lt;li class=&quot;two&quot;&gt;H&lt;&#x2F;li&gt;
143
 
            &lt;li class=&quot;two&quot;&gt;I&lt;&#x2F;li&gt;
144
 
            &lt;li class=&quot;two&quot;&gt;J&lt;&#x2F;li&gt;
145
 
        &lt;&#x2F;ul&gt;
146
 
    &lt;&#x2F;div&gt;
147
 
&lt;&#x2F;div&gt;</pre>
148
 
 
149
 
 
150
 
<p>Now we give the lists some CSS to make them visible.</p>
151
 
 
152
 
<pre class="code prettyprint">#demo h4 {
153
 
    margin: 10px auto;
154
 
    width: 165px;
155
 
    text-align: center;
156
 
}
157
 
 
158
 
#demo ul {
159
 
    margin: 0 auto;
160
 
    width: 165px;
161
 
    padding: 0;
162
 
}
163
 
#demo li {
164
 
    list-style-type: none;
165
 
    padding: 3px;
166
 
    width: 150px;
167
 
    border: 1px solid black;
168
 
    margin: 3px;
169
 
    font-weight: bold;
170
 
    cursor: move;
171
 
}
172
 
#demo li.one {
173
 
    background-color: #8DD5E7;
174
 
}
175
 
#demo li.two {
176
 
    background-color: #EDFF9F;
177
 
    text-align: center;
178
 
}</pre>
179
 
 
180
 
 
181
 
<h3 id="setting-up-the-yui-instance">Setting Up the YUI Instance</h3>
182
 
<p>Now we need to create our YUI instance and tell it to load the <code>sortable</code> module.</p>
183
 
<p>In this example we are also going to attach a <code>DD</code> plugin to the <code>Sortable</code> instances.</p>
184
 
 
185
 
<pre class="code prettyprint">YUI().use(&#x27;dd-constrain&#x27;, &#x27;sortable&#x27;</pre>
186
 
 
187
 
 
188
 
<h3 id="making-the-lists-draggable">Making the Lists Draggable</h3>
189
 
<p>Now that we have a YUI instance with the <code>sortable</code> module, we need to instantiate a <code>Sortable</code> instance on each of the lists.</p>
190
 
 
191
 
<pre class="code prettyprint">YUI().use(&#x27;dd-constrain&#x27;, &#x27;sortable&#x27;, function(Y) {
192
 
    var list1 = new Y.Sortable({
193
 
        container: &#x27;#list1&#x27;,
194
 
        nodes: &#x27;li&#x27;,
195
 
        opacity: &#x27;.1&#x27;
196
 
    });
197
 
 
198
 
    var list2 = new Y.Sortable({
199
 
        container: &#x27;#list2&#x27;,
200
 
        nodes: &#x27;li&#x27;,
201
 
        opacity: &#x27;.1&#x27;
202
 
    });
203
 
 
204
 
});</pre>
205
 
 
206
 
 
207
 
<h3 id="applying-a-dd-plugin">Applying a DD Plugin</h3>
208
 
<p>Since <code>Sortable</code> uses <code>DD.Delegate</code>, there is a dd instance available after instantiation.</p>
209
 
<p>The <code>DD.Delegate</code> reference is found on the <code>.delegate</code> property of the <code>Sortable</code>.
210
 
This <code>DD.Delegate</code> instance has a <code>DD.Drag</code> instance bound to the <code>dd</code> property on the <code>DD.Delegate</code>
211
 
</p>
212
 
 
213
 
<pre class="code prettyprint">list1.delegate.dd.plug(Y.Plugin.DDConstrained, {
214
 
    constrain2node: &#x27;#demo&#x27;
215
 
});
216
 
list2.delegate.dd.plug(Y.Plugin.DDConstrained, {
217
 
    constrain2node: &#x27;#demo&#x27;
218
 
});</pre>
219
 
 
220
 
<p>Applying the <code>Plugin.DDConstrained</code> to the <code>Sortable</code> instance.</p>
221
 
 
222
 
<pre class="code prettyprint">YUI().use(&#x27;dd-constrain&#x27;, &#x27;sortable&#x27;, function(Y) {
223
 
    var list1 = new Y.Sortable({
224
 
        container: &#x27;#list1&#x27;,
225
 
        nodes: &#x27;li&#x27;,
226
 
        opacity: &#x27;.1&#x27;
227
 
    });
228
 
 
229
 
    var list2 = new Y.Sortable({
230
 
        container: &#x27;#list2&#x27;,
231
 
        nodes: &#x27;li&#x27;,
232
 
        opacity: &#x27;.1&#x27;
233
 
    });
234
 
 
235
 
    list1.delegate.dd.plug(Y.Plugin.DDConstrained, {
236
 
        constrain2node: &#x27;#demo&#x27;
237
 
    });
238
 
    list2.delegate.dd.plug(Y.Plugin.DDConstrained, {
239
 
        constrain2node: &#x27;#demo&#x27;
240
 
    });
241
 
 
242
 
});</pre>
243
 
 
244
 
 
245
 
</div>
246
 
        </div>
247
 
 
248
 
        <div id="sidebar" class="yui3-u">
249
 
            
250
 
                <div id="toc" class="sidebox">
251
 
                    <div class="hd">
252
 
                        <h2 class="no-toc">Table of Contents</h2>
253
 
                    </div>
254
 
 
255
 
                    <div class="bd">
256
 
                        <ul class="toc">
257
 
<li>
258
 
<a href="#list-1">List 1</a>
259
 
</li>
260
 
<li>
261
 
<a href="#list-2">List 2</a>
262
 
</li>
263
 
<li>
264
 
<a href="#setting-up-the-list">Setting Up the List</a>
265
 
</li>
266
 
<li>
267
 
<a href="#setting-up-the-yui-instance">Setting Up the YUI Instance</a>
268
 
</li>
269
 
<li>
270
 
<a href="#making-the-lists-draggable">Making the Lists Draggable</a>
271
 
</li>
272
 
<li>
273
 
<a href="#applying-a-dd-plugin">Applying a DD Plugin</a>
274
 
</li>
275
 
</ul>
276
 
                    </div>
277
 
                </div>
278
 
            
279
 
 
280
 
            
281
 
                <div class="sidebox">
282
 
                    <div class="hd">
283
 
                        <h2 class="no-toc">Examples</h2>
284
 
                    </div>
285
 
 
286
 
                    <div class="bd">
287
 
                        <ul class="examples">
288
 
                            
289
 
                                
290
 
                                    <li data-description="Create a simple sortable list.">
291
 
                                        <a href="simple-sortable.html">Simple Sortable List</a>
292
 
                                    </li>
293
 
                                
294
 
                            
295
 
                                
296
 
                                    <li data-description="Sortable list example with floated nodes.">
297
 
                                        <a href="sortable-float.html">Floated List</a>
298
 
                                    </li>
299
 
                                
300
 
                            
301
 
                                
302
 
                                    <li data-description="Multiple Sortable Lists that are separate from one another.">
303
 
                                        <a href="sortable-multi.html">Multiple Lists</a>
304
 
                                    </li>
305
 
                                
306
 
                            
307
 
                                
308
 
                                    <li data-description="Multiple Sortable Lists that are fully joined together.">
309
 
                                        <a href="sortable-multi-full.html">Multiple Lists - Full Join</a>
310
 
                                    </li>
311
 
                                
312
 
                            
313
 
                                
314
 
                                    <li data-description="Multiple Sortable Lists that are outer joined together.">
315
 
                                        <a href="sortable-multi-out.html">Multiple Lists - Outer Join</a>
316
 
                                    </li>
317
 
                                
318
 
                            
319
 
                                
320
 
                                    <li data-description="Multiple Sortable Lists that are inner joined together.">
321
 
                                        <a href="sortable-multi-in.html">Multiple Lists - Inner Join</a>
322
 
                                    </li>
323
 
                                
324
 
                            
325
 
                        </ul>
326
 
                    </div>
327
 
                </div>
328
 
            
329
 
 
330
 
            
331
 
        </div>
332
 
    </div>
333
 
</div>
334
 
 
335
 
<script src="../assets/vendor/prettify/prettify-min.js"></script>
336
 
<script>prettyPrint();</script>
337
 
 
338
 
</body>
339
 
</html>