|
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=PT+Sans:400,700,400italic,700italic"> |
|
7 <link rel="stylesheet" href="../../build/cssgrids/cssgrids-min.css"> |
|
8 <link rel="stylesheet" href="../assets/css/main.css"> |
|
9 <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css"> |
|
10 <link rel="shortcut icon" type="image/png" href="../assets/favicon.png"> |
|
11 <script src="../../build/yui/yui-min.js"></script> |
|
12 |
|
13 </head> |
|
14 <body> |
|
15 <!-- |
|
16 <a href="https://github.com/yui/yui3"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a> |
|
17 --> |
|
18 <div id="doc"> |
|
19 <div id="hd"> |
|
20 <h1><img src="http://yuilibrary.com/img/yui-logo.png"></h1> |
|
21 </div> |
|
22 |
|
23 <a href="#toc" class="jump">Jump to Table of Contents</a> |
|
24 |
|
25 |
|
26 <h1>Example: Basic Dial</h1> |
|
27 <div class="yui3-g"> |
|
28 <div class="yui3-u-3-4"> |
|
29 <div id="main"> |
|
30 <div class="content"><div class="intro"> |
|
31 <p>This example shows how to create a basic <code>Dial</code> widget.</p> |
|
32 |
|
33 <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> |
|
34 </div> |
|
35 |
|
36 <div class="example yui3-skin-sam"> |
|
37 <style> |
|
38 #demo { |
|
39 margin:0 0 1em; |
|
40 } |
|
41 .example { |
|
42 text-align: center; |
|
43 *text-align: left; |
|
44 } |
|
45 </style> |
|
46 <div id="demo"></div> |
|
47 <script> |
|
48 YUI().use('dial', function(Y) { |
|
49 |
|
50 var dial = new Y.Dial({ |
|
51 min:-220, |
|
52 max:220, |
|
53 stepsPerRevolution:100, |
|
54 value: 30 |
|
55 }); |
|
56 dial.render('#demo'); |
|
57 |
|
58 }); |
|
59 </script> |
|
60 |
|
61 </div> |
|
62 |
|
63 <h3 id="creating-a-dial">Creating a Dial</h3> |
|
64 <p>A <code>Dial</code> can be created easily and rendered into existing markup.</p> |
|
65 |
|
66 <h4 id="the-markup">The Markup</h4> |
|
67 <p> |
|
68 <strong>Note:</strong> be sure to add the <code>yui3-skin-sam</code> classname to the |
|
69 page's <code><body></code> element or to a parent element of the widget in order to apply |
|
70 the default CSS skin. See <a href="http://yuilibrary.com/yui/docs/tutorials/skins/">Understanding Skinning</a>. |
|
71 </p> |
|
72 <pre class="code prettyprint"><body class="yui3-skin-sam"> <!-- You need this skin class --></pre> |
|
73 |
|
74 <p>The only markup requirement is an HTML element to contain the Dial.</p> |
|
75 |
|
76 <pre class="code prettyprint"><div id="demo"></div></pre> |
|
77 |
|
78 <h4 id="the-javascript">The JavaScript</h4> |
|
79 <p><code>Dial</code> extends the <code>Widget</code> class, following the same pattern |
|
80 as any widget constructor. As a result, it accepts a configuration object to |
|
81 set the initial configuration for the widget.</p> |
|
82 |
|
83 <p>After creating and configuring the new <code>Dial</code>, |
|
84 call the <code>render</code> method on the <code>Dial</code> object, passing it |
|
85 the selector for a container element. |
|
86 This renders it into the container and makes it usable.</p> |
|
87 |
|
88 <p>Some commonly used configuration attributes are shown below. </p> |
|
89 <pre class="code prettyprint">YUI().use('dial', function(Y) { |
|
90 |
|
91 var dial = new Y.Dial({ |
|
92 min:-220, |
|
93 max:220, |
|
94 stepsPerRevolution:100, |
|
95 value: 30 |
|
96 }); |
|
97 dial.render('#demo'); |
|
98 |
|
99 });</pre> |
|
100 |
|
101 <h3 id="complete-example-source">Complete Example Source</h3> |
|
102 <pre class="code prettyprint"><!DOCTYPE HTML> |
|
103 <html> |
|
104 <script src="http://yui.yahooapis.com/3.10.3/build/yui/yui-min.js"></script> |
|
105 |
|
106 <body class="yui3-skin-sam"> <!-- You need this skin class --> |
|
107 <div id="demo"></div> |
|
108 </body> |
|
109 |
|
110 <script> |
|
111 YUI().use('dial', function(Y) { |
|
112 |
|
113 var dial = new Y.Dial({ |
|
114 min:-220, |
|
115 max:220, |
|
116 stepsPerRevolution:100, |
|
117 value: 30 |
|
118 }); |
|
119 dial.render('#demo'); |
|
120 |
|
121 }); |
|
122 </script> |
|
123 </html></pre> |
|
124 |
|
125 |
|
126 </div> |
|
127 </div> |
|
128 </div> |
|
129 |
|
130 <div class="yui3-u-1-4"> |
|
131 <div class="sidebar"> |
|
132 |
|
133 <div id="toc" class="sidebox"> |
|
134 <div class="hd"> |
|
135 <h2 class="no-toc">Table of Contents</h2> |
|
136 </div> |
|
137 |
|
138 <div class="bd"> |
|
139 <ul class="toc"> |
|
140 <li> |
|
141 <a href="#creating-a-dial">Creating a Dial</a> |
|
142 <ul class="toc"> |
|
143 <li> |
|
144 <a href="#the-markup">The Markup</a> |
|
145 </li> |
|
146 <li> |
|
147 <a href="#the-javascript">The JavaScript</a> |
|
148 </li> |
|
149 </ul> |
|
150 </li> |
|
151 <li> |
|
152 <a href="#complete-example-source">Complete Example Source</a> |
|
153 </li> |
|
154 </ul> |
|
155 </div> |
|
156 </div> |
|
157 |
|
158 |
|
159 |
|
160 <div class="sidebox"> |
|
161 <div class="hd"> |
|
162 <h2 class="no-toc">Examples</h2> |
|
163 </div> |
|
164 |
|
165 <div class="bd"> |
|
166 <ul class="examples"> |
|
167 |
|
168 |
|
169 <li data-description="Create a Dial from existing markup on the page - a simple use case."> |
|
170 <a href="dial-basic.html">Basic Dial</a> |
|
171 </li> |
|
172 |
|
173 |
|
174 |
|
175 <li data-description="Link a Dial with a text input field."> |
|
176 <a href="dial-text-input.html">Dial Linked With Text Input</a> |
|
177 </li> |
|
178 |
|
179 |
|
180 |
|
181 <li data-description="Use image backgrounds to control the visual display of a Dial."> |
|
182 <a href="dial-image-background.html">Dial With Image Background</a> |
|
183 </li> |
|
184 |
|
185 |
|
186 |
|
187 <li data-description="Use images to surround a Dial instance and provide additional styling."> |
|
188 <a href="dial-image-surrounding.html">Dial With a Surrounding Image</a> |
|
189 </li> |
|
190 |
|
191 |
|
192 |
|
193 <li data-description="This example employs Dial to drive an interactive UI."> |
|
194 <a href="dial-interactive.html">Dial With Interactive UI</a> |
|
195 </li> |
|
196 |
|
197 |
|
198 |
|
199 <li data-description="This example shows how to use Dial to animate an image sprite."> |
|
200 <a href="duck.html">Image Sprite Animation with Dial</a> |
|
201 </li> |
|
202 |
|
203 |
|
204 |
|
205 |
|
206 </ul> |
|
207 </div> |
|
208 </div> |
|
209 |
|
210 |
|
211 |
|
212 <div class="sidebox"> |
|
213 <div class="hd"> |
|
214 <h2 class="no-toc">Examples That Use This Component</h2> |
|
215 </div> |
|
216 |
|
217 <div class="bd"> |
|
218 <ul class="examples"> |
|
219 |
|
220 |
|
221 |
|
222 |
|
223 |
|
224 |
|
225 |
|
226 |
|
227 |
|
228 |
|
229 |
|
230 |
|
231 |
|
232 |
|
233 <li data-description="Use the HSL color picker to select a new color. Then chose the color type you like best."> |
|
234 <a href="../color/hsl-picker.html">HSL Color Picker</a> |
|
235 </li> |
|
236 |
|
237 |
|
238 </ul> |
|
239 </div> |
|
240 </div> |
|
241 |
|
242 </div> |
|
243 </div> |
|
244 </div> |
|
245 </div> |
|
246 |
|
247 <script src="../assets/vendor/prettify/prettify-min.js"></script> |
|
248 <script>prettyPrint();</script> |
|
249 |
|
250 <script> |
|
251 YUI.Env.Tests = { |
|
252 examples: [], |
|
253 project: '../assets', |
|
254 assets: '../assets/dial', |
|
255 name: 'dial-basic', |
|
256 title: 'Basic Dial', |
|
257 newWindow: '', |
|
258 auto: false |
|
259 }; |
|
260 YUI.Env.Tests.examples.push('dial-basic'); |
|
261 YUI.Env.Tests.examples.push('dial-text-input'); |
|
262 YUI.Env.Tests.examples.push('dial-image-background'); |
|
263 YUI.Env.Tests.examples.push('dial-image-surrounding'); |
|
264 YUI.Env.Tests.examples.push('dial-interactive'); |
|
265 YUI.Env.Tests.examples.push('duck'); |
|
266 YUI.Env.Tests.examples.push('hsl-picker'); |
|
267 |
|
268 </script> |
|
269 <script src="../assets/yui/test-runner.js"></script> |
|
270 |
|
271 |
|
272 |
|
273 </body> |
|
274 </html> |