example_horz.html revision e7f09302a241d9a83d02b634075ee37382fc48f9
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
<html>
<head>
<title>Slider Image Test</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){
var railBkg = 'url(/images/' + e.target.get('value') + ')';
Y.one('.yui-slider-rail').setStyle('backgroundImage', railBkg);
Y.one('.endcap_left').setStyle('backgroundImage', railBkg);
Y.one('.endcap_right').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){
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:400px;
margin:0;
padding:1px;
}
#slider_content div {
/*border:1px solid #000000;*/
}
#slider {
margin:5em;
}
.yui-slider-rail,
.endcap_left,
.endcap_right {
background:url(/images/rail_00_h_test.png);
}
/*Swap other rail images with no other changes to demonstrate mix & match*/
.yui-slider-rail {
position:relative;
width:223px;
height:25px;
}
/*Height always 25 to match the sprite. Width = whatever*/
.endcap_left,
.endcap_right {
position:absolute;
top:0;
width:25px;
height:25px;
}
/*25px square to match the sprite*/
.endcap_left {
left:-25px;
background-position:0px -25px;
}
.endcap_right {
right:-25px;
background-position:-25px -25px;
}
.thumb_container {
position:absolute;
top:-12px;
left:123px;
width:50px;
height:50px;
}
/*50px square matches sprite*/
/* top:-12px because the thumb object is 50x50,
The vert center of the thumb is at 25
The vert 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_shadow {
background-position: 0px -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 id="slider"><!-- boundingBox -->
<div id="slider_content"><!-- contentBox -->
<div class="yui-slider-rail">
<div class="endcap_left"></div>
<div class="endcap_right"></div>
<div class="thumb_container">
<div class="thumb_shadow"></div>
<div class="thumb"></div>
</div>
</div>
</div>
</div>
<div class="controls">
<p>
Select Rail Image <select id="select_rail">
<!-- only horizontal rails-->
<option value="" selected="selected"></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_05_h_embossed_groove_dots.png">rail_black_05_h_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_white_04_h_dots_in_rail_lines.png">rail_white_04_h_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_06_h_embossed_groove_lines.png">rail_white_06_h_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>