← Back to branch summary

~bcsaller/juju-gui/charmFind

« back to all changes in this revision

Viewing changes to lib/yui/docs/dial/dial-basic.html

  • Committer: kapil.foss at gmail
  • Date: 2012-07-13 18:45:59 UTC
  • Revision ID: kapil.foss@gmail.com-20120713184559-2xl7be17egsrz0c9
reshape

Show diffs side-by-side

added added

removed removed

Lines of Context:
lib/yui/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://fonts.googleapis.com/css?family=Maven+Pro:400,700">
7
 
    <link rel="stylesheet" href="../../build/cssgrids/grids-min.css">
8
 
    <link rel="stylesheet" href="../assets/css/main.css">
9
 
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
10
 
    <script src="../../build/yui/yui-min.js"></script>
11
 
</head>
12
 
<body>
13
 
 
14
 
<div id="doc">
15
 
    <h1>Example: Basic Dial</h1>
16
 
 
17
 
    
18
 
        <a href="#toc" class="jump">Jump to Table of Contents</a>
19
 
    
20
 
 
21
 
    <div class="yui3-g">
22
 
        <div class="yui3-u-3-4">
23
 
            <div id="main">
24
 
                <div class="content"><div class="intro">
25
 
    <p>This example shows how to create a basic <code>Dial</code> widget.</p>
26
 
    
27
 
    <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>
28
 
</div>
29
 
 
30
 
<div class="example yui3-skin-sam">
31
 
    <style>
32
 
    #demo {
33
 
        margin:0 0 1em;
34
 
    }
35
 
    .example {
36
 
        text-align: center;
37
 
        *text-align: left;
38
 
    }
39
 
</style>
40
 
<div id="demo"></div>
41
 
<script>
42
 
YUI().use('dial', function(Y) {
43
 
 
44
 
    var dial = new Y.Dial({
45
 
        min:-220,
46
 
        max:220,
47
 
        stepsPerRevolution:100,
48
 
        value: 30
49
 
    });
50
 
    dial.render('#demo');
51
 
 
52
 
});
53
 
</script>
54
 
 
55
 
</div>
56
 
 
57
 
<h3 id="creating-a-dial">Creating a Dial</h3>
58
 
<p>A <code>Dial</code> can be created easily and rendered into existing markup.</p>
59
 
 
60
 
<h4 id="the-markup">The Markup</h4>
61
 
<p>The only markup requirement is an HTML element to contain the Dial.</p>
62
 
 
63
 
<pre class="code prettyprint">&lt;div id=&quot;demo&quot;&gt;&lt;&#x2F;div&gt;</pre>
64
 
 
65
 
<h4 id="the-javascript">The JavaScript</h4>
66
 
<p><code>Dial</code> extends the <code>Widget</code> class, following the same pattern 
67
 
as any widget constructor.  As a result, it accepts a configuration object to 
68
 
set the initial configuration for the widget.</p>
69
 
 
70
 
<p>After creating and configuring the new <code>Dial</code>, 
71
 
call the <code>render</code> method on the <code>Dial</code> object, passing it
72
 
the selector for a container element. 
73
 
This renders it into the container and makes it usable.</p>
74
 
 
75
 
<p>Some commonly used configuration attributes are shown below. </p>
76
 
<pre class="code prettyprint">YUI().use(&#x27;dial&#x27;, function(Y) {
77
 
 
78
 
    var dial = new Y.Dial({
79
 
        min:-220,
80
 
        max:220,
81
 
        stepsPerRevolution:100,
82
 
        value: 30
83
 
    });
84
 
    dial.render(&#x27;#demo&#x27;);
85
 
 
86
 
});</pre>
87
 
 
88
 
<h3 id="complete-example-source">Complete Example Source</h3>
89
 
<pre class="code prettyprint">&lt;!DOCTYPE HTML&gt;
90
 
&lt;html&gt;
91
 
&lt;script src=&quot;http:&#x2F;&#x2F;yui.yahooapis.com&#x2F;3.5.1&#x2F;build&#x2F;yui&#x2F;yui-min.js&quot;&gt;&lt;&#x2F;script&gt;
92
 
 
93
 
&lt;body class=&quot;yui3-skin-sam&quot;&gt;
94
 
    &lt;div id=&quot;demo&quot;&gt;&lt;&#x2F;div&gt;
95
 
&lt;&#x2F;body&gt;
96
 
 
97
 
&lt;script&gt;
98
 
YUI().use(&#x27;dial&#x27;, function(Y) {
99
 
 
100
 
    var dial = new Y.Dial({
101
 
        min:-220,
102
 
        max:220,
103
 
        stepsPerRevolution:100,
104
 
        value: 30
105
 
    });
106
 
    dial.render(&#x27;#demo&#x27;);
107
 
 
108
 
});
109
 
&lt;&#x2F;script&gt;
110
 
&lt;&#x2F;html&gt;</pre>
111
 
 
112
 
 
113
 
</div>
114
 
            </div>
115
 
        </div>
116
 
 
117
 
        <div class="yui3-u-1-4">
118
 
            <div class="sidebar">
119
 
                
120
 
                    <div id="toc" class="sidebox">
121
 
                        <div class="hd">
122
 
                            <h2 class="no-toc">Table of Contents</h2>
123
 
                        </div>
124
 
 
125
 
                        <div class="bd">
126
 
                            <ul class="toc">
127
 
<li>
128
 
<a href="#creating-a-dial">Creating a Dial</a>
129
 
<ul class="toc">
130
 
<li>
131
 
<a href="#the-markup">The Markup</a>
132
 
</li>
133
 
<li>
134
 
<a href="#the-javascript">The JavaScript</a>
135
 
</li>
136
 
</ul>
137
 
</li>
138
 
<li>
139
 
<a href="#complete-example-source">Complete Example Source</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="Create a Dial from existing markup on the page - a simple use case.">
157
 
                                            <a href="dial-basic.html">Basic Dial</a>
158
 
                                        </li>
159
 
                                    
160
 
                                
161
 
                                    
162
 
                                        <li data-description="Link a Dial with a text input field.">
163
 
                                            <a href="dial-text-input.html">Dial Linked With Text Input</a>
164
 
                                        </li>
165
 
                                    
166
 
                                
167
 
                                    
168
 
                                        <li data-description="Use image backgrounds to control the visual display of a Dial.">
169
 
                                            <a href="dial-image-background.html">Dial With Image Background</a>
170
 
                                        </li>
171
 
                                    
172
 
                                
173
 
                                    
174
 
                                        <li data-description="Use images to surround a Dial instance and provide additional styling.">
175
 
                                            <a href="dial-image-surrounding.html">Dial With a Surrounding Image</a>
176
 
                                        </li>
177
 
                                    
178
 
                                
179
 
                                    
180
 
                                        <li data-description="This example employs Dial to drive an interactive UI.">
181
 
                                            <a href="dial-interactive.html">Dial With Interactive UI</a>
182
 
                                        </li>
183
 
                                    
184
 
                                
185
 
                                    
186
 
                                        <li data-description="This example shows how to use Dial to animate an image sprite.">
187
 
                                            <a href="duck.html">Image Sprite Animation with Dial</a>
188
 
                                        </li>
189
 
                                    
190
 
                                
191
 
                            </ul>
192
 
                        </div>
193
 
                    </div>
194
 
                
195
 
 
196
 
                
197
 
            </div>
198
 
        </div>
199
 
    </div>
200
 
</div>
201
 
 
202
 
<script src="../assets/vendor/prettify/prettify-min.js"></script>
203
 
<script>prettyPrint();</script>
204
 
 
205
 
</body>
206
 
</html>