← 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/dial/index.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/dial/index.html
1
 
<!DOCTYPE html>
2
 
<html lang="en">
3
 
<head>
4
 
    <meta charset="utf-8">
5
 
    <title>Dial</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>Dial</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" style="min-height:181px;">
23
 
    <p>
24
 
        <img src="../assets/dial/images/dial_drag.png" alt="Screenshot of the Dial widget" style="border: 1px solid #bfbfbf; float:right; height:146px; margin: 0 0 8px 8px; width:154px;">
25
 
        The Dial widget is a circular value input control. It's like a real-world, analog volume control dial, but with much finer UI control. 
26
 
        Have you ever needed a slider with a 2000 unit range, wanted 1 unit accuracy, but didn't have 2000 pixels of real estate for a slider?
27
 
        The Dial widget is made for cases like this. 
28
 
    </p>
29
 
    <p>
30
 
        The user sets the value of the dial by dragging its handle or clicking on the ring.
31
 
    </p>
32
 
</div>
33
 
 
34
 
<h2 id="getting-started">Getting Started</h2>
35
 
 
36
 
<p>
37
 
To include the source files for Dial and its dependencies, first load
38
 
the YUI seed file if you haven't already loaded it.
39
 
</p>
40
 
 
41
 
<pre class="code prettyprint">&lt;script src=&quot;http:&#x2F;&#x2F;yui.yahooapis.com&#x2F;3.4.1&#x2F;build&#x2F;yui&#x2F;yui-min.js&quot;&gt;&lt;&#x2F;script&gt;</pre>
42
 
 
43
 
 
44
 
<p>
45
 
Next, create a new YUI instance for your application and populate it with the
46
 
modules you need by specifying them as arguments to the <code>YUI().use()</code> method.
47
 
YUI will automatically load any dependencies required by the modules you
48
 
specify.
49
 
</p>
50
 
 
51
 
<pre class="code prettyprint">&#x2F;&#x2F; Create a new YUI instance and populate it with the required modules.
52
 
YUI().use(&#x27;dial&#x27;, function (Y) {
53
 
    &#x2F;&#x2F; Dial is available and ready for use. Add implementation
54
 
    &#x2F;&#x2F; code here.
55
 
});</pre>
56
 
 
57
 
 
58
 
<p>
59
 
For more information on creating YUI instances and on the
60
 
<a href="http://yuilibrary.com/yui/docs/api/classes/YUI.html#method_use"><code>use()</code> method</a>, see the
61
 
documentation for the <a href="../yui/index.html">YUI Global object</a>.
62
 
</p>
63
 
 
64
 
 
65
 
<h2 id="using-the-dial-widget">Using the Dial Widget</h2>
66
 
<h3 id="anatomy-of-a-dial">Anatomy of a Dial</h3>
67
 
 
68
 
<h4 id="dom-structure">Dom Structure</h4>
69
 
    <p>
70
 
        The major parts of the Dial are:
71
 
        <ul>
72
 
            <li>Ring</li>
73
 
            <li>Marker</li>
74
 
            <li>User-draggable handle</li>
75
 
            <li>Reset button</li>
76
 
        </ul>
77
 
        The ring is the background element and container of the other elements. 
78
 
        The marker is always displayed at a fixed but configurable distance from the dial center. 
79
 
        Its position around the dial indicates the current value as the user drags the handle or clicks 
80
 
        on the ring to adjust the value.
81
 
        When not being dragged, the handle occupies the same space as the marker, and the marker is not displayed.
82
 
        When the keyboard is used for input, the marker is not displayed. 
83
 
        The reset button restores the dial to the initial configuration value.
84
 
    </p>
85
 
    <p>A label string and a value string are dislayed above the dial.
86
 
    </p>
87
 
    <p>Like other form controls, Dials are inline elements.</p>
88
 
    <img src="../assets/dial/images/dial_anatomy.png" alt="illustration of the parts of a Dial">
89
 
    
90
 
