← 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/dd/winscroll.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/dd/winscroll.html
1
 
<!DOCTYPE html>
2
 
<html lang="en">
3
 
<head>
4
 
    <meta charset="utf-8">
5
 
    <title>Example: Window Scrolling</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: Window Scrolling</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 you can use the DD Scroll plugin to scroll the browser window as you drag.</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
 
        padding: 7px;
34
 
        position: relative;
35
 
    }
36
 
    #demo h2 {
37
 
        padding: 0;
38
 
        margin: 0;
39
 
        position: absolute;
40
 
        top: 5px;
41
 
        right: 5px;
42
 
        font-size: 110%;
43
 
        color: black;
44
 
        font-weight: bold;
45
 
        cursor: move;
46
 
    }
47
 
 
48
 
 
49
 
</style>
50
 
 
51
 
<div id="demo"><h2 class="no-toc">x</h2>Drag Me</div>
52
 
 
53
 
 
54
 
<script>
55
 
YUI().use('dd-drag', 'dd-scroll', 'dd', function(Y) {
56
 
        var dd = new Y.DD.Drag({
57
 
        node: '#demo'
58
 
    }).addHandle('h2').plug(Y.Plugin.DDWinScroll);
59
 
 
60
 
 
61
 
});
62
 
</script>
63
 
 
64
 
 
65
 
</div>
66
 
 
67
 
<h3 id="setting-up-the-node">Setting up the Node</h3>
68
 
<p>First we need to create an HTML Node to make draggable.</p>
69
 
 
70
 
<pre class="code prettyprint">&lt;div id=&quot;demo&quot;&gt;&lt;h2 class=&quot;no-toc&quot;&gt;x&lt;&#x2F;h2&gt;Drag Me&lt;&#x2F;div&gt;</pre>
71
 
 
72
 
 
73
 
<p>Now we give that Node some CSS to make it visible.</p>
74
 
 
75
 
<pre class="code prettyprint">#demo {
76
 
    height: 100px;
77
 
    width: 100px;
78
 
    border: 1px solid black;
79
 
    background-color: #8DD5E7;
80
 
    padding: 7px;
81
 
    position: relative;
82
 
}
83
 
#demo h2 {
84
 
    padding: 0;
85
 
    margin: 0;
86
 
    position: absolute;
87
 
    top: 5px;
88
 
    right: 5px;
89
 
    font-size: 110%;
90
 
    color: black;
91
 
    font-weight: bold;
92
 
    cursor: move;
93
 
}</pre>
94
 
 
95
 
 
96
 
<h3 id="setting-up-the-yui-instance">Setting up the YUI Instance</h3>
97
 
<p>Now we need to create our YUI instance and tell it to load the <code>dd-drag</code> and <code>dd-scroll</code> modules.</p>
98
 
 
99
 
