← 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/dial-basic.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/dial-basic.html
1
 
<!DOCTYPE html>
2
 
<html lang="en">
3
 
<head>
4
 
    <meta charset="utf-8">
5
 
    <title>Example: Basic 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>Example: Basic 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">
23
 
    <p>This example shows how to create a basic <code>Dial</code> widget.</p>
24
 
    
25
 
    <p>Drag the handle, or click the ring, to set the value. When the handle has the focus, the following keys update its value: arrow keys, page up/down, home, and end.  The action of these keys can be controlled via <a href="index.html#attributes" title="YUI 3: Dial">Dial's configuration attributes</a>.</p>
26
 
</div>
27
 
 
28
 
<div class="example yui3-skin-sam">
29
 
    <style>
30
 
    #demo {
31
 
        margin:0 0 1em;
32
 
    }
33
 
    .example {
34
 
        text-align: center;
35
 
        *text-align: left;
36
 
    }
37
 
</style>
38
 
<div id="demo"></div>
39
 
<script>
40
 
YUI().use('dial', function(Y) {
41
 
 
42
 
    var dial = new Y.Dial({
43
 
        min:-220,
44
 
        max:220,
45
 
        stepsPerRevolution:100,
46
 
        value: 30
47
 
    });
48
 
    dial.render('#demo');
49
 
 
50
 
});
51
 
</script>
52
 
 
53
 
</div>
54
 
 
55
 
<h3 id="creating-a-dial">Creating a Dial</h3>
56
 
<p>A <code>Dial</code> can be created easily and rendered into existing markup.</p>
57
 
 
58
 
<h4 id="the-markup">The Markup</h4>
59
 
<p>The only markup requirement is an HTML element to contain the Dial.</p>
60
 
 
61
 
<pre class="code prettyprint">&lt;div id=&quot;demo&quot;&gt;&lt;&#x2F;div&gt;</pre>
62
 
 
63
 
<h4 id="the-javascript">The JavaScript</h4>
64
 
<p><code>Dial</code> extends the <code>Widget</code> class, following the same pattern 
65
 
as any widget constructor.  As a result, it accepts a configuration object to 
66
 
set the initial configuration for the widget.</p>
67
 
 
68
 
<p>After creating and configuring the new <code>Dial</code>, 
69
 
call the <code>render</code> method on the <code>Dial</code> object, passing it
70
 
the selector for a container element. 
71
 
This renders it into the container and makes it usable.</p>
72
 
 
73
 
<p>Some commonly used configuration attributes are shown below. </p>
74
 
<pre class="code prettyprint">YUI().use(&#x27;dial&#x27;, function(Y) {
75
 
 
76
 
    var dial = new Y.Dial({
77
 
        min:-220,
78
 
        max:220,
79
 
        stepsPerRevolution:100,
80
 
        value: 30
81
 
    });
82
 
    dial.render(&#x27;#demo&#x27;);
83
 
 
84
 
});</pre>
85
 
 
86
 
<h3 id="complete-example-source">Complete Example Source</h3>
87
 
<pre class="code prettyprint">&lt;!DOCTYPE HTML&gt;
88
 
&lt;html&gt;
89
 
&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;
90
 
 
91
 
&lt;body class=&quot;yui3-skin-sam&quot;&gt;
92
 
    &lt;div id=&quot;demo&quot;&gt;&lt;&#x2F;div&gt;
93
 
&lt;&#x2F;body&gt;
94
 
 
95
 
&lt;script&gt;
96
 
YUI().use(&#x27;dial&#x27;, function(Y) {
97
 
 
98
 
    var dial = new Y.Dial({
99
 
        min:-220,
100
 
        max:220,
101
 
        stepsPerRevolution:100,
102
 
        value: 30
103
 
    });
104
 
    dial.render(&#x27;#demo&#x27;);
105
 
 
106
 
});
107
 
&lt;&#x2F;script&gt;
108
 
&lt;&#x2F;html&gt;</pre>
109
 
 
110
 
 
111
 
</div>
112
 
        </div>
113
 
 
114
 
        <div id="sidebar" class="yui3-u">
115
 
            
116
 
                <div id="toc" class="sidebox">
117
 
                    <div class="hd">
118
 
                        <h2 class="no-toc">Table of Contents</h2>
119
 
                    </div>
120
 
 
121
 
                    <div class="bd">
122
 
                        <ul class="toc">
123
 
<li>
124
 
<a href="#creating-a-dial">Creating a Dial</a>
125
 
<ul class="toc">
126
 
<li>
127
 
<a href="#the-markup">The Markup</a>
128
 
</li>
129
 
<li>
130
 
<a href="#the-javascript">The JavaScript</a>
131
 
</li>
132
 
</ul>
133
 
</li>
134
 
<li>
135
 
<a href="#complete-example-source">Complete Example Source</a>
136
 
</li>
137
 
</ul>
138
 
                    </div>
139
 
                </div>
140
 
            
141
 
 
142
 
            
143
 
                <div class="sidebox">
144
 
                    <div class="hd">
145
 
                        <h2 class="no-toc">Examples</h2>
146
 
                    </div>
147
 
 
148
 
                    <div class="bd">
149
 
                        <ul class="examples">
150
 
                            
151
 
                                
152
 
                                    <li data-description="Create a Dial from existing markup on the page - a simple use case.">
153
 
                                        <a href="dial-basic.html">Basic Dial</a>
154
 
                                    </li>
155
 
                                
156
 
                            
157
 
                                
158
 
                                    <li data-description="Link a Dial with a text input field.">
159
 
                                        <a href="dial-text-input.html">Dial Linked With Text Input</a>
160
 
                                    </li>
161
 
                                
162
 
                            
163
 
                                
164
 
                                    <li data-description="Use image backgrounds to control the visual display of a Dial.">
165
 
                                        <a href="dial-image-background.html">Dial With Image Background</a>
166
 
                                    </li>
167
 
                                
168
 
                            
169
 
                                
170
 
                                    <li data-description="Use images to surround a Dial instance and provide additional styling.">
171
 
                                        <a href="dial-image-surrounding.html">Dial With a Surrounding Image</a>
172
 
                                    </li>
173
 
                                
174
 
                            
175
 
                                
176
 
                                    <li data-description="This example employs Dial to drive an interactive UI.">
177
 
                                        <a href="dial-interactive.html">Dial With Interactive UI</a>
178
 
                                    </li>
179
 
                                
180
 
                            
181
 
                        </ul>
182
 
                    </div>
183
 
                </div>
184
 
            
185
 
 
186
 
            
187
 
        </div>
188
 
    </div>
189
 
</div>
190
 
 
191
 
<script src="../assets/vendor/prettify/prettify-min.js"></script>
192
 
<script>prettyPrint();</script>
193
 
 
194
 
</body>
195
 
</html>