<h3 id="markup-structure">Markup Structure</h3>
91
 
    <p>The final rendered Dial has the markup structure shown below:</p>
92
 
 
93
 
<pre class="code prettyprint">&lt;div id=&quot;demo&quot;&gt;
94
 
    &lt;div class=&quot;yui3-widget yui3-dial&quot;&gt;
95
 
        &lt;div class=&quot;yui3-dial-content&quot;&gt;
96
 
            &lt;div class=&quot;yui3-dial-label&quot; id=&quot;[custom YUI gen id for screen reader]&quot;&gt;
97
 
                &lt;span class=&quot;yui3-dial-label-string&quot;&gt;My label&lt;&#x2F;span&gt;
98
 
                &lt;span class=&quot;yui3-dial-value-string&quot;&gt;30&lt;&#x2F;span&gt;
99
 
            &lt;&#x2F;div&gt;
100
 
            &lt;div class=&quot;yui3-dial-ring&quot;&gt;
101
 
                &lt;div class=&quot;yui3-dial-north-mark&quot;&gt;&lt;&#x2F;div&gt;
102
 
                &lt;div class=&quot;yui3-dial-marker yui3-dial-marker-hidden&quot;&gt;&lt;&#x2F;div&gt;
103
 
                &lt;div class=&quot;yui3-dial-center-button&quot;&gt;
104
 
                    &lt;div class=&quot;yui3-dial-reset-str&quot;&gt;&lt;&#x2F;div&gt;
105
 
                &lt;&#x2F;div&gt;
106
 
                &lt;div class=&quot;yui3-dial-handle yui3-dd-draggable&quot; title=&quot;Drag to set value&quot; tabindex=&quot;0&quot; role=&quot;slider&quot; aria-valuenow=&quot;30&quot; aria-valuemin=&quot;-220&quot; aria-valuemax=&quot;220&quot; aria-valuetext=&quot;30&quot; aria-labelledby=&quot;[custom YUI gen id for screen reader]&quot;&gt;&lt;&#x2F;div&gt;
107
 
            &lt;&#x2F;div&gt;
108
 
        &lt;&#x2F;div&gt;
109
 
    &lt;&#x2F;div&gt;
110
 
&lt;&#x2F;div&gt;</pre>
111
 
 
112
 
<h3 id="instantiating-the-dial">Instantiating the Dial</h3>
113
 
    <p>
114
 
        The only markup required to instantiate a <code>Dial</code> is an HTML tag into which the widget will be rendered.
115
 
    </p>
116
 
<pre class="code prettyprint">&lt;div id=&quot;demo&quot;&gt;&lt;&#x2F;div&gt;</pre>
117
 
 
118
 
    <p><code>Dial</code> extends the <code>Widget</code> class, following the same pattern 
119
 
    as any widget constructor, accepting a configuration object to 
120
 
    set the initial configuration for the widget.</p>
121
 
    <p>Some commonly used configuration attributes are shown below.</p>
122
 
<pre class="code prettyprint">YUI().use(&#x27;dial&#x27;, function(Y) {
123
 
    var dial = new Y.Dial({
124
 
        min:-220,
125
 
        max:220,
126
 
        stepsPerRevolution:100,
127
 
        value: 30,
128
 
    });
129
 
});</pre>
130
 
 
131
 
    <p>
132
 
    After creating and configuring the new <code>Dial</code>, 
133
 
    Call the <code>render</code> method on your <code>Dial</code> object, passing it
134
 
    the <code>selector</code> of a container object. 
135
 
    This renders it in the container and makes it usable.
136
 
    </p>
137
 
<pre class="code prettyprint">var dial = new Y.Dial();
138
 