<pre class="code prettyprint">YUI().use(&#x27;dd-drag&#x27;, &#x27;dd-scroll&#x27;);</pre>
100
 
 
101
 
 
102
 
<h3 id="making-the-node-draggable-with-dd">Making the Node draggable with DD</h3>
103
 
<p>Now that we have a YUI instance with the <code>dd-drag</code> and <code>dd-scroll</code> modules, we need to instantiate a <code>DD</code> instance from this Node.</p>
104
 
 
105
 
<pre class="code prettyprint">var dd = new Y.DD.Drag({
106
 
    node: &#x27;#demo&#x27;
107
 
}).addHandle(&#x27;h2&#x27;);</pre>
108
 
 
109
 
 
110
 
<h3 id="making-the-window-scroll">Making the Window Scroll</h3>
111
 
<p>Now that we have a draggable Node, we need to plug the <code>Plugin.DDWinScroll</code> plugin onto the Drag instance.</p>
112
 
 
113
 
<pre class="code prettyprint">var dd = new Y.DD.Drag({
114
 
    node: &#x27;#demo&#x27;
115
 
}).addHandle(&#x27;h2&#x27;).plug(Y.Plugin.DDWinScroll);</pre>
116
 
 
117
 
</div>
118
 
        </div>
119
 
 
120
 
        <div id="sidebar" class="yui3-u">
121
 
            
122
 
                <div id="toc" class="sidebox">
123
 
                    <div class="hd">
124
 
                        <h2 class="no-toc">Table of Contents</h2>
125
 
                    </div>
126
 
 
127
 
                    <div class="bd">
128
 
                        <ul class="toc">
129
 
<li>
130
 
<a href="#setting-up-the-node">Setting up the Node</a>
131
 
</li>
132
 
<li>
133
 
<a href="#setting-up-the-yui-instance">Setting up the YUI Instance</a>
134
 
</li>
135
 
<li>
136
 
<a href="#making-the-node-draggable-with-dd">Making the Node draggable with DD</a>
137
 
</li>
138
 
<li>
139
 
<a href="#making-the-window-scroll">Making the Window Scroll</a>
140
 
</li>
141
 
</ul>
142
 
                    </div>
143
 
                </div>
144
 
            
145
 
 
146
 
            
147
 
                <div class="sidebox">
148
 
                    <div class="hd">
149
 
                        <h2 class="no-toc">Examples</h2>
150
 
                    </div>
151
 
 
152
 
                    <div class="bd">
153
 
                        <ul class="examples">
154
 
                            
155
 
                                
156
 
                                    <li data-description="A simple drag interaction that doesn&#x27;t require a drop interaction.">
157
 
                                        <a href="simple-drag.html">Simple Drag</a>
158
 
                                    </li>
159
 
                                
160
 
                            
161
 
                                
162
 
                                    <li data-description="How to apply the Drag Plugin to a node.">
163
 
                                        <a href="drag-plugin.html">Drag - Node plugin</a>
164
 
                                    </li>
165
 
                                
166
 
                            
167
 
                                
168
 
                                    <li data-description="A simple proxy drag interaction that doesn&#x27;t require a drop interaction.">
169
 
                                        <a href="proxy-drag.html">Drag - Proxy</a>
170
 
                                    </li>
171
 
                                
172
 
                            
173
 
                                
174
 
                                    <li data-description="How to constrain a draggable Node to another Node&#x27;s region.">
175
 
                                        <a href="constrained-drag.html">Drag - Constrained to a Region</a>
176
 
                                    </li>
177
 
                                
178
 
                            
179
 
                                
180
 
                                    <li data-description="Using interaction groups, this example demonstrates how to tie into the Drag &amp; Drop Utility&#x27;s interesting moments to provide visual affordances for the current drag operation.">
181
 
                                        <a href="groups-drag.html">Drag - Interaction Groups</a>
182
 
                                    </li>
183
 
                                
184
 
                            
185
 
                                
186
 
                                    <li data-description="The use of the drag shim when dragging nodes over other troublesome nodes.">
187
 
                                        <a href="shim-drag.html">Using the Drag Shim</a>
188
 
                                    </li>
189
 
                                
190
 
                            
191
 
                                
192
 
                                    <li data-description="How to use the Drop Target events to code your application.">
193
 
                                        <a href="drop-code.html">Using Drop Based Coding</a>
194
 
                                    </li>
195
 
                                
196
 
                            
197
 
                                
198
 
                                    <li data-description="How you can use the DD Scroll plugin to scroll the browser window as you drag.">
199
 
                                        <a href="winscroll.html">Window Scrolling</a>
200
 
                                    </li>
201
 
                                
202
 
                            
203
 
                                
204
 
                                    <li data-description="How to use DD.Delegate to create a scalable solution which supports multiple draggable items.">
205
 
                                        <a href="delegate.html">Drag Delegation</a>
206
 
                                    </li>
207
 
                                
208
 
                            
209
 
                                
210
 
                                    <li data-description="Using DD.Delegate to support dragging multiple items and dropping them onto a Drop Target.">
211
 
                                        <a href="delegate-drop.html">Drag Delegation with a Drop Target</a>
212
 
                                    </li>
213
 
                                
214
 
                            
215
 
                                
216
 
                                    <li data-description="How to use Drag plugins with a DD Delegate based solution.">
217
 
                                        <a href="delegate-plugins.html">Using Drag Plugins with Delegate</a>
218
 
                                    </li>
219
 
                                
220
 
                            
221
 
                                
222
 
                                    <li data-description="This example shows how to make a sortable list using Custom Event Bubbling.">
223
 
                                        <a href="list-drag.html">List Reorder w/Bubbling</a>
224
 
                                    </li>
225
 
                                
226
 
                            
227
 
                                
228
 
                                    <li data-description="This example shows how to make a sortable list using Custom Event Bubbling and Node Scrolling.">
229
 
                                        <a href="scroll-list.html">List Reorder w/Scrolling</a>
230
 
                                    </li>
231
 
                                
232
 
                            
233
 
                                
234
 
                                    <li data-description="How to make an animated node a Drop target.">
235
 
                                        <a href="anim-drop.html">Animated Drop Targets</a>
236
 
                                    </li>
237
 
                                
238
 
                            
239
 
                                
240
 
                                    <li data-description="Example Photo Browser application.">
241
 
                                        <a href="photo-browser.html">Photo Browser</a>
242
 
                                    </li>
243
 
                                
244
 
                            
245
 
                                
246
 
                                    <li data-description="Portal style example using Drag &amp; Drop Event Bubbling and Animation.">
247
 
                                        <a href="portal-drag.html">Portal Style Example</a>
248
 
                                    </li>
249
 
                                
250
 
                            
251
 
                                
252
 
                            
253
 
                                
254
 
                            
255
 
                        </ul>
256
 
                    </div>
257
 
                </div>
258
 
            
259
 
 
260
 
            
261
 
                <div class="sidebox">
262
 
                    <div class="hd">
263
 
                        <h2 class="no-toc">Examples That Use This Component</h2>
264
 
                    </div>
265
 
 
266
 
                    <div class="bd">
267
 
                        <ul class="examples">
268
 
                            
269
 
                                
270
 
                            
271
 
                                
272
 
                            
273
 
                                
274
 
                            
275
 
                                
276
 
                            
277
 
                                
278
 
                            
279
 
                                
280
 
                            
281
 
                                
282
 
                            
283
 
                                
284
 
                            
285
 
                                
286
 
                            
287
 
                                
288
 
                            
289
 
                                
290
 
                            
291
 
                                
292
 
                            
293
 
                                
294
 
                            
295
 
                                
296
 
                            
297
 
                                
298
 
                            
299
 
                                
300
 
                            
301
 
                                
302
 
                                    <li data-description="Working with multiple YUI instances.">
303
 
                                        <a href="../yui/yui-multi.html">Multiple Instances</a>
304
 
                                    </li>
305
 
                                
306
 
                            
307
 
                                
308
 
                                    <li data-description="Use StyleSheet to adjust the CSS rules applying a page theme from user input">
309
 
                                        <a href="../stylesheet/stylesheet-theme.html">Adjusting a Page Theme on the Fly</a>
310
 
                                    </li>
311
 
                                
312
 
                            
313
 
                        </ul>
314
 
                    </div>
315
 
                </div>
316
 
            
317
 
        </div>
318
 
    </div>
319
 
</div>
320
 
 
321
 
<script src="../assets/vendor/prettify/prettify-min.js"></script>
322
 
<script>prettyPrint();</script>
323
 
 
324
 
</body>
325
 
</html>