|
525
|
1 |
<!DOCTYPE html> |
|
|
2 |
<html lang="en"> |
|
|
3 |
<head> |
|
|
4 |
<meta charset="utf-8"> |
|
|
5 |
<title>Example: Creating a Slider from Existing Markup</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 |
|
|
|
24 |
<h1>Example: Creating a Slider from Existing Markup</h1> |
|
|
25 |
<div class="yui3-g"> |
|
|
26 |
<div class="yui3-u-3-4"> |
|
|
27 |
<div id="main"> |
|
|
28 |
<div class="content"><style scoped> |
|
|
29 |
#demo { |
|
|
30 |
background: #fff; |
|
|
31 |
border: 1px solid #999; |
|
|
32 |
color: #000; |
|
|
33 |
} |
|
|
34 |
|
|
|
35 |
#demo .demo-content { |
|
|
36 |
padding: 1ex 1em; |
|
|
37 |
} |
|
|
38 |
|
|
|
39 |
#volume_control { |
|
|
40 |
height: 25px; |
|
|
41 |
line-height: 25px; |
|
|
42 |
background: url(../assets/slider/images/sprite.png) repeat-x 0 0; |
|
|
43 |
position: relative; |
|
|
44 |
} |
|
|
45 |
|
|
|
46 |
#volume_control label { |
|
|
47 |
font-weight: bold; |
|
|
48 |
margin: 0 1ex 0 1em; |
|
|
49 |
zoom: 1; |
|
|
50 |
} |
|
|
51 |
|
|
|
52 |
#volume { |
|
|
53 |
border: 1px inset #999; |
|
|
54 |
height: 16px; |
|
|
55 |
margin-top: 3px; |
|
|
56 |
padding: 0 3px; |
|
|
57 |
text-align: right; |
|
|
58 |
width: 2em; |
|
|
59 |
} |
|
|
60 |
|
|
|
61 |
/* Support open/close action for the slider */ |
|
|
62 |
#demo .volume-hide #volume_slider { |
|
|
63 |
display: none; |
|
|
64 |
} |
|
|
65 |
|
|
|
66 |
#volume_icon { |
|
|
67 |
background: url(../assets/slider/images/sprite.png) no-repeat 0 -25px; |
|
|
68 |
border: 0 none; |
|
|
69 |
height: 25px; |
|
|
70 |
vertical-align: top; |
|
|
71 |
width: 31px; |
|
|
72 |
} |
|
|
73 |
|
|
|
74 |
/* move the button text offscreen left */ |
|
|
75 |
#volume_icon p { |
|
|
76 |
text-indent: -9999px; |
|
|
77 |
} |
|
|
78 |
|
|
|
79 |
/* |
|
|
80 |
* adjust the speaker icon sprite in accordance with volume level and |
|
|
81 |
* active state |
|
|
82 |
*/ |
|
|
83 |
#demo .volume-hide .level_0 { background-position: 0 -25px; } |
|
|
84 |
#demo .volume-hide .level_1 { background-position: 0 -50px; } |
|
|
85 |
#demo .volume-hide .level_2 { background-position: 0 -75px; } |
|
|
86 |
#demo .volume-hide .level_3 { background-position: 0 -100px; } |
|
|
87 |
|
|
|
88 |
#demo .level_0, |
|
|
89 |
#demo .level_0:hover { |
|
|
90 |
background-position: 0 -125px; |
|
|
91 |
} |
|
|
92 |
#demo .level_1, |
|
|
93 |
#demo .level_1:hover { |
|
|
94 |
background-position: 0 -150px; |
|
|
95 |
} |
|
|
96 |
#demo .level_2, |
|
|
97 |
#demo .level_2:hover { |
|
|
98 |
background-position: 0 -175px; |
|
|
99 |
} |
|
|
100 |
#demo .level_3, |
|
|
101 |
#demo .level_3:hover { |
|
|
102 |
background-position: 0 -200px; |
|
|
103 |
} |
|
|
104 |
|
|
|
105 |
#volume_slider { |
|
|
106 |
position: absolute; |
|
|
107 |
top: 25px; |
|
|
108 |
} |
|
|
109 |
|
|
|
110 |
/* rail image on the containing box rather than the rail element */ |
|
|
111 |
#volume_slider { |
|
|
112 |
background: url(../assets/slider/images/sprite.png) no-repeat 0 -259px; |
|
|
113 |
height: 116px; |
|
|
114 |
width: 31px; |
|
|
115 |
padding-top: 9px; |
|
|
116 |
cursor: arrow; |
|
|
117 |
} |
|
|
118 |
|
|
|
119 |
#volume_slider .yui3-slider-rail { |
|
|
120 |
background-image: none; |
|
|
121 |
width: 31px; |
|
|
122 |
} |
|
|
123 |
|
|
|
124 |
#volume_slider .yui3-slider-thumb { |
|
|
125 |
height: 17px; |
|
|
126 |
width: 31px; |
|
|
127 |
overflow: hidden; |
|
|
128 |
} |
|
|
129 |
|
|
|
130 |
#volume_slider .yui3-slider-thumb img { |
|
|
131 |
position: absolute; |
|
|
132 |
top: -225px; |
|
|
133 |
} |
|
|
134 |
|
|
|
135 |
#volume_slider .yui3-slider-disabled .yui3-slider-thumb img { |
|
|
136 |
top: -242px; |
|
|
137 |
} |
|
|
138 |
|
|
|
139 |
#demo_sprite { |
|
|
140 |
display: inline; |
|
|
141 |
float: left; |
|
|
142 |
margin-right: 1em; |
|
|
143 |
} |
|
|
144 |
</style> |
|
|
145 |
|
|
|
146 |
<div class="intro"> |
|
|
147 |
<p>This example illustrates a few points:</p> |
|
|
148 |
<ol> |
|
|
149 |
<li>How to create a Slider using existing markup</li> |
|
|
150 |
<li>How to disable a Slider</li> |
|
|
151 |
<li>How to use an image sprite to create a custom Slider skin</li> |
|
|
152 |
</ol> |
|
|
153 |
|
|
|
154 |
<p>The visualization of the Slider is based on the volume control in Mac OS X 10.5, with additional controls included for illustration. <strong>Click on the speaker icon to show the Slider</strong>.</p> |
|
|
155 |
</div> |
|
|
156 |
|
|
|
157 |
<div class="example"> |
|
|
158 |
<div id="demo" class="yui3-skin-sam"> <!-- You need this skin class --> |
|
|
159 |
|
|
|
160 |
<div id="volume_control" class="volume-hide"> |
|
|
161 |
<label for="volume">volume</label><input type="text" size="3" maxlength="3" name="volume" id="volume" value="50"> |
|
|
162 |
<button type="button" id="volume_icon" class="level_2" title="Open volume slider"><p>Open</p></button> |
|
|
163 |
<span id="volume_slider"> |
|
|
164 |
<span class="yui3-slider-rail"> |
|
|
165 |
<span class="yui3-slider-thumb"><img src="../assets/slider/images/sprite.png" height="384" width="31"></span> |
|
|
166 |
</span> |
|
|
167 |
</span> |
|
|
168 |
<label for="mute"><input type="checkbox" id="mute"> mute</label> |
|
|
169 |
</div> |
|
|
170 |
|
|
|
171 |
<div class="demo-content"> |
|
|
172 |
<p>Nulla facilisi. In vel sem. Morbi id urna in diam dignissim feugiat. Proin molestie tortor eu velit. Aliquam erat volutpat. Nullam ultrices, diam tempus vulputate egestas, eros pede varius leo, sed imperdiet lectus est ornare odio.</p> |
|
|
173 |
<p>Phasellus wisi purus, interdum vitae, rutrum accumsan, viverra in, velit. Sed enim risus, congue non, tristique in, commodo eu, metus. Aenean tortor mi, imperdiet id, gravida eu, posuere eu, felis.</p> |
|
|
174 |
</div> |
|
|
175 |
</div> |
|
|
176 |
|
|
|
177 |
</div> |
|
|
178 |
<script> |
|
|
179 |
YUI().use("slider", function (Y) { |
|
|
180 |
|
|
|
181 |
var control = Y.one('#volume_control'), |
|
|
182 |
volInput = Y.one('#volume'), |
|
|
183 |
icon = Y.one('#volume_icon'), |
|
|
184 |
mute = Y.one('#mute'), |
|
|
185 |
open = false, |
|
|
186 |
level = 2, |
|
|
187 |
beforeMute = 0, |
|
|
188 |
wait, |
|
|
189 |
volume; |
|
|
190 |
|
|
|
191 |
Y.one("#volume_slider").setStyle('left',icon.get('offsetLeft')+'px'); |
|
|
192 |
|
|
|
193 |
volume = new Y.Slider({ |
|
|
194 |
axis : 'y', |
|
|
195 |
min : 100, |
|
|
196 |
max : 0, |
|
|
197 |
value : 50, |
|
|
198 |
length: '105px' |
|
|
199 |
}); |
|
|
200 |
|
|
|
201 |
volume.renderRail = function () { |
|
|
202 |
return Y.one( "#volume_slider span.yui3-slider-rail" ); |
|
|
203 |
}; |
|
|
204 |
volume.renderThumb = function () { |
|
|
205 |
return this.rail.one( "span.yui3-slider-thumb" ); |
|
|
206 |
}; |
|
|
207 |
|
|
|
208 |
volume.render( "#volume_slider" ); |
|
|
209 |
|
|
|
210 |
// Initialize event listeners |
|
|
211 |
volume.after('valueChange', updateInput); |
|
|
212 |
volume.after('valueChange', updateIcon); |
|
|
213 |
|
|
|
214 |
mute.on('click', muteVolume); |
|
|
215 |
|
|
|
216 |
volInput.on({ |
|
|
217 |
keydown : handleInput, |
|
|
218 |
keyup : updateVolume |
|
|
219 |
}); |
|
|
220 |
|
|
|
221 |
icon.on('click', showHideSlider); |
|
|
222 |
|
|
|
223 |
Y.one( 'doc' ).on('click', handleDocumentClick ); |
|
|
224 |
|
|
|
225 |
// Support functions |
|
|
226 |
function updateInput(e) { |
|
|
227 |
if (e.src !== 'KEY') { |
|
|
228 |
volInput.set('value',e.newVal); |
|
|
229 |
} |
|
|
230 |
} |
|
|
231 |
|
|
|
232 |
function updateIcon(e) { |
|
|
233 |
var newLevel = e.newVal && Math.ceil(e.newVal / 34); |
|
|
234 |
|
|
|
235 |
if (level !== newLevel) { |
|
|
236 |
icon.replaceClass('level_'+level, 'level_'+newLevel); |
|
|
237 |
level = newLevel; |
|
|
238 |
} |
|
|
239 |
} |
|
|
240 |
|
|
|
241 |
function muteVolume(e) { |
|
|
242 |
var disabled = !volume.get('disabled'); |
|
|
243 |
volume.set('disabled', disabled); |
|
|
244 |
|
|
|
245 |
if (disabled) { |
|
|
246 |
beforeMute = volume.getValue(); |
|
|
247 |
volume.setValue(0); |
|
|
248 |
volInput.set('disabled','disabled'); |
|
|
249 |
} else { |
|
|
250 |
volume.setValue(beforeMute); |
|
|
251 |
volInput.set('disabled',''); |
|
|
252 |
} |
|
|
253 |
} |
|
|
254 |
|
|
|
255 |
function handleInput(e) { |
|
|
256 |
// Allow only numbers and various other control keys |
|
|
257 |
if (e.keyCode > 57) { |
|
|
258 |
e.halt(); |
|
|
259 |
} |
|
|
260 |
} |
|
|
261 |
|
|
|
262 |
function updateVolume(e) { |
|
|
263 |
// delay input processing to give the user time to type |
|
|
264 |
if (wait) { |
|
|
265 |
wait.cancel(); |
|
|
266 |
} |
|
|
267 |
|
|
|
268 |
wait = Y.later(400, null, function () { |
|
|
269 |
var value = parseInt(volInput.get('value'),10) || 0; |
|
|
270 |
|
|
|
271 |
if (value > 100) { |
|
|
272 |
volInput.set('value', 100); |
|
|
273 |
value = 100 |
|
|
274 |
} |
|
|
275 |
|
|
|
276 |
volume.setValue( value ); |
|
|
277 |
}); |
|
|
278 |
} |
|
|
279 |
|
|
|
280 |
function showHideSlider(e) { |
|
|
281 |
control.toggleClass('volume-hide'); |
|
|
282 |
open = !open; |
|
|
283 |
|
|
|
284 |
if (e) { |
|
|
285 |
e.preventDefault(); |
|
|
286 |
} |
|
|
287 |
} |
|
|
288 |
|
|
|
289 |
function handleDocumentClick(e) { |
|
|
290 |
if (open && !icon.contains(e.target) && |
|
|
291 |
!volume.get('boundingBox').contains(e.target)) { |
|
|
292 |
showHideSlider(); |
|
|
293 |
} |
|
|
294 |
} |
|
|
295 |
|
|
|
296 |
}); |
|
|
297 |
|
|
|
298 |
</script> |
|
|
299 |
|
|
|
300 |
<h3 id="prog_enh">Progressive Enhancement</h3> |
|
|
301 |
<p>The <a href="http://en.wikipedia.org/wiki/Progressive_enhancement">Progressive Enhancement</a> strategy recommends that your page not contain markup that will only be useful in cases where JavaScript is available. For this reason, Slider does not include an <code>HTML_PARSER</code> to reuse existing markup. However, it is possible to override a couple methods to accomplish the task.</p> |
|
|
302 |
|
|
|
303 |
<p>The starting markup for the volume control area is as follows:</p> |
|
|
304 |
|
|
|
305 |
<pre class="code prettyprint"><div id="volume_control" class="volume-hide"> |
|
|
306 |
<label for="volume">volume</label><input type="text" size="3" maxlength="3" name="volume" id="volume" value="50"> |
|
|
307 |
<button type="button" id="volume_icon" class="level_2" title="Open volume slider"><p>Open</p></button> |
|
|
308 |
|
|
|
309 |
<span id="volume_slider"> |
|
|
310 |
<span class="yui3-slider-rail"> |
|
|
311 |
<span class="yui3-slider-thumb"><img src="../assets/slider/images/sprite.png" height="384" width="31"></span> |
|
|
312 |
</span> |
|
|
313 |
</span> |
|
|
314 |
|
|
|
315 |
<label for="mute"><input type="checkbox" id="mute"> mute</label> |
|
|
316 |
</div></pre> |
|
|
317 |
|
|
|
318 |
|
|
|
319 |
<p>To tell the Slider to use the existing rail and thumb elements, override the <code>renderRail</code> and <code>renderThumb</code> methods.</p> |
|
|
320 |
|
|
|
321 |
<pre class="code prettyprint">var volume = new Y.Slider({ |
|
|
322 |
axis : 'y', |
|
|
323 |
min : 100, // reverse min and max to make the top |
|
|
324 |
max : 0, // equal 100 and the bottom 0 |
|
|
325 |
value : 50, |
|
|
326 |
length: '105px' |
|
|
327 |
}); |
|
|
328 |
|
|
|
329 |
// Override renderRail to just return the existing rail node |
|
|
330 |
volume.renderRail = function () { |
|
|
331 |
return Y.one( "#volume_slider span.yui3-slider-rail" ); |
|
|
332 |
}; |
|
|
333 |
// Override renderThumb to just return the existing thumb node |
|
|
334 |
volume.renderThumb = function () { |
|
|
335 |
return this.rail.one( "span.yui3-slider-thumb" ); |
|
|
336 |
}; |
|
|
337 |
|
|
|
338 |
volume.render( "#volume_slider" );</pre> |
|
|
339 |
|
|
|
340 |
|
|
|
341 |
<h3 id="syncui">Hide and show the Slider</h3> |
|
|
342 |
<p>By default, we want the Slider to be hidden until the user clicks on the speaker icon. However, we want to support muting or changing the value of the Slider while it is hidden.</p> |
|
|
343 |
|
|
|
344 |
<pre class="code prettyprint">var control = Y.one('#volume_control'), |
|
|
345 |
icon = Y.one('#volume_icon'), |
|
|
346 |
open = false; |
|
|
347 |
|
|
|
348 |
function showHideSlider(e) { |
|
|
349 |
control.toggleClass('volume-hide'); |
|
|
350 |
open = !open; |
|
|
351 |
|
|
|
352 |
if (e) { |
|
|
353 |
e.preventDefault(); |
|
|
354 |
} |
|
|
355 |
} |
|
|
356 |
|
|
|
357 |
icon.on('click', showHideSlider); |
|
|
358 |
|
|
|
359 |
// Also support hiding the Slider when the user clicks outside the |
|
|
360 |
// Slider element. |
|
|
361 |
function handleDocumentClick(e) { |
|
|
362 |
if (open && !icon.contains(e.target) && |
|
|
363 |
!volume.get('boundingBox').contains(e.target)) { |
|
|
364 |
showHideSlider(); |
|
|
365 |
} |
|
|
366 |
} |
|
|
367 |
|
|
|
368 |
Y.one( 'doc' ).on('click', handleDocumentClick );</pre> |
|
|
369 |
|
|
|
370 |
|
|
|
371 |
<h3 id="demo_mute">Mute and unmute</h3> |
|
|
372 |
<p>We want to disable the Slider and input and set the value to 0 if a user checks the mute checkbox. The value should be returned to the last assigned value when unmuted. To disable the Slider, set its <code>disabled</code> attribute to <code>true</code>.</p> |
|
|
373 |
|
|
|
374 |
<pre class="code prettyprint">var volInput = Y.one('#volume'), |
|
|
375 |
mute = Y.one('#mute'), |
|
|
376 |
beforeMute = 0; |
|
|
377 |
|
|
|
378 |
function muteVolume(e) { |
|
|
379 |
// Set disabled to false if currently true; true if currently false |
|
|
380 |
var disabled = !volume.get('disabled'); |
|
|
381 |
volume.set('disabled', disabled); |
|
|
382 |
|
|
|
383 |
if (disabled) { |
|
|
384 |
beforeMute = volume.getValue(); |
|
|
385 |
volume.setValue(0); |
|
|
386 |
volInput.set('disabled','disabled'); |
|
|
387 |
} else { |
|
|
388 |
volume.setValue(beforeMute); |
|
|
389 |
volInput.set('disabled',''); |
|
|
390 |
} |
|
|
391 |
} |
|
|
392 |
|
|
|
393 |
mute.on('click', muteVolume);</pre> |
|
|
394 |
|
|
|
395 |
|
|
|
396 |
<h3>Skinning and CSS</h3> |
|
|
397 |
<img id="demo_sprite" src="../assets/slider/images/sprite.png" height="384" width="31" alt="Sprite of all custom image resources for this example"> |
|
|
398 |
<p>We'll be using the image sprite to the left to create a custom skin. In this design, to keep things simple, the Slider's container and end caps are all rendered together at the bottom of the sprite.</p> |
|
|
399 |
|
|
|
400 |
<p>Slider's thumb range is constrained by the rail element, so it wouldn't be appropriate to use this image as the rail's background—the thumb would slide off the ends. Instead, the rail image is assigned as the background to the Slider's containing element <code>#volume_slider</code>. Then the default skin background image is removed on the rail.</p> |
|
|
401 |
|
|
|
402 |
<pre class="code prettyprint">/* rail image on the containing box rather than the rail element */ |
|
|
403 |
#volume_slider { |
|
|
404 |
background: url("assets/images/sprite.png") no-repeat 0 -259px; |
|
|
405 |
height: 116px; |
|
|
406 |
width: 31px; |
|
|
407 |
padding-top: 9px; |
|
|
408 |
} |
|
|
409 |
|
|
|
410 |
#volume_slider .yui3-slider-rail { |
|
|
411 |
background-image: none; |
|
|
412 |
width: 31px; |
|
|
413 |
} |
|
|
414 |
|
|
|
415 |
#volume_slider .yui3-slider-thumb { |
|
|
416 |
height: 17px; |
|
|
417 |
width: 31px; |
|
|
418 |
overflow: hidden; |
|
|
419 |
} |
|
|
420 |
|
|
|
421 |
#volume_slider .yui3-slider-thumb img { |
|
|
422 |
position: absolute; |
|
|
423 |
top: -225px; |
|
|
424 |
} |
|
|
425 |
|
|
|
426 |
#volume_slider .yui3-slider-disabled .yui3-slider-thumb img { |
|
|
427 |
top: -242px; |
|
|
428 |
}</pre> |
|
|
429 |
|
|
|
430 |
|
|
|
431 |
<p>You can see the full CSS and JavaScript for the other controls in the <a href="#full_code_listing">Full Code Listing</a> below.</p> |
|
|
432 |
|
|
|
433 |
|
|
|
434 |
<h3 id="full_code_listing">Full Code Listing</h3> |
|
|
435 |
<p>Here is the full markup, CSS, and JavaScript for the entire example, including the volume input and mute controls, and CSS for placing the Slider and setting up the volume icon sprite positioning.</p> |
|
|
436 |
|
|
|
437 |
<h4>Markup</h4> |
|
|
438 |
|
|
|
439 |
<p> |
|
|
440 |
<strong>Note:</strong> be sure to add the <code>yui3-skin-sam</code> classname to the |
|
|
441 |
page's <code><body></code> element or to a parent element of the widget in order to apply |
|
|
442 |
the default CSS skin. See <a href="http://yuilibrary.com/yui/docs/tutorials/skins/">Understanding Skinning</a>. |
|
|
443 |
</p> |
|
|
444 |
|
|
|
445 |
<pre class="code prettyprint"><div id="demo" class="yui3-skin-sam"> <!-- You need this skin class --> |
|
|
446 |
|
|
|
447 |
<div id="volume_control" class="volume-hide"> |
|
|
448 |
<label for="volume">volume</label><input type="text" size="3" maxlength="3" name="volume" id="volume" value="50"> |
|
|
449 |
<button type="button" id="volume_icon" class="level_2" title="Open volume slider"><p>Open</p></button> |
|
|
450 |
<span id="volume_slider"> |
|
|
451 |
<span class="yui3-slider-rail"> |
|
|
452 |
<span class="yui3-slider-thumb"><img src="../assets/slider/images/sprite.png" height="384" width="31"></span> |
|
|
453 |
</span> |
|
|
454 |
</span> |
|
|
455 |
<label for="mute"><input type="checkbox" id="mute"> mute</label> |
|
|
456 |
</div> |
|
|
457 |
|
|
|
458 |
<div class="demo-content"> |
|
|
459 |
<p>Nulla facilisi. In vel sem. Morbi id urna in diam dignissim feugiat. Proin molestie tortor eu velit. Aliquam erat volutpat. Nullam ultrices, diam tempus vulputate egestas, eros pede varius leo, sed imperdiet lectus est ornare odio.</p> |
|
|
460 |
<p>Phasellus wisi purus, interdum vitae, rutrum accumsan, viverra in, velit. Sed enim risus, congue non, tristique in, commodo eu, metus. Aenean tortor mi, imperdiet id, gravida eu, posuere eu, felis.</p> |
|
|
461 |
</div> |
|
|
462 |
</div></pre> |
|
|
463 |
|
|
|
464 |
|
|
|
465 |
<h4 id="full_js">JavaScript</h4> |
|
|
466 |
<pre class="code prettyprint">YUI().use("slider", function (Y) { |
|
|
467 |
|
|
|
468 |
var control = Y.one('#volume_control'), |
|
|
469 |
volInput = Y.one('#volume'), |
|
|
470 |
icon = Y.one('#volume_icon'), |
|
|
471 |
mute = Y.one('#mute'), |
|
|
472 |
open = false, |
|
|
473 |
level = 2, |
|
|
474 |
beforeMute = 0, |
|
|
475 |
wait, |
|
|
476 |
volume; |
|
|
477 |
|
|
|
478 |
Y.one("#volume_slider").setStyle('left',icon.get('offsetLeft')+'px'); |
|
|
479 |
|
|
|
480 |
volume = new Y.Slider({ |
|
|
481 |
axis : 'y', |
|
|
482 |
min : 100, |
|
|
483 |
max : 0, |
|
|
484 |
value : 50, |
|
|
485 |
length: '105px' |
|
|
486 |
}); |
|
|
487 |
|
|
|
488 |
volume.renderRail = function () { |
|
|
489 |
return Y.one( "#volume_slider span.yui3-slider-rail" ); |
|
|
490 |
}; |
|
|
491 |
volume.renderThumb = function () { |
|
|
492 |
return this.rail.one( "span.yui3-slider-thumb" ); |
|
|
493 |
}; |
|
|
494 |
|
|
|
495 |
volume.render( "#volume_slider" ); |
|
|
496 |
|
|
|
497 |
// Initialize event listeners |
|
|
498 |
volume.after('valueChange', updateInput); |
|
|
499 |
volume.after('valueChange', updateIcon); |
|
|
500 |
|
|
|
501 |
mute.on('click', muteVolume); |
|
|
502 |
|
|
|
503 |
volInput.on({ |
|
|
504 |
keydown : handleInput, |
|
|
505 |
keyup : updateVolume |
|
|
506 |
}); |
|
|
507 |
|
|
|
508 |
icon.on('click', showHideSlider); |
|
|
509 |
|
|
|
510 |
Y.one( 'doc' ).on('click', handleDocumentClick ); |
|
|
511 |
|
|
|
512 |
// Support functions |
|
|
513 |
function updateInput(e) { |
|
|
514 |
if (e.src !== 'KEY') { |
|
|
515 |
volInput.set('value',e.newVal); |
|
|
516 |
} |
|
|
517 |
} |
|
|
518 |
|
|
|
519 |
function updateIcon(e) { |
|
|
520 |
var newLevel = e.newVal && Math.ceil(e.newVal / 34); |
|
|
521 |
|
|
|
522 |
if (level !== newLevel) { |
|
|
523 |
icon.replaceClass('level_'+level, 'level_'+newLevel); |
|
|
524 |
level = newLevel; |
|
|
525 |
} |
|
|
526 |
} |
|
|
527 |
|
|
|
528 |
function muteVolume(e) { |
|
|
529 |
var disabled = !volume.get('disabled'); |
|
|
530 |
volume.set('disabled', disabled); |
|
|
531 |
|
|
|
532 |
if (disabled) { |
|
|
533 |
beforeMute = volume.getValue(); |
|
|
534 |
volume.setValue(0); |
|
|
535 |
volInput.set('disabled','disabled'); |
|
|
536 |
} else { |
|
|
537 |
volume.setValue(beforeMute); |
|
|
538 |
volInput.set('disabled',''); |
|
|
539 |
} |
|
|
540 |
} |
|
|
541 |
|
|
|
542 |
function handleInput(e) { |
|
|
543 |
// Allow only numbers and various other control keys |
|
|
544 |
if (e.keyCode > 57) { |
|
|
545 |
e.halt(); |
|
|
546 |
} |
|
|
547 |
} |
|
|
548 |
|
|
|
549 |
function updateVolume(e) { |
|
|
550 |
// delay input processing to give the user time to type |
|
|
551 |
if (wait) { |
|
|
552 |
wait.cancel(); |
|
|
553 |
} |
|
|
554 |
|
|
|
555 |
wait = Y.later(400, null, function () { |
|
|
556 |
var value = parseInt(volInput.get('value'),10) || 0; |
|
|
557 |
|
|
|
558 |
if (value > 100) { |
|
|
559 |
volInput.set('value', 100); |
|
|
560 |
value = 100 |
|
|
561 |
} |
|
|
562 |
|
|
|
563 |
volume.setValue( value ); |
|
|
564 |
}); |
|
|
565 |
} |
|
|
566 |
|
|
|
567 |
function showHideSlider(e) { |
|
|
568 |
control.toggleClass('volume-hide'); |
|
|
569 |
open = !open; |
|
|
570 |
|
|
|
571 |
if (e) { |
|
|
572 |
e.preventDefault(); |
|
|
573 |
} |
|
|
574 |
} |
|
|
575 |
|
|
|
576 |
function handleDocumentClick(e) { |
|
|
577 |
if (open && !icon.contains(e.target) && |
|
|
578 |
!volume.get('boundingBox').contains(e.target)) { |
|
|
579 |
showHideSlider(); |
|
|
580 |
} |
|
|
581 |
} |
|
|
582 |
|
|
|
583 |
});</pre> |
|
|
584 |
|
|
|
585 |
|
|
|
586 |
<h4 id="full_css">CSS</h4> |
|
|
587 |
<pre class="code prettyprint"><style scoped> |
|
|
588 |
#demo { |
|
|
589 |
background: #fff; |
|
|
590 |
border: 1px solid #999; |
|
|
591 |
color: #000; |
|
|
592 |
} |
|
|
593 |
|
|
|
594 |
#demo .demo-content { |
|
|
595 |
padding: 1ex 1em; |
|
|
596 |
} |
|
|
597 |
|
|
|
598 |
#volume_control { |
|
|
599 |
height: 25px; |
|
|
600 |
line-height: 25px; |
|
|
601 |
background: url(../assets/slider/images/sprite.png) repeat-x 0 0; |
|
|
602 |
position: relative; |
|
|
603 |
} |
|
|
604 |
|
|
|
605 |
#volume_control label { |
|
|
606 |
font-weight: bold; |
|
|
607 |
margin: 0 1ex 0 1em; |
|
|
608 |
zoom: 1; |
|
|
609 |
} |
|
|
610 |
|
|
|
611 |
#volume { |
|
|
612 |
border: 1px inset #999; |
|
|
613 |
height: 16px; |
|
|
614 |
margin-top: 3px; |
|
|
615 |
padding: 0 3px; |
|
|
616 |
text-align: right; |
|
|
617 |
width: 2em; |
|
|
618 |
} |
|
|
619 |
|
|
|
620 |
/* Support open/close action for the slider */ |
|
|
621 |
#demo .volume-hide #volume_slider { |
|
|
622 |
display: none; |
|
|
623 |
} |
|
|
624 |
|
|
|
625 |
#volume_icon { |
|
|
626 |
background: url(../assets/slider/images/sprite.png) no-repeat 0 -25px; |
|
|
627 |
border: 0 none; |
|
|
628 |
height: 25px; |
|
|
629 |
vertical-align: top; |
|
|
630 |
width: 31px; |
|
|
631 |
} |
|
|
632 |
|
|
|
633 |
/* move the button text offscreen left */ |
|
|
634 |
#volume_icon p { |
|
|
635 |
text-indent: -9999px; |
|
|
636 |
} |
|
|
637 |
|
|
|
638 |
/* |
|
|
639 |
* adjust the speaker icon sprite in accordance with volume level and |
|
|
640 |
* active state |
|
|
641 |
*/ |
|
|
642 |
#demo .volume-hide .level_0 { background-position: 0 -25px; } |
|
|
643 |
#demo .volume-hide .level_1 { background-position: 0 -50px; } |
|
|
644 |
#demo .volume-hide .level_2 { background-position: 0 -75px; } |
|
|
645 |
#demo .volume-hide .level_3 { background-position: 0 -100px; } |
|
|
646 |
|
|
|
647 |
#demo .level_0, |
|
|
648 |
#demo .level_0:hover { |
|
|
649 |
background-position: 0 -125px; |
|
|
650 |
} |
|
|
651 |
#demo .level_1, |
|
|
652 |
#demo .level_1:hover { |
|
|
653 |
background-position: 0 -150px; |
|
|
654 |
} |
|
|
655 |
#demo .level_2, |
|
|
656 |
#demo .level_2:hover { |
|
|
657 |
background-position: 0 -175px; |
|
|
658 |
} |
|
|
659 |
#demo .level_3, |
|
|
660 |
#demo .level_3:hover { |
|
|
661 |
background-position: 0 -200px; |
|
|
662 |
} |
|
|
663 |
|
|
|
664 |
#volume_slider { |
|
|
665 |
position: absolute; |
|
|
666 |
top: 25px; |
|
|
667 |
} |
|
|
668 |
|
|
|
669 |
/* rail image on the containing box rather than the rail element */ |
|
|
670 |
#volume_slider { |
|
|
671 |
background: url(../assets/slider/images/sprite.png) no-repeat 0 -259px; |
|
|
672 |
height: 116px; |
|
|
673 |
width: 31px; |
|
|
674 |
padding-top: 9px; |
|
|
675 |
cursor: arrow; |
|
|
676 |
} |
|
|
677 |
|
|
|
678 |
#volume_slider .yui3-slider-rail { |
|
|
679 |
background-image: none; |
|
|
680 |
width: 31px; |
|
|
681 |
} |
|
|
682 |
|
|
|
683 |
#volume_slider .yui3-slider-thumb { |
|
|
684 |
height: 17px; |
|
|
685 |
width: 31px; |
|
|
686 |
overflow: hidden; |
|
|
687 |
} |
|
|
688 |
|
|
|
689 |
#volume_slider .yui3-slider-thumb img { |
|
|
690 |
position: absolute; |
|
|
691 |
top: -225px; |
|
|
692 |
} |
|
|
693 |
|
|
|
694 |
#volume_slider .yui3-slider-disabled .yui3-slider-thumb img { |
|
|
695 |
top: -242px; |
|
|
696 |
} |
|
|
697 |
|
|
|
698 |
#demo_sprite { |
|
|
699 |
display: inline; |
|
|
700 |
float: left; |
|
|
701 |
margin-right: 1em; |
|
|
702 |
} |
|
|
703 |
</style></pre> |
|
|
704 |
|
|
|
705 |
</div> |
|
|
706 |
</div> |
|
|
707 |
</div> |
|
|
708 |
|
|
|
709 |
<div class="yui3-u-1-4"> |
|
|
710 |
<div class="sidebar"> |
|
|
711 |
|
|
|
712 |
|
|
|
713 |
|
|
|
714 |
<div class="sidebox"> |
|
|
715 |
<div class="hd"> |
|
|
716 |
<h2 class="no-toc">Examples</h2> |
|
|
717 |
</div> |
|
|
718 |
|
|
|
719 |
<div class="bd"> |
|
|
720 |
<ul class="examples"> |
|
|
721 |
|
|
|
722 |
|
|
|
723 |
<li data-description="The basics of setting up a horizontal and vertical Slider"> |
|
|
724 |
<a href="slider-basic.html">Basic Sliders</a> |
|
|
725 |
</li> |
|
|
726 |
|
|
|
727 |
|
|
|
728 |
|
|
|
729 |
<li data-description="Creating a vertical Slider from existing markup"> |
|
|
730 |
<a href="slider-from-markup.html">Creating a Slider from Existing Markup</a> |
|
|
731 |
</li> |
|
|
732 |
|
|
|
733 |
|
|
|
734 |
|
|
|
735 |
<li data-description="Specifying an alternate skin for a Slider instance"> |
|
|
736 |
<a href="slider-skin.html">Alternate Skins</a> |
|
|
737 |
</li> |
|
|
738 |
|
|
|
739 |
|
|
|
740 |
|
|
|
741 |
|
|
|
742 |
|
|
|
743 |
|
|
|
744 |
|
|
|
745 |
|
|
|
746 |
|
|
|
747 |
|
|
|
748 |
|
|
|
749 |
|
|
|
750 |
|
|
|
751 |
|
|
|
752 |
</ul> |
|
|
753 |
</div> |
|
|
754 |
</div> |
|
|
755 |
|
|
|
756 |
|
|
|
757 |
|
|
|
758 |
<div class="sidebox"> |
|
|
759 |
<div class="hd"> |
|
|
760 |
<h2 class="no-toc">Examples That Use This Component</h2> |
|
|
761 |
</div> |
|
|
762 |
|
|
|
763 |
<div class="bd"> |
|
|
764 |
<ul class="examples"> |
|
|
765 |
|
|
|
766 |
|
|
|
767 |
|
|
|
768 |
|
|
|
769 |
|
|
|
770 |
|
|
|
771 |
|
|
|
772 |
|
|
|
773 |
<li data-description="Use three sliders to control RGB values and update Hex and HSL strings."> |
|
|
774 |
<a href="../color/rgb-slider.html">RGB Slider</a> |
|
|
775 |
</li> |
|
|
776 |
|
|
|
777 |
|
|
|
778 |
|
|
|
779 |
<li data-description="Use the HSL color picker to select a new color. Then chose the color type you like best."> |
|
|
780 |
<a href="../color/hsl-picker.html">HSL Color Picker</a> |
|
|
781 |
</li> |
|
|
782 |
|
|
|
783 |
|
|
|
784 |
|
|
|
785 |
<li data-description="Use the HSL color picker to create harmony colors."> |
|
|
786 |
<a href="../color/hsl-harmony.html">HSL Harmony</a> |
|
|
787 |
</li> |
|
|
788 |
|
|
|
789 |
|
|
|
790 |
|
|
|
791 |
<li data-description="Shows how to use Overlay's constrainment support, to limit the XY value which can be set for an Overlay."> |
|
|
792 |
<a href="../overlay/overlay-constrain.html">Constrain Support</a> |
|
|
793 |
</li> |
|
|
794 |
|
|
|
795 |
|
|
|
796 |
|
|
|
797 |
<li data-description="Use StyleSheet to adjust the CSS rules applying a page theme from user input"> |
|
|
798 |
<a href="../stylesheet/stylesheet-theme.html">Adjusting a Page Theme on the Fly</a> |
|
|
799 |
</li> |
|
|
800 |
|
|
|
801 |
|
|
|
802 |
|
|
|
803 |
<li data-description="Example Photo Browser application."> |
|
|
804 |
<a href="../dd/photo-browser.html">Photo Browser</a> |
|
|
805 |
</li> |
|
|
806 |
|
|
|
807 |
|
|
|
808 |
</ul> |
|
|
809 |
</div> |
|
|
810 |
</div> |
|
|
811 |
|
|
|
812 |
</div> |
|
|
813 |
</div> |
|
|
814 |
</div> |
|
|
815 |
</div> |
|
|
816 |
|
|
|
817 |
<script src="../assets/vendor/prettify/prettify-min.js"></script> |
|
|
818 |
<script>prettyPrint();</script> |
|
|
819 |
|
|
|
820 |
<script> |
|
|
821 |
YUI.Env.Tests = { |
|
|
822 |
examples: [], |
|
|
823 |
project: '../assets', |
|
|
824 |
assets: '../assets/slider', |
|
|
825 |
name: 'slider-from-markup', |
|
|
826 |
title: 'Creating a Slider from Existing Markup', |
|
|
827 |
newWindow: '', |
|
|
828 |
auto: false |
|
|
829 |
}; |
|
|
830 |
YUI.Env.Tests.examples.push('slider-basic'); |
|
|
831 |
YUI.Env.Tests.examples.push('slider-from-markup'); |
|
|
832 |
YUI.Env.Tests.examples.push('slider-skin'); |
|
|
833 |
YUI.Env.Tests.examples.push('rgb-slider'); |
|
|
834 |
YUI.Env.Tests.examples.push('hsl-picker'); |
|
|
835 |
YUI.Env.Tests.examples.push('hsl-harmony'); |
|
|
836 |
YUI.Env.Tests.examples.push('overlay-constrain'); |
|
|
837 |
YUI.Env.Tests.examples.push('stylesheet-theme'); |
|
|
838 |
YUI.Env.Tests.examples.push('photo-browser'); |
|
|
839 |
|
|
|
840 |
</script> |
|
|
841 |
<script src="../assets/yui/test-runner.js"></script> |
|
|
842 |
|
|
|
843 |
|
|
|
844 |
|
|
|
845 |
</body> |
|
|
846 |
</html> |