dial.render(&quot;#demo&quot;);</pre>
139
 
 
140
 
 
141
 
<h4 id="attributes">Attributes</h4>
142
 
    <p>The following configuration properties are provided to define default values for each Dial widget:</p>
143
 
 
144
 
<table>
145
 
    <thead>
146
 
        <tr>
147
 
            <th>Property</th>
148
 
            <th>Description</th>
149
 
            <th>Default</th>
150
 
        </tr>
151
 
    </thead>
152
 
    <tbody>
153
 
        <tr>
154
 
            <td><code>min</code></td>
155
 
            <td>Minimum input value allowed</td>
156
 
            <td><code>-220</code></td>
157
 
        </tr>
158
 
        <tr>
159
 
            <td><code>max</code></td>
160
 
            <td>Maximum input value allowed</td>
161
 
            <td><code>220</code></td>
162
 
        </tr>
163
 
        <tr>
164
 
            <td><code>diameter</code></td>
165
 
            <td>Diameter of the dial control in pixels</td>
166
 
            <td><code>100</code></td>
167
 
        </tr>
168
 
        <tr>
169
 
            <td><code>centerButtonDiameter</code></td>
170
 
            <td>The diameter of the center button. This value is a percentage of the diameter of the Dial widget.</td>
171
 
            <td><code>0.5</code></td>
172
 
        </tr>
173
 
        <tr>
174
 
            <td><code>markerDiameter</code></td>
175
 
            <td>The diameter of the marker that follows the angle of the handle as it is dragged. This value is a percentage of the diameter of the Dial widget.</td>
176
 
            <td><code>0.1</code></td>
177
 
        </tr>
178
 
        <tr>
179
 
            <td><code>handleDiameter</code></td>
180
 
            <td>The diameter of the handle that sets the Dial value. This value is a percentage of the diameter of the Dial widget.</td>
181
 
            <td><code>0.2</code></td>
182
 
        </tr>
183
 
        <tr>
184
 
            <td><code>value</code></td>
185
 
            <td>The initial value which will set the UI display</td>
186
 
            <td><code>0</code></td>
187
 
        </tr>
188
 
        <tr>
189
 
            <td><code>minorStep</code></td>
190
 
            <td>Value is incremented/decremented by this value on arrow key press.</td>
191
 
            <td><code>1</code></td>
192
 
        </tr>
193
 
        <tr>
194
 
            <td><code>majorStep</code></td>
195
 
            <td>Value is incremented/decremented by this value on page up/down key press.</td>
196
 
            <td><code>10</code></td>
197
 
        </tr>
198
 
        <tr>
199
 
            <td><code>stepsPerRevolution</code></td>
200
 
            <td>One revolution of the dial adds/subtracts this many value units.</td>
201
 
            <td><code>100</code></td>
202
 
        </tr>
203
 
        <tr>
204
 
            <td><code>decimalPlaces</code></td>
205
 
            <td>Number of digits to the right of decimal point to retain in the value.</td>
206
 
            <td><code>0</code></td>
207
 
        </tr>
208
 
        <tr>
209
 
            <td><code>strings</code></td>
210
 
            <td>Display text strings are isolated in object literals and are handled through YUI's Internationalization utility.
211
 
                See the examples for ways to replace these strings.
212
 
            </td>
213
 
            <td><code>{label:&#x27;My label&#x27;, resetStr:&#x27;Reset&#x27;, tooltipHandle:&#x27;Drag to set value&#x27;}</code></td>
214
 
        </tr>
215
 
        <tr>
216
 
            <td><code>handleDistance</code></td>
217
 
            <td>This is the distance from the center of the dial to the center of the marker and handle when at rest. This value is a percentage of the radius of the Dial widget.</td>
218
 
            <td><code>0.75</code></td>
219
 
        </tr>
220
 
    </tbody>
221
 
</table>
222
 
<h4 id="setting-and-constraining-the-dial-value">Setting and Constraining the Dial Value</h4>
223
 
 
224
 
<h5 id="setting-and-getting-dial-values">Setting and Getting Dial Values</h5>
225
 
 
226
 
<p>Like any input element, the most important thing about a Dial is its <code>value</code>.  
227
 
<code>value</code> is managed as an attribute.</p>
228
 
 
229
 
<pre class="code prettyprint">&#x2F;&#x2F; Specify value at construction
230
 
var dial = new Y.Dial({
231
 
    value  : 50
232
 
});
233
 
 
234
 
&#x2F;&#x2F; Get and set the value as an attribute
235
 
var val = dial.get(&#x27;value&#x27;);
236
 
 
237
 
dial.set(&#x27;value&#x27;,val + 10);</pre>
238
 
 
239
 
<h5 id="constraining-dial-values">Constraining Dial Values</h5>
240
 
<p>A Dial's <code>value</code> is constrained between the configured <code>min</code> and <code>max</code> attribute values.  
241
 
Values outside this range are treated as the closer of <code>min</code> or <code>max</code>.</p>
242
 
 
243
 
 
244
 
<p>Configuring values for <code>max</code> and <code>min</code> that are respectively larger or smaller than the configured
245
 
<code>stepsPerRevolution</code> or <code>-stepsPerRevolution</code> can be used to configure a Dial to allow the user to drag the handle more than 360&#176.
246
 
By this means, a <code>Dial</code> can be configured to "go around and around," allowing a very large range of values.</p>
247
 
 
248
 
<pre class="code prettyprint">YUI().use(&quot;dial&quot;, function(Y) {
249
 
 
250
 
    var dial = new Y.Dial({
251
 
        min:-520,
252
 
        max:720,
253
 
        stepsPerRevolution:100,
254
 
        value: 30,
255
 
    });
256
 
    dial.render(&quot;#demo&quot;);
257
 
 
258
 
});</pre>
259
 
 
260
 
 
261
 
<h5 id="sync-the-ui-if-the-dial-was-rendered-off-the-dom">Sync the UI If the Dial Was Rendered off the DOM</h5>
262
 
    <p>If a Dial is rendered off the DOM, you must call the Dial's <code>syncUI()</code> method after attaching it to the DOM 
263
 
    in order for the handle to be placed correctly.  
264
 
    When off DOM, the dimensional information necessary to place the handle is unavailable.</p>
265
 
 
266
 
 
267
 
<h3 id="css">CSS</h3>
268
 
 
269
 
    <p>The core structural CSS for the Dial is shown below. Widths and heights of elements 
270
 
    are computed based on the "diameter" configuration property.</p>
271
 
 
272
 
<pre class="code prettyprint">&#x2F;* VML implementation for IE *&#x2F;
273
 
v\:oval,
274
 
v\:shadow,
275
 
v\:fill {
276
 
    behavior: url(#default#VML);
277
 
    display: inline-block;
278
 
    zoom: 1; *display: inline; &#x2F;* IE &lt; 8: fake inline-block *&#x2F;
279
 
}
280
 
.yui3-dial{
281
 
    position:relative;
282
 
    display:-moz-inline-stack;
283
 
    display:inline-block;
284
 
    zoom:1;
285
 
    *display:inline;
286
 
}
287
 
.yui3-dial-content,
288
 
.yui3-dial-ring{
289
 
    position:relative;
290
 
}
291
 
.yui3-dial-handle,
292
 
.yui3-dial-marker,
293
 
.yui3-dial-center-button,
294
 
.yui3-dial-reset-string,
295
 
.yui3-dial-handle-vml,
296
 
.yui3-dial-marker-vml,
297
 
.yui3-dial-center-button-vml,
298
 
.yui3-dial-ring-vml v\:oval,
299
 
.yui3-dial-center-button-vml v\:oval
300
 
{
301
 
    position:absolute;
302
 
}
303
 
.yui3-dial-center-button-vml v\:oval {
304
 
    font-size:1px;
305
 
    top:0;
306
 
    left:0;
307
 
}
308
 
.yui3-skin-sam .yui3-dial-hidden {
309
 
    opacity:0;
310
 
    filter:alpha(opacity=0);
311
 
}</pre>
312
 
 
313
 
 
314
 
 
315
 
 
316
 
 
317
 
</div>
318
 
        </div>
319
 
 
320
 
        <div id="sidebar" class="yui3-u">
321
 
            
322
 
                <div id="toc" class="sidebox">
323
 
                    <div class="hd">
324
 
                        <h2 class="no-toc">Table of Contents</h2>
325
 
                    </div>
326
 
 
327
 
                    <div class="bd">
328
 
                        <ul class="toc">
329
 
<li>
330
 
<a href="#getting-started">Getting Started</a>
331
 
</li>
332
 
<li>
333
 
<a href="#using-the-dial-widget">Using the Dial Widget</a>
334
 
<ul class="toc">
335
 
<li>
336
 
<a href="#anatomy-of-a-dial">Anatomy of a Dial</a>
337
 
<ul class="toc">
338
 
<li>
339
 
<a href="#dom-structure">Dom Structure</a>
340
 
</li>
341
 
</ul>
342
 
</li>
343
 
<li>
344
 
<a href="#markup-structure">Markup Structure</a>
345
 
</li>
346
 
<li>
347
 
<a href="#instantiating-the-dial">Instantiating the Dial</a>
348
 
<ul class="toc">
349
 
<li>
350
 
<a href="#attributes">Attributes</a>
351
 
</li>
352
 
<li>
353
 
<a href="#setting-and-constraining-the-dial-value">Setting and Constraining the Dial Value</a>
354
 
<ul class="toc">
355
 
<li>
356
 
<a href="#setting-and-getting-dial-values">Setting and Getting Dial Values</a>
357
 
</li>
358
 
<li>
359
 
<a href="#constraining-dial-values">Constraining Dial Values</a>
360
 
</li>
361
 
<li>
362
 
<a href="#sync-the-ui-if-the-dial-was-rendered-off-the-dom">Sync the UI If the Dial Was Rendered off the DOM</a>
363
 
</li>
364
 
</ul>
365
 
</li>
366
 
</ul>
367
 
</li>
368
 
<li>
369
 
<a href="#css">CSS</a>
370
 
</li>
371
 
</ul>
372
 
</li>
373
 
</ul>
374
 
                    </div>
375
 
                </div>
376
 
            
377
 
 
378
 
            
379
 
                <div class="sidebox">
380
 
                    <div class="hd">
381
 
                        <h2 class="no-toc">Examples</h2>
382
 
                    </div>
383
 
 
384
 
                    <div class="bd">
385
 
                        <ul class="examples">
386
 
                            
387
 
                                
388
 
                                    <li data-description="Create a Dial from existing markup on the page - a simple use case.">
389
 
                                        <a href="dial-basic.html">Basic Dial</a>
390
 
                                    </li>
391
 
                                
392
 
                            
393
 
                                
394
 
                                    <li data-description="Link a Dial with a text input field.">
395
 
                                        <a href="dial-text-input.html">Dial Linked With Text Input</a>
396
 
                                    </li>
397
 
                                
398
 
                            
399
 
                                
400
 
                                    <li data-description="Use image backgrounds to control the visual display of a Dial.">
401
 
                                        <a href="dial-image-background.html">Dial With Image Background</a>
402
 
                                    </li>
403
 
                                
404
 
                            
405
 
                                
406
 
                                    <li data-description="Use images to surround a Dial instance and provide additional styling.">
407
 
                                        <a href="dial-image-surrounding.html">Dial With a Surrounding Image</a>
408
 
                                    </li>
409
 
                                
410
 
                            
411
 
                                
412
 
                                    <li data-description="This example employs Dial to drive an interactive UI.">
413
 
                                        <a href="dial-interactive.html">Dial With Interactive UI</a>
414
 
                                    </li>
415
 
                                
416
 
                            
417
 
                        </ul>
418
 
                    </div>
419
 
                </div>
420
 
            
421
 
 
422
 
            
423
 
        </div>
424
 
    </div>
425
 
</div>
426
 
 
427
 
<script src="../assets/vendor/prettify/prettify-min.js"></script>
428
 
<script>prettyPrint();</script>
429
 
 
430
 
</body>
431
 
</html>