JavaScript DHTML/YUI Library/Slider
Содержание
Basic Vertical Slider
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Basic Vertical Slider</title> <style type="text/css"> /*margin and padding on body element
can introduce errors in determining element position and are not recommended; we turn them off as a foundation for YUI CSS treatments. */
body {
margin:0; padding:0;
} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/slider/assets/skins/sam/slider.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/animation/animation-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/dragdrop/dragdrop-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/slider/slider-min.js"></script>
</head> <body class=" yui-skin-sam">
Basic Vertical Slider
This example demonstrates a simple vertical implementation of the <a href="http://developer.yahoo.ru/yui/slider/">YUI Slider Control</a>. Some characteristics of this implementation include the following:
- The slider range is 200 pixels.
- Custom logic is applied to convert the current pixel value (from 0 to 200) to a "real" value. In this case the "real" range is 0 to 300.
- The value is set to 30 after the control is initialized
- Once the slider has focus, the up and down keys will move the thumb 20 pixels (changing the "real" value by 30).
- When the slider value changes, the UI is updated. The title attribute of the slider background is updated with the current value, and the text field is updated with the current "real" value. These techniques can help inform assistive technologies (like screen reader software) about the slider"s current state.
Pixel value: 0
Converted value: <input autocomplete="off" id="slider-converted-value" type="text" value="0" size="4" maxlength="4" />
<button id="putval">Change slider value to 100 (converted value 150)</button> <button id="getval">Write current value to the Logger</button> <script type="text/javascript"> (function() {
var Event = YAHOO.util.Event,
Dom = YAHOO.util.Dom,
lang = YAHOO.lang,
slider,
bg="slider-bg", thumb="slider-thumb",
valuearea="slider-value", textfield="slider-converted-value"
// The slider can move 0 pixels up
var topConstraint = 0;
// The slider can move 200 pixels down
var bottomConstraint = 200;
// Custom scale factor for converting the pixel offset into a real value
var scaleFactor = 1.5;
// The amount the slider moves when the value is changed with the arrow
// keys
var keyIncrement = 20;
Event.onDOMReady(function() {
slider = YAHOO.widget.Slider.getVertSlider(bg,
thumb, topConstraint, bottomConstraint);
slider.getRealValue = function() {
return Math.round(this.getValue() * scaleFactor);
}
slider.subscribe("change", function(offsetFromStart) {
var valnode = Dom.get(valuearea);
var fld = Dom.get(textfield);
// Display the pixel value of the control
valnode.innerHTML = offsetFromStart;
// use the scale factor to convert the pixel offset into a real
// value
var actualValue = slider.getRealValue();
// update the text box with the actual value
fld.value = actualValue;
// Update the title attribute on the background. This helps assistive
// technology to communicate the state change
Dom.get(bg).title = "slider value = " + actualValue;
});
slider.subscribe("slideStart", function() {
YAHOO.log("slideStart fired", "warn");
});
slider.subscribe("slideEnd", function() {
YAHOO.log("slideEnd fired", "warn");
});
// set an initial value
slider.setValue(20);
// Listen for keystrokes on the form field that displays the
// control"s value. While not provided by default, having a
// form field with the slider is a good way to help keep your
// application accessible.
Event.on(textfield, "keydown", function(e) {
// set the value when the "return" key is detected
if (Event.getCharCode(e) === 13) {
var v = parseFloat(this.value, 10);
v = (lang.isNumber(v)) ? v : 0;
// convert the real value into a pixel offset
slider.setValue(Math.round(v/scaleFactor));
}
});
// Use setValue to reset the value to white:
Event.on("putval", "click", function(e) {
slider.setValue(100, false); //false here means to animate if possible
});
// Use the "get" method to get the current offset from the slider"s start
// position in pixels. By applying the scale factor, we can translate this
// into a "real value
Event.on("getval", "click", function(e) {
YAHOO.log("Current value: " + slider.getValue() + "\n" +
"Converted value: " + slider.getRealValue(), "info", "example");
});
});
})(); </script>
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
Bottom to top Vertical Slider
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Bottom to top Vertical Slider</title> <style type="text/css"> /*margin and padding on body element
can introduce errors in determining element position and are not recommended; we turn them off as a foundation for YUI CSS treatments. */
body {
margin:0; padding:0;
} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/slider/assets/skins/sam/slider.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/animation/animation-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/dragdrop/dragdrop-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/slider/slider-min.js"></script>
<style type="text/css">
#slide_bg {
position: relative;
background: url(yui_2.7.0b-assets/slider-assets/bg-v.gif) 12px 0 no-repeat;
height: 228px;
width: 48px;
}
#slide_thumb {
cursor: default;
position: absolute;
top: 200px;
}
</style>
</head> <body class=" yui-skin-sam">
Bottom to top Vertical Slider
This example demonstrates a vertical implementation of the <a href="http://developer.yahoo.ru/yui/slider/">YUI Slider Control</a>. Some characteristics of this implementation include the following:
- The slider range is 200 pixels.
- CSS is used to place the slide thumb at the bottom of the slider.
- Custom logic is added to the slider instance to convert the offset value to a "real" value calculated from a provided min/max range.
- The custom min value is set to 10; the max 110.
- Once the slider has focus, the up and down keys will move the thumb 20 pixels (changing the "real" value by 10).
- When the slider value changes, the pixel offset and calculated value are reported below the slider.
Pixel offset from start: 0
Calculated Value: 0
<script type="text/javascript"> YAHOO.util.Event.onDOMReady(function () {
// the slider can move up 200 pixels
var upLimit = 200;
// and down 0 pixels
var downLimit = 0;
// Create the Slider instance
var slider = YAHOO.widget.Slider.getVertSlider(
"slide_bg", "slide_thumb", upLimit, downLimit);
// Add a little functionality to the instance
YAHOO.lang.augmentObject(slider, {
// A custom value range for the slider
minValue : 10,
maxValue : 110,
// A method to retrieve the calculated value, per the value range
getCalculatedValue : function () {
// invert the offset value so "real" values increase as the
// slider moves up
var offset = -1 * this.getValue();
// Convert the offset to a value in our configured range
var conversionFactor =
(this.maxValue - this.minValue) /
(this.thumb.topConstraint + this.thumb.bottomConstraint);
return Math.round(offset * conversionFactor) + this.minValue;
}
});
// display the native offset and the calculated while sliding
var offset_span = YAHOO.util.Dom.get("d_offset");
var calc_span = YAHOO.util.Dom.get("d_val");
slider.subscribe("change", function (offsetFromStart) {
offset_span.innerHTML = offsetFromStart;
calc_span.innerHTML = this.getCalculatedValue();
});
}); </script>
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
Dual-thumb Slider with range highlight
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Dual-thumb Slider with range highlight</title> <style type="text/css"> /*margin and padding on body element
can introduce errors in determining element position and are not recommended; we turn them off as a foundation for YUI CSS treatments. */
body {
margin:0; padding:0;
} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/slider/assets/skins/sam/slider.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/dragdrop/dragdrop-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/slider/slider-min.js"></script>
<style type="text/css">
#demo_bg {
position: relative;
background: url(yui_2.7.0b-assets/slider-assets/dual_thumb_bg.gif) 0 5px no-repeat;
height: 28px;
width: 310px;
}
#demo_bg div {
position: absolute;
cursor: default;
top: 4px;
}
#demo_bg span {
position: absolute;
background: url(yui_2.7.0b-assets/slider-assets/dual_thumb_highlight.gif) 0 0 repeat-x;
top: 10px;
left: 12px;
height: 13px;
width: 288px;
}
#demo_bg .caution {
background-position: 0 -13px;
}
#demo_bg .boom,
#demo_bg .danger {
background-position: 0 -26px;
}
p .ok {
color: #3a3;
font-weight: bold;
text-transform: uppercase;
}
p .caution {
background: #ff3;
color: #770;
font-weight: bold;
font-style: italic;
padding: 0 1ex;
text-transform: uppercase;
}
p .danger {
color: #f33;
font-weight: bold;
text-decoration: blink;
text-transform: uppercase;
}
p .boom {
color: #fff;
background: #000;
padding: 0 1ex;
}
</style>
</head> <body class=" yui-skin-sam">
Dual-thumb Slider with range highlight
This example demonstrates a horizontal dual-thumb Slider with custom code to add a highlight to the bounded range. Some characteristics to note include the following:
- The thumbs are set on a slide bar with a 300 pixel range.
- The thumbs are configured with a 12 pixel tick size.
- Clicking on the background will animate the nearest thumb.
Range offsets: 0 - 300
Status: ok
<script type="text/javascript"> (function () {
YAHOO.namespace("example");
var Dom = YAHOO.util.Dom;
// Slider has a range of 300 pixels
var range = 300;
// Set up 12 pixel ticks
var tickSize = 12;
// Some arbitrary ranges to cue status changes
var caution_range = 150,
danger_range = 75,
boom_range = 13;
YAHOO.util.Event.onDOMReady(function () {
var reportSpan = Dom.get("demo_range");
var calculatedSpan = Dom.get("demo_value");
// Create the DualSlider
var slider = YAHOO.widget.Slider.getHorizDualSlider("demo_bg",
"demo_min_thumb", "demo_max_thumb",
range, tickSize);
// Decorate the DualSlider instance with some new properties and
// methods to maintain the highlight element
YAHOO.lang.augmentObject(slider, {
_status : "ok",
_highlight : Dom.get("demo_highlight"),
getStatus : function () { return this._status; },
updateHighlight : function () {
var delta = this.maxVal - this.minVal,
newStatus = "ok";
if (delta < boom_range) {
newStatus = "boom";
} else if (delta < danger_range) {
newStatus = "danger";
} else if (delta < caution_range) {
newStatus = "caution";
}
if (this._status !== newStatus) {
// Update the highlight class if status is changed
Dom.replaceClass(this._highlight,this._status,newStatus);
this._status = newStatus;
}
if (this.activeSlider === this.minSlider) {
// If the min thumb moved, move the highlight"s left edge
Dom.setStyle(this._highlight,"left", (this.minVal + 12) + "px");
}
// Adjust the width of the highlight to match inner boundary
Dom.setStyle(this._highlight,"width", Math.max(delta - 12,0) + "px");
}
},true);
// Attach the highlight method to the slider"s change event
slider.subscribe("change",slider.updateHighlight,slider,true);
// Create an event callback to update some display fields
var report = function () {
reportSpan.innerHTML = slider.minVal + " - " + slider.maxVal;
// Call our conversion function
calculatedSpan.innerHTML =
calculatedSpan.className = slider.getStatus();
};
// Subscribe to the slider"s change event to report the status.
slider.subscribe("change",report);
// Attach the slider to the YAHOO.example namespace for public probing
YAHOO.example.slider = slider;
});
})(); </script>
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
Horizontal Slider with Tick Marks
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Horizontal Slider with Tick Marks</title> <style type="text/css"> /*margin and padding on body element
can introduce errors in determining element position and are not recommended; we turn them off as a foundation for YUI CSS treatments. */
body {
margin:0; padding:0;
} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/slider/assets/skins/sam/slider.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/dragdrop/dragdrop-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/slider/slider-min.js"></script>
<style type="text/css">
- slider-bg {
background:url(yui_2.7.0b-assets/slider-assets/bg-fader.gif) 5px 0 no-repeat;
} </style>
</head> <body class=" yui-skin-sam">
Horizontal Slider with Tick Marks
This example uses the <a href="http://developer.yahoo.ru/yui/slider/">YUI Slider Control</a> to implement a basic horizontal slider with tick marks & that is, with predefined intervals at which the slider thumb will stop as it"s dragged. (By default, a slider thumb can be dragged one pixel at a time.)
Here are some important characteristics of this implementation:
- The slider range is 200 pixels.
- The slider movement is restricted to 20 pixel increments.
- Custom logic is applied to convert the current pixel value (from 0 to 200) to a "real" value. In this case the "real" range is 0 to 300.
- Once the slider has focus, the left and right keys will move the thumb 20 pixels (changing the "real" value by 30).
- When the slider value changes, the UI is updated. The title attribute of the slider background is updated with the current value, and the text field is updated with the current "real" value. These techniques can help inform assistive technologies (like screen reader software) about the slider"s current state.
Pixel value: 0
Converted value: <input autocomplete="off" id="slider-converted-value" type="text" value="0" size="4" maxlength="4" />
<button id="putval">Change slider value to 100 (converted value 150)</button> <button id="getval">Write current value to the Logger</button> <script type="text/javascript"> (function() {
var Event = YAHOO.util.Event,
Dom = YAHOO.util.Dom,
lang = YAHOO.lang,
slider,
bg="slider-bg", thumb="slider-thumb",
valuearea="slider-value", textfield="slider-converted-value"
// The slider can move 0 pixels up
var topConstraint = 0;
// The slider can move 200 pixels down
var bottomConstraint = 200;
// Custom scale factor for converting the pixel offset into a real value
var scaleFactor = 1.5;
// The amount the slider moves when the value is changed with the arrow
// keys
var keyIncrement = 20;
var tickSize = 20;
Event.onDOMReady(function() {
slider = YAHOO.widget.Slider.getHorizSlider(bg,
thumb, topConstraint, bottomConstraint, 20);
// Sliders with ticks can be animated without YAHOO.util.Anim
slider.animate = true;
slider.getRealValue = function() {
return Math.round(this.getValue() * scaleFactor);
}
slider.subscribe("change", function(offsetFromStart) {
var valnode = Dom.get(valuearea);
var fld = Dom.get(textfield);
// Display the pixel value of the control
valnode.innerHTML = offsetFromStart;
// use the scale factor to convert the pixel offset into a real
// value
var actualValue = slider.getRealValue();
// update the text box with the actual value
fld.value = actualValue;
// Update the title attribute on the background. This helps assistive
// technology to communicate the state change
Dom.get(bg).title = "slider value = " + actualValue;
});
slider.subscribe("slideStart", function() {
YAHOO.log("slideStart fired", "warn");
});
slider.subscribe("slideEnd", function() {
YAHOO.log("slideEnd fired", "warn");
});
// Listen for keystrokes on the form field that displays the
// control"s value. While not provided by default, having a
// form field with the slider is a good way to help keep your
// application accessible.
Event.on(textfield, "keydown", function(e) {
// set the value when the "return" key is detected
if (Event.getCharCode(e) === 13) {
var v = parseFloat(this.value, 10);
v = (lang.isNumber(v)) ? v : 0;
// convert the real value into a pixel offset
slider.setValue(Math.round(v/scaleFactor));
}
});
// Use setValue to reset the value to white:
Event.on("putval", "click", function(e) {
slider.setValue(100, false); //false here means to animate if possible
});
// Use the "get" method to get the current offset from the slider"s start
// position in pixels. By applying the scale factor, we can translate this
// into a "real value
Event.on("getval", "click", function(e) {
YAHOO.log("Current value: " + slider.getValue() + "\n" +
"Converted value: " + slider.getRealValue(), "info", "example");
});
});
})(); </script>
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
Horizontal Slider with two thumbs
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Horizontal Slider with two thumbs</title> <style type="text/css"> /*margin and padding on body element
can introduce errors in determining element position and are not recommended; we turn them off as a foundation for YUI CSS treatments. */
body {
margin:0; padding:0;
} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/slider/assets/skins/sam/slider.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/animation/animation-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/dragdrop/dragdrop-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/slider/slider-min.js"></script>
</head> <body class=" yui-skin-sam">
Horizontal Slider with two thumbs
This example demonstrates a simple horizontal dual-thumb Slider implementation. Some characteristics to note include the following:
- The thumbs are set on a slide bar with a 200 pixel range.
- A minimum distance is provided, preventing the thumbs from coming within 10 pixels of each other.
- Initial min and max values are supplied as 100 and 130 respectively.
- Clicking on the background will animate the nearest thumb.
- Min and Max value offsets are calculated from the center of the thumbs and must be accounted for conversion calculations.
Raw values: <label>Min: <input type="text" id="demo_from" size="3" maxlength="3" value=""></label> <label>Max: <input type="text" id="demo_to" size="3" maxlength="3" value=""></label> <button id="demo_btn">Update Slider</button>
Converted values:
<p id="demo_info"><script type="text/javascript"> (function () {
YAHOO.namespace("example");
var Dom = YAHOO.util.Dom;
// Slider has a range of 200 pixels
var range = 200;
// No ticks for this example
var tickSize = 0;
// We"ll set a minimum distance the thumbs can be from one another
var minThumbDistance = 10;
// Initial values for the thumbs
var initValues = [100,130];
// Conversion factor from 0-200 pixels to 100-1000
// Note 20 pixels are subtracted from the range to account for the
// thumb values calculated from their center point (10 pixels from
// the center of the left thumb + 10 pixels from the center of the
// right thumb)
var cf = 900/(range - 20);
// Set up a function to convert the min and max values into something useful
var convert = function (val) {
return Math.round(val * cf + 100);
};
// Slider set up is done when the DOM is ready
YAHOO.util.Event.onDOMReady(function () {
var demo_bg = Dom.get("demo_bg"),
info = Dom.get("demo_info"),
from = Dom.get("demo_from"),
to = Dom.get("demo_to");
// Create the DualSlider
var slider = YAHOO.widget.Slider.getHorizDualSlider(demo_bg,
"demo_min_thumb", "demo_max_thumb",
range, tickSize, initValues);
slider.minRange = minThumbDistance;
// Custom function to update the text fields, the converted value
// report and the slider"s title attribute
var updateUI = function () {
from.value = slider.minVal;
to.value = slider.maxVal;
// Update the converted values and the slider"s title.
// Account for the thumb width offsetting the value range by
// subtracting the thumb width from the max value.
var min = convert(slider.minVal),
max = convert(slider.maxVal - 20);
info.innerHTML = "MIN: " + min + "
" +
"MAX: " + max + "";
demo_bg.title = "Current range " + min + " - " + max;
};
// Subscribe to the dual thumb slider"s change and ready events to
// report the state.
slider.subscribe("ready", updateUI);
slider.subscribe("change", updateUI);
// Wire up the button to update the slider
YAHOO.util.Event.on("demo_btn","click",function () {
// Get the int values from the inputs
var min = Math.abs(parseInt(from.value,10)|0),
max = Math.abs(parseInt(to.value,10)|0);
if (min > max) {
var hold = min;
min = max;
max = hold;
}
// Verify the values are in range
min = Math.min(min,range - 30);
max = Math.max(Math.min(max,range),min + 20 + minThumbDistance);
// Set the new values on the slider
slider.setValues(min,max);
});
// Attach the slider to the YAHOO.example namespace for public probing
YAHOO.example.slider = slider;
});
})(); </script>
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
RBG Slider Control
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>RBG Slider Control</title> <style type="text/css"> /*margin and padding on body element
can introduce errors in determining element position and are not recommended; we turn them off as a foundation for YUI CSS treatments. */
body {
margin:0; padding:0;
} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/slider/assets/skins/sam/slider.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/animation/animation-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/dragdrop/dragdrop-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/slider/slider-min.js"></script>
<style type="text/css">
.dragPanel { position: relative; background-color: #eee; border: 1px solid #336; top: 0px; left: 20px; width: 320px; height: 180px; }
.dragPanel h4 { background-color: #336; height: 10px; margin: 0px; cursor: move; }
input { font-size: 0.85em} .thumb { cursor:default; width:18px; height:18px; z-index: 9; position: absolute; left: 0px; }
.bg { position:absolute; left:10px; height:18px; width:146px; border: 0px solid #aaaaaa; }
.bg span, .bg p { cursor:default; position: relative; font-size: 2px; overflow: hidden; color: #aaaaaa; top: 4px; height: 10px; width: 4px; display: block; float:left; }
.bg span { border-top:1px solid #cccccc; border-bottom:1px solid #cccccc; }
.bg .lb { border-left:1px solid #cccccc; }
.bg .rb { border-right:1px solid #cccccc; }
#valdiv { position:absolute; top: 100px; left:10px; }
#rBG {-moz-outline: none; outline:0px none;top:30px}
#gBG {-moz-outline: none; outline:0px none;top:50px}
#bBG {-moz-outline: none; outline:0px none;top:70px}
#swatch { position:absolute; left:160px; top:34px; height:50px; width:50px; border:1px solid #aaaaaa; }
</style>
</head> <body class=" yui-skin-sam">
RBG Slider Control
The RGB slider implements the <a href="http://developer.yahoo.ru/yui/slider/">YUI Slider Control</a> to create three sliders which, between them, generate an RGB color. The background color of each slider is also dynamically modified to reflect the colors that could be generated by moving a single slider; this affords greater visual feedback to the user and allows her to have a quicker intuitive sense about how to get the desired result.
(Note: YUI also includes a full <a href="http://developer.yahoo.ru/yui/colorpicker/">Color Picker Control</a> with a complete set of configurable options.)
<form name="rgbform">
RGB |
<input autocomplete="off" tabindex="3" name="rval" id="rval" type="text" value="0" size="4" maxlength="4" />
<input autocomplete="off" tabindex="4" name="gval" id="gval" type="text" value="0" size="4" maxlength="4" />
<input autocomplete="off" tabindex="5" name="bval" id="bval" type="text" value="0" size="4" maxlength="4" />
|
<input tabindex="6" id="rgbSubmit" type="button" value="Update" /> |
Hex: # |
<input autocomplete="off" tabindex="7" name="hexval" id="hexval" type="text" value="" size="6" maxlength="6" /> |
<input tabindex="8" id="hexSubmit" type="button" value="Update" /> |
<input tabindex="9" id="resetButton" type="button" value="Reset" /> |
</form>
<script type="text/javascript" src="yui_2.7.0b-assets/slider-assets/color.js"></script> <script type="text/javascript"> YAHOO.example.RGBSlider = function() {
var Event = YAHOO.util.Event,
Dom = YAHOO.util.Dom,
Color = YAHOO.util.Color,
Slider = YAHOO.widget.Slider,
r, g, b, dd;
function updateSliderColors() {
var curr, curg, curb;
curr = Math.min(r.getValue() * 2, 255);
curg = Math.min(g.getValue() * 2, 255);
curb = Math.min(b.getValue() * 2, 255);
YAHOO.log("updateSliderColor " + curr + ", " + curg + ", " + curb);
for (var i=0; i<34; i++) {
Dom.setStyle("rBG" + i, "background-color",
"rgb(" + (i*8) + "," + curg + "," + curb + ")");
Dom.setStyle("gBG" + i, "background-color",
"rgb(" + curr + "," + (i*8) + "," + curb + ")");
Dom.setStyle("bBG" + i, "background-color",
"rgb(" + curr + "," + curg + "," + (i*8) + ")");
}
Dom.setStyle("swatch", "background-color",
"rgb(" + curr + "," + curg + "," + curb + ")");
Dom.get("hexval").value = Color.rgb2hex(curr, curg, curb);
}
function isValidRGB(a) {
if ((!a[0] && a[0] !=0) || isNaN(a[0]) || a[0] < 0 || a[0] > 255) return false;
if ((!a[1] && a[1] !=0) || isNaN(a[1]) || a[1] < 0 || a[1] > 255) return false;
if ((!a[2] && a[2] !=0) || isNaN(a[2]) || a[2] < 0 || a[2] > 255) return false;
return true;
}
function listenerUpdate(whichSlider, newVal) {
newVal = Math.min(255, newVal);
Dom.get(whichSlider + "val").value = newVal;
updateSliderColors();
}
return {
userReset: function() {
var v;
var f = document.forms["rgbform"];
r.setValue(0);
g.setValue(0);
b.setValue(0);
},
rgbInit: function() {
r = Slider.getHorizSlider("rBG", "rthumb", 0, 128);
r.subscribe("change", function(newVal) { listenerUpdate("r", newVal*2); });
g = Slider.getHorizSlider("gBG", "gthumb", 0, 128);
g.subscribe("change", function(newVal) { listenerUpdate("g", newVal*2); });
b = Slider.getHorizSlider("bBG", "bthumb", 0, 128);
b.subscribe("change", function(newVal) { listenerUpdate("b", newVal*2); });
this.initColor();
dd = new YAHOO.util.DD("ddRGB");
dd.setHandleElId("pickerHandle");
},
initColor: function() {
var ch = " ";
d = document.createElement("P");
d.className = "rb";
r.getEl().appendChild(d);
d = document.createElement("P");
d.className = "rb";
g.getEl().appendChild(d);
d = document.createElement("P");
d.className = "rb";
b.getEl().appendChild(d);
for (var i=0; i<34; i++) {
d = document.createElement("SPAN");
d.id = "rBG" + i
// d.innerHTML = ch;
r.getEl().appendChild(d);
d = document.createElement("SPAN");
d.id = "gBG" + i
// d.innerHTML = ch;
g.getEl().appendChild(d);
d = document.createElement("SPAN");
d.id = "bBG" + i
// d.innerHTML = ch;
b.getEl().appendChild(d);
}
d = document.createElement("P");
d.className = "lb";
r.getEl().appendChild(d);
d = document.createElement("P");
d.className = "lb";
g.getEl().appendChild(d);
d = document.createElement("P");
d.className = "lb";
b.getEl().appendChild(d);
this.userUpdate();
},
hexUpdate: function(e) {
return this.userUpdate(e, true);
},
userUpdate: function(e, isHex) {
var v;
var f = document.forms["rgbform"];
if (isHex) {
var hexval = f["hexval"].value;
// shorthand #369
if (hexval.length == 3) {
var newval = "";
for (var i=0;i<3;i++) {
var a = hexval.substr(i, 1);
newval += a + a;
}
hexval = newval;
}
YAHOO.log("hexval:" + hexval);
if (hexval.length != 6) {
alert("illegal hex code: " + hexval);
} else {
var rgb = Color.hex2rgb(hexval);
// alert(rgb.toString());
if (isValidRGB(rgb)) {
f["rval"].value = rgb[0];
f["gval"].value = rgb[1];
f["bval"].value = rgb[2];
}
}
}
// red
v = parseFloat(f["rval"].value);
v = ( isNaN(v) ) ? 0 : Math.round(v);
YAHOO.log("setValue, r: " + v);
r.setValue(Math.round(v) / 2);
v = parseFloat(f["gval"].value);
v = ( isNaN(v) ) ? 0 : Math.round(v);
YAHOO.log("setValue, g: " + g);
g.setValue(Math.round(v) / 2);
v = parseFloat(f["bval"].value);
v = ( isNaN(v) ) ? 0 : Math.round(v);
YAHOO.log("setValue, b: " + b);
b.setValue(Math.round(v) / 2);
updateSliderColors();
if (e) {
Event.stopEvent(e);
}
},
init: function() {
this.rgbInit();
Event.on("rgbForm", "submit", this.userUpdate);
Event.on("rgbSubmit", "click", this.userUpdate);
Event.on("hexSubmit", "click", this.hexUpdate, this, true);
Event.on("resetButton", "click", this.userReset);
}
};
}(); YAHOO.util.Event.onDOMReady(YAHOO.example.RGBSlider.init,
YAHOO.example.RGBSlider, true);
</script>
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
