← 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-float.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-float.html
1
 
<!DOCTYPE html>
2
 
<html lang="en">
3
 
<head>
4
 
    <meta charset="utf-8">
5
 
    <title>Example: Floated List</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: Floated List</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>Making a simple sortable list with floated nodes.</p>
24
 
</div>
25
 
 
26
 
<div class="example">
27
 
    <style>
28
 
#demo {
29
 
    border: 1px solid black;
30
 
    height: 200px;
31
 
}
32
 
#demo em {
33
 
    display: block;
34
 
    float: left;
35
 
    padding: 3px;
36
 
    width: 150px;
37
 
    border: 1px solid black;
38
 
    margin: 3px;
39
 
    background-color: #8DD5E7;
40
 
    cursor: move;
41
 
}
42
 
 
43
 
 
44
 
</style>
45
 
 
46
 
<div id="demo">
47
 
    <em>Item #1</em>
48
 
    <em>Item #2</em>
49
 
    <em>Item #3</em>
50
 
    <em>Item #4</em>
51
 
    <em>Item #5</em>
52
 
    <em>Item #6</em>
53
 
    <em>Item #7</em>
54
 
    <em>Item #8</em>
55
 
    <em>Item #9</em>
56
 
    <em>Item #10</em>
57
 
</div>
58
 
 
59
 
 
60
 
<script>
61
 
YUI().use('sortable', function(Y) {
62
 
    var sortable = new Y.Sortable({
63
 
        container: '#demo',
64
 
        nodes: 'em',
65
 
        opacity: '.1'
66
 
    });
67
 
});
68
 
 
69
 
</script>
70
 
 
71
 
</div>
72
 
 
73
 
<h3 id="setting-up-the-list">Setting Up the List</h3>
74
 
<p>First we need to create the HTML structure for the list. Since <code>Sortable</code> uses <code>Y.DD.Delegate</code>, we need to set up a delegation container (<code>#demo</code>) and the list items (<code>em</code>).</p>
75
 
 
76
 
<pre class="code prettyprint">&lt;div id=&quot;demo&quot;&gt;
77
 
    &lt;em&gt;Item #1&lt;&#x2F;em&gt;
78
 
    &lt;em&gt;Item #2&lt;&#x2F;em&gt;
79
 
    &lt;em&gt;Item #3&lt;&#x2F;em&gt;
80
 
    &lt;em&gt;Item #4&lt;&#x2F;em&gt;
81
 
    &lt;em&gt;Item #5&lt;&#x2F;em&gt;
82
 
    &lt;em&gt;Item #6&lt;&#x2F;em&gt;
83
 
    &lt;em&gt;Item #7&lt;&#x2F;em&gt;
84
 
    &lt;em&gt;Item #8&lt;&#x2F;em&gt;
85
 
    &lt;em&gt;Item #9&lt;&#x2F;em&gt;
86
 
    &lt;em&gt;Item #10&lt;&#x2F;em&gt;
87
 
&lt;&#x2F;div&gt;</pre>
88
 
 
89
 
 
90
 
<p>Now we give the list some CSS to make it visible.</p>
91
 
 
92
 
<pre class="code prettyprint">#demo {
93
 
    border: 1px solid black;
94
 
    height: 200px;
95
 
}
96
 
#demo em {
97
 
    display: block;
98
 
    float: left;
99
 
    padding: 3px;
100
 
    width: 150px;
101
 
    border: 1px solid black;
102
 
    margin: 3px;
103
 
    background-color: #8DD5E7;
104
 
    cursor: move;
105
 
}</pre>
106
 
 
107
 
 
108
 
<h3 id="setting-up-the-yui-instance">Setting Up the YUI Instance</h3>
109
 
<p>Now we need to create our YUI instance and tell it to load the <code>sortable</code> module.</p>
110
 
 
111
 
<pre class="code prettyprint">YUI().use(&#x27;sortable&#x27;</pre>
112
 
 
113
 
 
114
 
<h3 id="making-the-list-draggable">Making the List Draggable</h3>
115
 
<p>Now that we have a YUI instance with the <code>sortable</code> module, we need to instantiate the <code>Sortable</code> instance on the list.</p>
116
 
 
117
 
<pre class="code prettyprint">YUI().use(&#x27;sortable&#x27;, function(Y) {
118
 
    var sortable = new Y.Sortable({
119
 
        container: &#x27;#demo&#x27;,
120
 
        nodes: &#x27;em&#x27;,
121
 
        opacity: &#x27;.1&#x27;
122
 
    });
123
 
});</pre>
124
 
 
125
 
</div>
126
 
        </div>
127
 
 
128
 
        <div id="sidebar" class="yui3-u">
129
 
            
130
 
                <div id="toc" class="sidebox">
131
 
                    <div class="hd">
132
 
                        <h2 class="no-toc">Table of Contents</h2>
133
 
                    </div>
134
 
 
135
 
                    <div class="bd">
136
 
                        <ul class="toc">
137
 
<li>
138
 
<a href="#setting-up-the-list">Setting Up the List</a>
139
 
</li>
140
 
<li>
141
 
<a href="#setting-up-the-yui-instance">Setting Up the YUI Instance</a>
142
 
</li>
143
 
<li>
144
 
<a href="#making-the-list-draggable">Making the List Draggable</a>
145
 
</li>
146
 
</ul>
147
 
                    </div>
148
 
                </div>
149
 
            
150
 
 
151
 
            
152
 
                <div class="sidebox">
153
 
                    <div class="hd">
154
 
                        <h2 class="no-toc">Examples</h2>
155
 
                    </div>
156
 
 
157
 
                    <div class="bd">
158
 
                        <ul class="examples">
159
 
                            
160
 
                                
161
 
                                    <li data-description="Create a simple sortable list.">
162
 
                                        <a href="simple-sortable.html">Simple Sortable List</a>
163
 
                                    </li>
164
 
                                
165
 
                            
166
 
                                
167
 
                                    <li data-description="Sortable list example with floated nodes.">
168
 
                                        <a href="sortable-float.html">Floated List</a>
169
 
                                    </li>
170
 
                                
171
 
                            
172
 
                                
173
 
                                    <li data-description="Multiple Sortable Lists that are separate from one another.">
174
 
                                        <a href="sortable-multi.html">Multiple Lists</a>
175
 
                                    </li>
176
 
                                
177
 
                            
178
 
                                
179
 
                                    <li data-description="Multiple Sortable Lists that are fully joined together.">
180
 
                                        <a href="sortable-multi-full.html">Multiple Lists - Full Join</a>
181
 
                                    </li>
182
 
                                
183
 
                            
184
 
                                
185
 
                                    <li data-description="Multiple Sortable Lists that are outer joined together.">
186
 
                                        <a href="sortable-multi-out.html">Multiple Lists - Outer Join</a>
187
 
                                    </li>
188
 
                                
189
 
                            
190
 
                                
191
 
                                    <li data-description="Multiple Sortable Lists that are inner joined together.">
192
 
                                        <a href="sortable-multi-in.html">Multiple Lists - Inner Join</a>
193
 
                                    </li>
194
 
                                
195
 
                            
196
 
                        </ul>
197
 
                    </div>
198
 
                </div>
199
 
            
200
 
 
201
 
            
202
 
        </div>
203
 
    </div>
204
 
</div>
205
 
 
206
 
<script src="../assets/vendor/prettify/prettify-min.js"></script>
207
 
<script>prettyPrint();</script>
208
 
 
209
 
</body>
210
 
</html>