example_vert.html revision e7f09302a241d9a83d02b634075ee37382fc48f9
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
<html>
<head>
<title>Slider Image Test Vert.</title>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?3.0.0/build/cssreset/reset-min.css&3.0.0/build/cssfonts/fonts-min.css">
</head>
<!-- YUI Seed -->
<script>
YUI().use('node', function (Y) {
Y.on('change', function(e){
Y.log(e.target.get('value'));
var railBkg = 'url(/images/' + e.target.get('value') + ')';
Y.one('.yui-slider-rail').setStyle('backgroundImage', railBkg);
Y.one('.endcap_top').setStyle('backgroundImage', railBkg);
Y.one('.endcap_bottom').setStyle('backgroundImage', railBkg);
if(railBkg.indexOf('_black') > -1){
Y.one('body').setStyle('backgroundColor', '#000000');
}else{
Y.one('body').setStyle('backgroundColor', '#ffffff');
}
}, '#select_rail');
Y.on('change', function(e){
Y.log(e.target.get('value'));
var thumbBkg = 'url(/images/' + e.target.get('value') + ')';
Y.one('.thumb').setStyle('backgroundImage', thumbBkg);
Y.one('.thumb_shadow').setStyle('backgroundImage', thumbBkg);
if(thumbBkg.indexOf('_black') > -1){
Y.one('body').setStyle('backgroundColor', '#000000');
}else{
Y.one('body').setStyle('backgroundColor', '#ffffff');
}
}, '#select_thumb');
});
</script>
body { background-color:#000000; height:400; margin:0; padding:1px;}
#slider_content div {/*border:1px solid #000000;*/}
#slider {margin:5em;}
.yui-slider-rail,
.endcap_top,
.endcap_bottom { background:url(/images/rail_00_v_test.png);}
/*Swap in other rail images with no other changes to demonstrate mix & match*/
.yui-slider-rail { position:relative; width:25px; height:223px;} /*Width always 25 to match the sprite. Height = whatever*/
.endcap_top,
.endcap_bottom { position:absolute; width:25px; height:25px;} /*25px square to match the sprite*/
.endcap_top { left:0; top:-25px; background-position:-25px 0px;}
.endcap_bottom { top:100%; left:0; background-position:-25px -25px;}
.thumb_container { position:absolute; bottom:50%; left:-12px; width:50px; height:50px;} /*50px square matches sprite*/
/* left:-12px because the thumb object is 50x50,
The horiz center of the thumb is at 25
The horiz center of the rail is at 13
To get them aligned, the thumb must be at 13 - 25 = -12px
*/
.thumb, .thumb_shadow { position:absolute; top:0; left:0; width:50px; height:50px; background:url(/images/thumb_00_test.png);}
/*swap in other thumb images with no other changes to demonstrates mix & match*/
.thumb {background-position: -50px 0;}
.thumb_shadow {background-position: -50px -50px; opacity:0.15;}
/*the slight offset of the shadow (away from the thumb) is done in the sprite not in css
Since the shadow is better controlled by the visual designer
and can be specific to the thumb. This also allows easier mix and match.
*/
.controls {padding:3em; background-color:#dddddd;}
.controls p {margin-bottom:1em;}
</style>
<body>
<div class="doc">
<div id="slider"><!-- boundingBox -->
<div id="slider_content"><!-- contentBox -->
<div class="yui-slider-rail">
<div class="endcap_top"></div>
<div class="endcap_bottom"></div>
<div class="thumb_container">
<div class="thumb_shadow"></div>
<div class="thumb"></div>
</div>
</div>
</div>
</div>
</div>
<div class="controls">
<p>
Select Rail Image <select id="select_rail">
<option value="" selected="selected"></option>
<option value="rail_black_04_v_dots_in_rail_lines.png">rail_black_04_v_dots_in_rail_lines.png</option>
<option value="rail_black_05_v_embossed_groove_dots.png">rail_black_05_v_embossed_groove_dots.png</option>
<option value="rail_black_06_v_embossed_groove_lines.png">rail_black_06_v_embossed_groove_lines.png</option>
<option value="rail_white_04_v_dots_in_rail_lines.png">rail_white_04_v_dots_in_rail_lines.png</option>
<option value="rail_white_05_v_embossed_groove_dots.png">rail_white_05_v_embossed_groove_dots.png</option>
<option value="rail_white_06_v_embossed_groove_lines.png">rail_white_06_v_embossed_groove_lines.png</option>
<!--
<option value="rail_black_00_h_3px_thick.png">rail_black_00_h_3px_thick.png</option>
<option value="rail_black_00_h_5px_thick.png">rail_black_00_h_5px_thick.png</option>
<option value="rail_black_00_v_3px_thick.png">rail_black_00_v_3px_thick.png</option>
<option value="rail_black_00_v_5px_thick.png">rail_black_00_v_5px_thick.png</option>
<option value="rail_black_03_h_lines_above.png">rail_black_03_h_lines_above.png</option>
<option value="rail_black_03_v_lines_left.png">rail_black_03_v_lines_left.png</option>
<option value="rail_black_04_h_dots_in_rail_lines.png">rail_black_04_h_dots_in_rail_lines.png</option>
<option value="rail_black_04_v_dots_in_rail_lines.png">rail_black_04_v_dots_in_rail_lines.png</option>
<option value="rail_black_05_h_embossed_groove_dots.png">rail_black_05_h_embossed_groove_dots.png</option>
<option value="rail_black_05_v_embossed_groove_dots.png">rail_black_05_v_embossed_groove_dots.png</option>
<option value="rail_black_06_h_embossed_groove_lines.png">rail_black_06_h_embossed_groove_lines.png</option>
<option value="rail_black_06_v_embossed_groove_lines.png">rail_black_06_v_embossed_groove_lines.png</option>
<option value="rail_black_07_h_lines_both_sides.png">rail_black_07_h_lines_both_sides.png</option>
<option value="rail_black_07_v_lines_both_sides.png">rail_black_07_v_lines_both_sides.png</option>
<option value="rail_white_00_h_3px_thick.png">rail_white_00_h_3px_thick.png</option>
<option value="rail_white_00_v_3px_thick.png">rail_white_00_v_3px_thick.png</option>
<option value="rail_white_01_h_5px_thick.png">rail_white_01_h_5px_thick.png</option>
<option value="rail_white_01_v_5px_thick.png">rail_white_01_v_5px_thick.png</option>
<option value="rail_white_03_h_lines_above.png">rail_white_03_h_lines_above.png</option>
<option value="rail_white_03_v_lines_left.png">rail_white_03_v_lines_left.png</option>
<option value="rail_white_04_h_dots_in_rail_lines.png">rail_white_04_h_dots_in_rail_lines.png</option>
<option value="rail_white_04_v_dots_in_rail_lines.png">rail_white_04_v_dots_in_rail_lines.png</option>
<option value="rail_white_05_h_embossed_groove_dots.png">rail_white_05_h_embossed_groove_dots.png</option>
<option value="rail_white_05_v_embossed_groove_dots.png">rail_white_05_v_embossed_groove_dots.png</option>
<option value="rail_white_06_h_embossed_groove_lines.png">rail_white_06_h_embossed_groove_lines.png</option>
<option value="rail_white_06_v_embossed_groove_lines.png">rail_white_06_v_embossed_groove_lines.png</option>
<option value="rail_white_07_h_lines_both_sides.png">rail_white_07_h_lines_both_sides.png</option>
<option value="rail_white_07_v_lines_both_sides.png">rail_white_07_v_lines_both_sides.png</option>
<option value="thumb_black_00_rect_point.png">thumb_black_00_rect_point.png</option>
<option value="thumb_black_01_oblong_wide_grip.png">thumb_black_01_oblong_wide_grip.png</option>
<option value="thumb_black_02_oblong_chiseled_with_grip.png">thumb_black_02_oblong_chiseled_with_grip.png</option>
<option value="thumb_black_03_bump_line.png">thumb_black_03_bump_line.png</option>
<option value="thumb_black_04_recessed_w_dark_ring.png">thumb_black_04_recessed_w_dark_ring.png</option>
<option value="thumb_black_05_ridge_grip_circle.png">thumb_black_05_ridge_grip_circle.png</option>
<option value="thumb_black_06_oval_groove.png">thumb_black_06_oval_groove.png</option>
<option value="thumb_black_07_square_groove.png">thumb_black_07_square_groove.png</option>
<option value="thumb_white_00_rect_pointer.png">thumb_white_00_rect_pointer.png</option>
<option value="thumb_white_01_oblong_wide_grip.png">thumb_white_01_oblong_wide_grip.png</option>
<option value="thumb_white_02_oblong_chiseled_with_grip.png">thumb_white_02_oblong_chiseled_with_grip.png</option>
<option value="thumb_white_03_bump_line.png">thumb_white_03_bump_line.png</option>
<option value="thumb_white_04_recessed_w_dark_ring.png">thumb_white_04_recessed_w_dark_ring.png</option>
<option value="thumb_white_05_ridge_grip_circle.png">thumb_white_05_ridge_grip_circle.png</option>
<option value="thumb_white_06_oval_groove.png">thumb_white_06_oval_groove.png</option>
<option value="thumb_white_07_square_groove.png">thumb_white_07_square_groove.png</option>
-->
</select>
</p>
Select Thumb Image<select id="select_thumb">
<option value="" selected="selected"></option>
<option value="thumb_black_02_oblong_chiseled_with_grip.png">thumb_black_02_oblong_chiseled_with_grip.png</option>
<option value="thumb_black_04_recessed_w_dark_ring.png">thumb_black_04_recessed_w_dark_ring.png</option>
<option value="thumb_white_02_oblong_chiseled_with_grip.png">thumb_white_02_oblong_chiseled_with_grip.png</option>
<option value="thumb_white_04_recessed_w_dark_ring.png">thumb_white_04_recessed_w_dark_ring.png</option>
</select>
</div>
</body>
</html>