|
1 <!DOCTYPE html> |
|
2 <html lang="en"> |
|
3 <head> |
|
4 <meta charset="utf-8"> |
|
5 <title>Example: Dial Linked With Text Input</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: Dial Linked With Text Input</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 <code>Dial</code> widget and link it to a text input.</p> |
|
32 <p>Drag the handle 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> |
|
33 <p>Typing valid values into the text input updates the dial.</p> |
|
34 </div> |
|
35 |
|
36 <div class="example yui3-skin-sam"> |
|
37 <style type="text/css"> |
|
38 .example { |
|
39 text-align:center; |
|
40 *text-align: left; |
|
41 } |
|
42 #demo { |
|
43 margin:0 0 1em; |
|
44 } |
|
45 |
|
46 #myTextInput { |
|
47 width:96px; |
|
48 } |
|
49 </style> |
|
50 |
|
51 <div id="demo"></div> |
|
52 <input id="myTextInput" value=""/> |
|
53 |
|
54 <script> |
|
55 YUI().use('dial', function(Y) { |
|
56 |
|
57 var dial = new Y.Dial({ |
|
58 min:-220, |
|
59 max:220, |
|
60 stepsPerRevolution:100, |
|
61 value: 30 |
|
62 }); |
|
63 dial.render('#demo'); |
|
64 |
|
65 |
|
66 // Function to update the text input value from the Dial value |
|
67 function updateInput( e ){ |
|
68 var val = e.newVal; |
|
69 if ( isNaN( val ) ) { |
|
70 // Not a valid number. |
|
71 return; |
|
72 } |
|
73 this.set( "value", val ); |
|
74 } |
|
75 |
|
76 var theInput = Y.one( "#myTextInput" ); |
|
77 // Subscribe to the Dial's valueChange event, passing the input as the 'this' |
|
78 dial.on( "valueChange", updateInput, theInput ); |
|
79 |
|
80 // Function to pass input value back to the Slider |
|
81 function updateDial( e ){ |
|
82 dial.set( "value" , e.target.get( "value" ) - 0); |
|
83 } |
|
84 theInput.on( "keyup", updateDial ); |
|
85 |
|
86 // Initialize the input |
|
87 theInput.set('value', dial.get('value')); |
|
88 |
|
89 }); |
|
90 </script> |
|
91 </div> |
|
92 |
|
93 <h3 id="creating-the-dial-and-a-text-input">Creating the Dial and a Text Input</h3> |
|
94 |
|
95 <p>A <code>Dial</code> can be created easily and rendered into existing markup.</p> |
|
96 |
|
97 <h4 id="the-markup">The Markup</h4> |
|
98 <p> |
|
99 <strong>Note:</strong> be sure to add the <code>yui3-skin-sam</code> classname to the |
|
100 page's <code><body></code> element or to a parent element of the widget in order to apply |
|
101 the default CSS skin. See <a href="http://yuilibrary.com/yui/docs/tutorials/skins/">Understanding Skinning</a>. |
|
102 </p> |
|
103 <pre class="code prettyprint"><body class="yui3-skin-sam"> <!-- You need this skin class --></pre> |
|
104 |
|
105 <p>This example includes an element to contain the Dial and a text input field.</p> |
|
106 |
|
107 <pre class="code prettyprint"><div id="demo"></div> |
|
108 <input id="myTextInput" value=""/></pre> |
|
109 |
|
110 |
|
111 <h4 id="the-javascript">The JavaScript</h4> |
|
112 |
|
113 <p><code>Dial</code> extends the <code>Widget</code> class, following the same pattern |
|
114 as any widget constructor, accepting a configuration object to |
|
115 set the initial configuration for the widget.</p> |
|
116 |
|
117 <p>After creating and configuring the new <code>Dial</code>, |
|
118 call the <code>render</code> method on your <code>Dial</code> object passing it |
|
119 the selector of a container element. |
|
120 This renders it in the container and makes it usable.</p> |
|
121 |
|
122 <p>Some commonly used configuration attributes are shown below. |
|
123 </p> |
|
124 |
|
125 <!-- intentionally using dial-basic-script here --> |
|
126 <pre class="code prettyprint">YUI().use('dial', function(Y) { |
|
127 |
|
128 var dial = new Y.Dial({ |
|
129 min:-220, |
|
130 max:220, |
|
131 stepsPerRevolution:100, |
|
132 value: 30 |
|
133 }); |
|
134 dial.render('#demo'); |
|
135 |
|
136 });</pre> |
|
137 |
|
138 |
|
139 |
|
140 <h3 id="linking-the-dial-to-the-text-input">Linking the Dial to the Text Input</h3> |
|
141 |
|
142 <p>To keep the Dial's value and a text input value in sync, we need to subscribe to events on both the text input and the Dial.</p> |
|
143 <p>For sending Dial values to the input, the relevant Dial event is <code>valueChange</code>.</p> |
|
144 <pre class="code prettyprint">// Function to update the text input value from the Dial value |
|
145 function updateInput( e ){ |
|
146 var val = e.newVal; |
|
147 if ( isNaN( val ) ) { |
|
148 // Not a valid number. |
|
149 return; |
|
150 } |
|
151 this.set( "value", val ); |
|
152 } |
|
153 |
|
154 var theInput = Y.one( "#myTextInput" ); |
|
155 // Subscribe to the Dial's valueChange event, passing the input as the 'this' |
|
156 dial.on( "valueChange", updateInput, theInput );</pre> |
|
157 |
|
158 |
|
159 |
|
160 <h3 id="linking-the-text-input-to-the-dial">Linking the Text Input to the Dial</h3> |
|
161 |
|
162 <p>To send changes from the text input back to the Dial, we'll listen to the <code>keyup</code> event on <code>theInput</code>.</p> |
|
163 <pre class="code prettyprint">// Function to pass input value back to the Dial |
|
164 function updateDial( e ){ |
|
165 dial.set( "value" , e.target.get( "value" ) - 0); |
|
166 } |
|
167 theInput.on( "keyup", updateDial );</pre> |
|
168 |
|
169 |
|
170 |
|
171 <h3 id="complete-example-source">Complete Example Source</h3> |
|
172 <pre class="code prettyprint"><!DOCTYPE HTML> |
|
173 <html> |
|
174 <script src="http://yui.yahooapis.com/3.10.3/build/yui/yui-min.js"></script> |
|
175 |
|
176 <style> |
|
177 #demo { |
|
178 margin:0 0 1em; |
|
179 } |
|
180 |
|
181 #myTextInput { |
|
182 width:96px; |
|
183 } |
|
184 </style> |
|
185 |
|
186 <body class="yui3-skin-sam"> <!-- You need this skin class --> |
|
187 <div id="demo"></div> |
|
188 <input id="myTextInput" value=""/> |
|
189 </body> |
|
190 |
|
191 <script> |
|
192 YUI().use('dial', function(Y) { |
|
193 |
|
194 var dial = new Y.Dial({ |
|
195 min:-220, |
|
196 max:220, |
|
197 stepsPerRevolution:100, |
|
198 value: 30 |
|
199 }); |
|
200 dial.render('#demo'); |
|
201 |
|
202 |
|
203 // Function to update the text input value from the Dial value |
|
204 function updateInput( e ){ |
|
205 var val = e.newVal; |
|
206 if ( isNaN( val ) ) { |
|
207 // Not a valid number. |
|
208 return; |
|
209 } |
|
210 this.set( "value", val ); |
|
211 } |
|
212 |
|
213 var theInput = Y.one( "#myTextInput" ); |
|
214 // Subscribe to the Dial's valueChange event, passing the input as the 'this' |
|
215 dial.on( "valueChange", updateInput, theInput ); |
|
216 |
|
217 // Function to pass input value back to the Slider |
|
218 function updateDial( e ){ |
|
219 dial.set( "value" , e.target.get( "value" ) - 0); |
|
220 } |
|
221 theInput.on( "keyup", updateDial ); |
|
222 |
|
223 // Initialize the input |
|
224 theInput.set('value', dial.get('value')); |
|
225 |
|
226 }); |
|
227 </script> |
|
228 </html></pre> |
|
229 |
|
230 </div> |
|
231 </div> |
|
232 </div> |
|
233 |
|
234 <div class="yui3-u-1-4"> |
|
235 <div class="sidebar"> |
|
236 |
|
237 <div id="toc" class="sidebox"> |
|
238 <div class="hd"> |
|
239 <h2 class="no-toc">Table of Contents</h2> |
|
240 </div> |
|
241 |
|
242 <div class="bd"> |
|
243 <ul class="toc"> |
|
244 <li> |
|
245 <a href="#creating-the-dial-and-a-text-input">Creating the Dial and a Text Input</a> |
|
246 <ul class="toc"> |
|
247 <li> |
|
248 <a href="#the-markup">The Markup</a> |
|
249 </li> |
|
250 <li> |
|
251 <a href="#the-javascript">The JavaScript</a> |
|
252 </li> |
|
253 </ul> |
|
254 </li> |
|
255 <li> |
|
256 <a href="#linking-the-dial-to-the-text-input">Linking the Dial to the Text Input</a> |
|
257 </li> |
|
258 <li> |
|
259 <a href="#linking-the-text-input-to-the-dial">Linking the Text Input to the Dial</a> |
|
260 </li> |
|
261 <li> |
|
262 <a href="#complete-example-source">Complete Example Source</a> |
|
263 </li> |
|
264 </ul> |
|
265 </div> |
|
266 </div> |
|
267 |
|
268 |
|
269 |
|
270 <div class="sidebox"> |
|
271 <div class="hd"> |
|
272 <h2 class="no-toc">Examples</h2> |
|
273 </div> |
|
274 |
|
275 <div class="bd"> |
|
276 <ul class="examples"> |
|
277 |
|
278 |
|
279 <li data-description="Create a Dial from existing markup on the page - a simple use case."> |
|
280 <a href="dial-basic.html">Basic Dial</a> |
|
281 </li> |
|
282 |
|
283 |
|
284 |
|
285 <li data-description="Link a Dial with a text input field."> |
|
286 <a href="dial-text-input.html">Dial Linked With Text Input</a> |
|
287 </li> |
|
288 |
|
289 |
|
290 |
|
291 <li data-description="Use image backgrounds to control the visual display of a Dial."> |
|
292 <a href="dial-image-background.html">Dial With Image Background</a> |
|
293 </li> |
|
294 |
|
295 |
|
296 |
|
297 <li data-description="Use images to surround a Dial instance and provide additional styling."> |
|
298 <a href="dial-image-surrounding.html">Dial With a Surrounding Image</a> |
|
299 </li> |
|
300 |
|
301 |
|
302 |
|
303 <li data-description="This example employs Dial to drive an interactive UI."> |
|
304 <a href="dial-interactive.html">Dial With Interactive UI</a> |
|
305 </li> |
|
306 |
|
307 |
|
308 |
|
309 <li data-description="This example shows how to use Dial to animate an image sprite."> |
|
310 <a href="duck.html">Image Sprite Animation with Dial</a> |
|
311 </li> |
|
312 |
|
313 |
|
314 |
|
315 |
|
316 </ul> |
|
317 </div> |
|
318 </div> |
|
319 |
|
320 |
|
321 |
|
322 <div class="sidebox"> |
|
323 <div class="hd"> |
|
324 <h2 class="no-toc">Examples That Use This Component</h2> |
|
325 </div> |
|
326 |
|
327 <div class="bd"> |
|
328 <ul class="examples"> |
|
329 |
|
330 |
|
331 |
|
332 |
|
333 |
|
334 |
|
335 |
|
336 |
|
337 |
|
338 |
|
339 |
|
340 |
|
341 |
|
342 |
|
343 <li data-description="Use the HSL color picker to select a new color. Then chose the color type you like best."> |
|
344 <a href="../color/hsl-picker.html">HSL Color Picker</a> |
|
345 </li> |
|
346 |
|
347 |
|
348 </ul> |
|
349 </div> |
|
350 </div> |
|
351 |
|
352 </div> |
|
353 </div> |
|
354 </div> |
|
355 </div> |
|
356 |
|
357 <script src="../assets/vendor/prettify/prettify-min.js"></script> |
|
358 <script>prettyPrint();</script> |
|
359 |
|
360 <script> |
|
361 YUI.Env.Tests = { |
|
362 examples: [], |
|
363 project: '../assets', |
|
364 assets: '../assets/dial', |
|
365 name: 'dial-text-input', |
|
366 title: 'Dial Linked With Text Input', |
|
367 newWindow: '', |
|
368 auto: false |
|
369 }; |
|
370 YUI.Env.Tests.examples.push('dial-basic'); |
|
371 YUI.Env.Tests.examples.push('dial-text-input'); |
|
372 YUI.Env.Tests.examples.push('dial-image-background'); |
|
373 YUI.Env.Tests.examples.push('dial-image-surrounding'); |
|
374 YUI.Env.Tests.examples.push('dial-interactive'); |
|
375 YUI.Env.Tests.examples.push('duck'); |
|
376 YUI.Env.Tests.examples.push('hsl-picker'); |
|
377 |
|
378 </script> |
|
379 <script src="../assets/yui/test-runner.js"></script> |
|
380 |
|
381 |
|
382 |
|
383 </body> |
|
384 </html> |