JavaScript DHTML/YUI Library/Slider — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
|
(нет различий)
| |
Текущая версия на 07:28, 26 мая 2010
Содержание
Basic Vertical Slider
<!--
Software License Agreement (BSD License)
Copyright (c) 2009, Yahoo! Inc.
All rights reserved.
Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice, this list of conditions and the
following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
* Neither the name of Yahoo! Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission of Yahoo! Inc.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Sources of Intellectual Property Included in the YUI Library
YUI is issued by Yahoo! under the BSD license above. Below is a list of certain publicly available software that is the source of intellectual property in YUI, along with the licensing terms that pertain to thosesources of IP. This list is for informational purposes only and is not intended to represent an exhaustive list of third party contributions to the YUI.
* Douglas Crockford"s JSON parsing and stringifying methods: In the JSON Utility, Douglas Crockford"s JSON parsing and stringifying methods are adapted from work published at JSON.org. The adapted work is in the public domain.
* Robert Penner"s animation-easing algorithms: In the Animation Utility, YUI makes use of Robert Penner"s algorithms for easing.
* Geoff Stearns"s SWFObject: In the Charts Control and the Uploader versions through 2.7.0, YUI makes use of Geoff Stearns"s SWFObject v1.5 for Flash Player detection and embedding. More information on SWFObject can be found here (http://blog.deconcept.ru/swfobject/). SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License (http://www.opensource.org/licenses/mit-license.php).
* Diego Perini"s IEContentLoaded technique: The Event Utility employs a technique developed by Diego Perini and licensed under GPL. YUI"s use of this technique is included under our BSD license with the author"s permission.
-->
<!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>
<!--there is no custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Basic Vertical Slider</h1>
<div class="exampleIntro">
<p>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:</p>
<ul>
<li>The slider range is 200 pixels.</li>
<li>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.</li>
<li>The value is set to 30 after the control is initialized</li>
<li>Once the slider has focus, the up and down keys will move
the thumb 20 pixels (changing the "real" value by 30).</li>
<li>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.</li>
</ul>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE -->
<!--
You supply your own markup for the slider:
- The thumb element should be a child of the slider background
- The tabindex attribute lets this element receive focus in most browsers.
- If the slider background can receive focus, the arrow keys can be used to change
this slider"s value.
- We use an img element rather than a css background for the thumb to get around
a performance bottleneck when animating the thumb in IE
- Both elements should have a position style: relative or absolute
- Don"t apply a css border to the slider background
-->
<div id="slider-bg" class="yui-v-slider" tabindex="-1" title="Slider">
<div id="slider-thumb" class="yui-slider-thumb"><img src="yui_2.7.0b-assets/slider-assets/thumb-bar.gif"></div>
</div>
<p>Pixel value: <span id="slider-value">0</span></p>
<p>Converted value:
<input autocomplete="off" id="slider-converted-value" type="text" value="0" size="4" maxlength="4" />
</p>
<!--We"ll use these to trigger interactions with the Slider API -->
<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>
<!--END SOURCE CODE FOR EXAMPLE -->
</body>
</html>
<!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:18 PST 2009 -->
<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
<!--
Software License Agreement (BSD License)
Copyright (c) 2009, Yahoo! Inc.
All rights reserved.
Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice, this list of conditions and the
following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
* Neither the name of Yahoo! Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission of Yahoo! Inc.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Sources of Intellectual Property Included in the YUI Library
YUI is issued by Yahoo! under the BSD license above. Below is a list of certain publicly available software that is the source of intellectual property in YUI, along with the licensing terms that pertain to thosesources of IP. This list is for informational purposes only and is not intended to represent an exhaustive list of third party contributions to the YUI.
* Douglas Crockford"s JSON parsing and stringifying methods: In the JSON Utility, Douglas Crockford"s JSON parsing and stringifying methods are adapted from work published at JSON.org. The adapted work is in the public domain.
* Robert Penner"s animation-easing algorithms: In the Animation Utility, YUI makes use of Robert Penner"s algorithms for easing.
* Geoff Stearns"s SWFObject: In the Charts Control and the Uploader versions through 2.7.0, YUI makes use of Geoff Stearns"s SWFObject v1.5 for Flash Player detection and embedding. More information on SWFObject can be found here (http://blog.deconcept.ru/swfobject/). SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License (http://www.opensource.org/licenses/mit-license.php).
* Diego Perini"s IEContentLoaded technique: The Event Utility employs a technique developed by Diego Perini and licensed under GPL. YUI"s use of this technique is included under our BSD license with the author"s permission.
-->
<!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>
<!--begin custom header content for this example-->
<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>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Bottom to top Vertical Slider</h1>
<div class="exampleIntro">
<p>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:</p>
<ul>
<li>The slider range is 200 pixels.</li>
<li>CSS is used to place the slide thumb at the bottom of the slider.</li>
<li>Custom logic is added to the slider instance to convert the offset value to a "real" value calculated from a provided min/max range.</li>
<li>The custom min value is set to 10; the max 110.</li>
<li>Once the slider has focus, the up and down keys will move
the thumb 20 pixels (changing the "real" value by 10).</li>
<li>When the slider value changes, the pixel offset and calculated value are reported below the slider.</li>
</ul>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE -->
<div id="demo">
<div id="slide_bg" tabindex="-1">
<div id="slide_thumb"><img src="yui_2.7.0b-assets/slider-assets/thumb-bar.gif"></div>
</div>
<p>Pixel offset from start: <span id="d_offset">0</span></p>
<p>Calculated Value: <span id="d_val">0</span></p>
</div>
<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>
<!--END SOURCE CODE FOR EXAMPLE -->
</body>
</html>
<!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:19 PST 2009 -->
<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
<!--
Software License Agreement (BSD License)
Copyright (c) 2009, Yahoo! Inc.
All rights reserved.
Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice, this list of conditions and the
following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
* Neither the name of Yahoo! Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission of Yahoo! Inc.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Sources of Intellectual Property Included in the YUI Library
YUI is issued by Yahoo! under the BSD license above. Below is a list of certain publicly available software that is the source of intellectual property in YUI, along with the licensing terms that pertain to thosesources of IP. This list is for informational purposes only and is not intended to represent an exhaustive list of third party contributions to the YUI.
* Douglas Crockford"s JSON parsing and stringifying methods: In the JSON Utility, Douglas Crockford"s JSON parsing and stringifying methods are adapted from work published at JSON.org. The adapted work is in the public domain.
* Robert Penner"s animation-easing algorithms: In the Animation Utility, YUI makes use of Robert Penner"s algorithms for easing.
* Geoff Stearns"s SWFObject: In the Charts Control and the Uploader versions through 2.7.0, YUI makes use of Geoff Stearns"s SWFObject v1.5 for Flash Player detection and embedding. More information on SWFObject can be found here (http://blog.deconcept.ru/swfobject/). SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License (http://www.opensource.org/licenses/mit-license.php).
* Diego Perini"s IEContentLoaded technique: The Event Utility employs a technique developed by Diego Perini and licensed under GPL. YUI"s use of this technique is included under our BSD license with the author"s permission.
-->
<!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>
<!--begin custom header content for this example-->
<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>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Dual-thumb Slider with range highlight</h1>
<div class="exampleIntro">
<p>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:</p>
<ul>
<li>The thumbs are set on a slide bar with a 300 pixel range.</li>
<li>The thumbs are configured with a 12 pixel tick size.</li>
<li>Clicking on the background will animate the nearest thumb.</li>
</ul>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE -->
<div id="demo_bg" title="Range slider">
<span id="demo_highlight"></span>
<div id="demo_min_thumb"><img src="yui_2.7.0b-assets/slider-assets/l-thumb-round.gif"></div>
<div id="demo_max_thumb"><img src="yui_2.7.0b-assets/slider-assets/r-thumb-round.gif"></div>
</div>
<p>Range offsets: <span id="demo_range">0 - 300</span></p>
<p>Status: <span id="demo_value" class="ok">ok</span></p>
<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>
<!--END SOURCE CODE FOR EXAMPLE -->
</body>
</html>
<!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:19 PST 2009 -->
<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
<!--
Software License Agreement (BSD License)
Copyright (c) 2009, Yahoo! Inc.
All rights reserved.
Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice, this list of conditions and the
following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
* Neither the name of Yahoo! Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission of Yahoo! Inc.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Sources of Intellectual Property Included in the YUI Library
YUI is issued by Yahoo! under the BSD license above. Below is a list of certain publicly available software that is the source of intellectual property in YUI, along with the licensing terms that pertain to thosesources of IP. This list is for informational purposes only and is not intended to represent an exhaustive list of third party contributions to the YUI.
* Douglas Crockford"s JSON parsing and stringifying methods: In the JSON Utility, Douglas Crockford"s JSON parsing and stringifying methods are adapted from work published at JSON.org. The adapted work is in the public domain.
* Robert Penner"s animation-easing algorithms: In the Animation Utility, YUI makes use of Robert Penner"s algorithms for easing.
* Geoff Stearns"s SWFObject: In the Charts Control and the Uploader versions through 2.7.0, YUI makes use of Geoff Stearns"s SWFObject v1.5 for Flash Player detection and embedding. More information on SWFObject can be found here (http://blog.deconcept.ru/swfobject/). SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License (http://www.opensource.org/licenses/mit-license.php).
* Diego Perini"s IEContentLoaded technique: The Event Utility employs a technique developed by Diego Perini and licensed under GPL. YUI"s use of this technique is included under our BSD license with the author"s permission.
-->
<!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>
<!--begin custom header content for this example-->
<style type="text/css">
#slider-bg {
background:url(yui_2.7.0b-assets/slider-assets/bg-fader.gif) 5px 0 no-repeat;
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Horizontal Slider with Tick Marks</h1>
<div class="exampleIntro">
<p>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.)</p>
<p>Here are some important characteristics of this implementation:</p>
<ul>
<li>The slider range is 200 pixels.</li>
<li>The slider movement is restricted to 20 pixel increments.</li>
<li>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.</li>
<li>Once the slider has focus, the left and right keys will move
the thumb 20 pixels (changing the "real" value by 30).</li>
<li>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.</li>
</ul>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE -->
<!--
You supply your own markup for the slider:
- The thumb element should be a child of the slider background
- The tabindex attribute lets this element receive focus in most browsers.
- If the slider background can receive focus, the arrow keys can be used to change
this slider"s value.
- We use an img element rather than a css background for the thumb to get around
a performance bottleneck when animating the thumb in IE
- Both elements should have a position style: relative or absolute
- Don"t apply a css border to the slider background
-->
<div id="slider-bg" class="yui-h-slider" tabindex="-1" title="Slider">
<div id="slider-thumb" class="yui-slider-thumb"><img src="yui_2.7.0b-assets/slider-assets/thumb-n.gif"></div>
</div>
<p>Pixel value: <span id="slider-value">0</span></p>
<p>Converted value:
<input autocomplete="off" id="slider-converted-value" type="text" value="0" size="4" maxlength="4" />
</p>
<!--We"ll use these to trigger interactions with the Slider API -->
<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>
<!--END SOURCE CODE FOR EXAMPLE -->
</body>
</html>
<!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:18 PST 2009 -->
<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
<!--
Software License Agreement (BSD License)
Copyright (c) 2009, Yahoo! Inc.
All rights reserved.
Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice, this list of conditions and the
following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
* Neither the name of Yahoo! Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission of Yahoo! Inc.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Sources of Intellectual Property Included in the YUI Library
YUI is issued by Yahoo! under the BSD license above. Below is a list of certain publicly available software that is the source of intellectual property in YUI, along with the licensing terms that pertain to thosesources of IP. This list is for informational purposes only and is not intended to represent an exhaustive list of third party contributions to the YUI.
* Douglas Crockford"s JSON parsing and stringifying methods: In the JSON Utility, Douglas Crockford"s JSON parsing and stringifying methods are adapted from work published at JSON.org. The adapted work is in the public domain.
* Robert Penner"s animation-easing algorithms: In the Animation Utility, YUI makes use of Robert Penner"s algorithms for easing.
* Geoff Stearns"s SWFObject: In the Charts Control and the Uploader versions through 2.7.0, YUI makes use of Geoff Stearns"s SWFObject v1.5 for Flash Player detection and embedding. More information on SWFObject can be found here (http://blog.deconcept.ru/swfobject/). SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License (http://www.opensource.org/licenses/mit-license.php).
* Diego Perini"s IEContentLoaded technique: The Event Utility employs a technique developed by Diego Perini and licensed under GPL. YUI"s use of this technique is included under our BSD license with the author"s permission.
-->
<!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>
<!--there is no custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Horizontal Slider with two thumbs</h1>
<div class="exampleIntro">
<p>This example demonstrates a simple horizontal dual-thumb Slider implementation. Some characteristics to note include the following:</p>
<ul>
<li>The thumbs are set on a slide bar with a 200 pixel range.</li>
<li>A minimum distance is provided, preventing the thumbs from coming within 10 pixels of each other.</li>
<li>Initial min and max values are supplied as 100 and 130 respectively.</li>
<li>Clicking on the background will animate the nearest thumb.</li>
<li>Min and Max value offsets are calculated from the <strong>center</strong> of the thumbs and must be accounted for conversion calculations.</li>
</ul>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE -->
<div id="demo_bg" class="yui-h-slider" title="Range slider">
<div id="demo_min_thumb" class="yui-slider-thumb"><img src="yui_2.7.0b-assets/slider-assets/left-thumb.png"></div>
<div id="demo_max_thumb" class="yui-slider-thumb"><img src="yui_2.7.0b-assets/slider-assets/right-thumb.png"></div>
</div>
<p>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>
<h3>Converted values:</h3>
<p id="demo_info"></p>
<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: <strong>" + min + "</strong><br>" +
"MAX: <strong>" + max + "</strong>";
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>
<!--END SOURCE CODE FOR EXAMPLE -->
</body>
</html>
<!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:19 PST 2009 -->
<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
<!--
Software License Agreement (BSD License)
Copyright (c) 2009, Yahoo! Inc.
All rights reserved.
Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice, this list of conditions and the
following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
* Neither the name of Yahoo! Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission of Yahoo! Inc.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Sources of Intellectual Property Included in the YUI Library
YUI is issued by Yahoo! under the BSD license above. Below is a list of certain publicly available software that is the source of intellectual property in YUI, along with the licensing terms that pertain to thosesources of IP. This list is for informational purposes only and is not intended to represent an exhaustive list of third party contributions to the YUI.
* Douglas Crockford"s JSON parsing and stringifying methods: In the JSON Utility, Douglas Crockford"s JSON parsing and stringifying methods are adapted from work published at JSON.org. The adapted work is in the public domain.
* Robert Penner"s animation-easing algorithms: In the Animation Utility, YUI makes use of Robert Penner"s algorithms for easing.
* Geoff Stearns"s SWFObject: In the Charts Control and the Uploader versions through 2.7.0, YUI makes use of Geoff Stearns"s SWFObject v1.5 for Flash Player detection and embedding. More information on SWFObject can be found here (http://blog.deconcept.ru/swfobject/). SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License (http://www.opensource.org/licenses/mit-license.php).
* Diego Perini"s IEContentLoaded technique: The Event Utility employs a technique developed by Diego Perini and licensed under GPL. YUI"s use of this technique is included under our BSD license with the author"s permission.
-->
<!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>
<!--begin custom header content for this example-->
<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>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>RBG Slider Control</h1>
<div class="exampleIntro">
<p>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.</p>
<p>(<strong>Note:</strong> YUI also includes a full <a href="http://developer.yahoo.ru/yui/colorpicker/">Color Picker Control</a> with a complete set of configurable options.)</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE -->
<div id="ddRGB" class="dragPanel">
<h4 id="pickerHandle"> </h4>
<div id="rBG" class="bg" tabindex="1" hidefocus="true">
<div id="rthumb" class="thumb"><img src="yui_2.7.0b-assets/slider-assets/thumb-rgb.png" /></div>
</div>
<div id="gBG" class="bg" tabindex="2" hidefocus="true">
<div id="gthumb" class="thumb"><img src="yui_2.7.0b-assets/slider-assets/thumb-rgb.png" /></div>
</div>
<div id="bBG" class="bg" tabindex="3" hidefocus="true">
<div id="bthumb" class="thumb"><img src="yui_2.7.0b-assets/slider-assets/thumb-rgb.png" /></div>
</div>
<div id="valdiv">
<form name="rgbform">
<table border="0">
<tr>
<td>
RGB
</td>
<td>
<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" />
</td>
<td>
<input tabindex="6" id="rgbSubmit" type="button" value="Update" />
</td>
</tr>
<tr>
<td>
Hex: #
</td>
<td>
<input autocomplete="off" tabindex="7" name="hexval" id="hexval" type="text" value="" size="6" maxlength="6" />
</td>
<td>
<input tabindex="8" id="hexSubmit" type="button" value="Update" />
</td>
</tr>
<tr>
<td>
<input tabindex="9" id="resetButton" type="button" value="Reset" />
</td>
</tr>
</table>
</form>
</div>
<div id="swatch"> </div>
</div>
<!-- color.js extracted from the colorpicker widget -->
<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>
<!--END SOURCE CODE FOR EXAMPLE -->
</body>
</html>
<!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:18 PST 2009 -->
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
