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