JavaScript DHTML/GUI Components/Slider
Содержание
- 1 Slider for color picker
- 2 Slider: vertical and horizontal, tick mark, animate the movement of the thumb
- 3 The RGB slider implements three slider controls to generate a RGB color
- 4 Yahoo! UI Library - Slider Widget
- 5 Yahoo! UI Library - Slider Widget 2: animate the movement of the thumb
- 6 Yahoo! UI Library - Slider Widget 3:
Slider for color picker
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"
xmlns:x2="http://www.w3.org/TR/xhtml2" xmlns:role="http://www.w3.org/2005/01/wai-rdf/GUIRoleTaxonomy#" xmlns:state="http://www.w3.org/2005/07/aaa">
<head> <title>Yahoo! UI Library - Slider Widget</title> <link rel="stylesheet" type="text/css" href="./examples/slider/css/screen.css"> <style type="text/css">
.dragPanel {
position: absolute;
background-color: #eeeeee;
top: 200px;
left: 20px;
width: 320px;
height: 180px;
}
.dragPanel h4 {
background-color: #bbbbbb;
height: 10px;
margin: 0px;
cursor: move;
}
input { font-size: 85%}
.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 {top:30px}
#gBG {top:50px}
#bBG {top:70px}
#swatch {
position:absolute;
left:160px;
top:34px;
height:50px;
width:50px;
border:1px solid #aaaaaa;
}
</style>
<script type="text/javascript" src="./build/yahoo/yahoo.js" ></script> <script type="text/javascript" src="./build/event/event.js" ></script> <script type="text/javascript" src="./build/logger/logger.js" ></script> <script type="text/javascript" src="./build/dom/dom.js" ></script> <script type="text/javascript" src="./build/animation/animation.js" ></script> <script type="text/javascript" src="./build/dragdrop/dragdrop.js" ></script> <script type="text/javascript" src="./examples/slider/js/color.js" ></script> <script type="text/javascript" src="./examples/slider/js/key.js" ></script> <script type="text/javascript" src="./build/slider/slider-debug.js" ></script></head> <body>
Slider Widget
<style type="text/css">
#logButtonHeader input { font-size: 80% }
/* logger default styles */ /* font size is controlled here: default 77% */
- yui-log {position:absolute;top:1em;right:1em;font-size:77%;text-align:left;}
/* width is controlled here: default 31em */ .yui-log {background-color:#AAA;border:1px solid black;font-family:monospace;z-index:9000;} .yui-log p {margin:1px;padding:.1em;} .yui-log button {font-family:monospace;} .yui-log .yui-log-hd {padding:.5em;background-color:#575757;color:#FFF;} /* height is controlled here: default 20em*/ .yui-log .yui-log-bd {width:100%;height:20em;background-color:#FFF;border:1px solid gray;overflow:auto;} .yui-log .yui-log-ft {margin-top:.5em;margin-bottom:1em;} .yui-log .yui-log-ft .yui-log-categoryfilters {} .yui-log .yui-log-ft .yui-log-sourcefilters {width:100%;border-top:1px solid #575757;margin-top:.75em;padding-top:.75em;} .yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;} .yui-log .yui-log-filtergrp {margin-right:.5em;} .yui-log .info {background-color:#A7CC25;} /* A7CC25 green */ .yui-log .warn {background-color:#F58516;} /* F58516 orange */ .yui-log .error {background-color:#E32F0B;} /* E32F0B red */ .yui-log .time {background-color:#A6C9D7;} /* A6C9D7 blue */ .yui-log .window {background-color:#F2E886;} /* F2E886 tan */
</style>
<script type="text/javascript">
YAHOO.example.logApp = function() {
return {
init: function() {
if (YAHOO.widget.Logger) {
var reader = new YAHOO.widget.LogReader( "logDiv",
{ newestOnTop: true, height: "400px" } );
reader._onClickPauseBtn(null, reader);
}
}
};
} ();
YAHOO.util.Event.on(window, "load", YAHOO.example.logApp.init);
</script>
RGB Slider
The RGB slider implements three slider controls to generate a 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.
The logger is paused for performance reasons. Click "Resume" to re-enable it.
<form name="rgbform" onsubmit="return userUpdate()">
RGB |
<input name="rval" id="rval" type="text" value="0" size="4" maxlength="4" /> <input name="gval" id="gval" type="text" value="0" size="4" maxlength="4" /> <input name="bval" id="bval" type="text" value="0" size="4" maxlength="4" /> |
<input type="button" value="Update" onclick="userUpdate()" /> |
Hex: # |
<input name="hexval" id="hexval" type="text" value="" size="6" maxlength="6" /> |
<input type="button" value="Update" onclick="userUpdate(true)" /> |
<input type="button" value="Reset" onclick="userReset()" /> |
</form>
<script type="text/javascript">
var r, g, b;
var dd;
function init() {
rgbInit();
}
function rgbInit() {
r = YAHOO.widget.Slider.getHorizSlider("rBG", "rthumb", 0, 128);
r.onChange = function(newVal) { listenerUpdate("r", newVal*2); };
g = YAHOO.widget.Slider.getHorizSlider("gBG", "gthumb", 0, 128);
g.onChange = function(newVal) { listenerUpdate("g", newVal*2); };
b = YAHOO.widget.Slider.getHorizSlider("bBG", "bthumb", 0, 128);
b.onChange = function(newVal) { listenerUpdate("b", newVal*2); };
initColor();
dd = new YAHOO.util.DD("ddRGB");
dd.setHandleElId("pickerHandle");
}
window.onload = init;
function initColor() {
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);
userUpdate();
}
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);
var d;
for (var i=0; i<34; i++) {
d = document.getElementById("rBG" + i);
d.style.backgroundColor =
"rgb(" + (i*8) + "," + curg + "," + curb + ")";
d = document.getElementById("gBG" + i);
d.style.backgroundColor =
"rgb(" + curr + "," + (i*8) + "," + curb + ")";
d = document.getElementById("bBG" + i);
d.style.backgroundColor =
"rgb(" + curr + "," + curg + "," + (i*8) + ")";
}
document.getElementById("swatch").style.backgroundColor =
"rgb(" + curr + "," + curg + "," + curb + ")";
document.getElementById("hexval").value =
YAHOO.util.Color.rgb2hex(curr, curg, curb);
}
function listenerUpdate(whichSlider, newVal) {
if (newVal == 256) {
newVal = 255;
}
document.getElementById(whichSlider + "val").value = newVal;
updateSliderColors();
}
function userUpdate(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 = YAHOO.util.Color.hex2rgb(hexval);
// alert(rgb.toString());
if (YAHOO.util.Color.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();
return false;
}
function userReset() {
var v;
var f = document.forms["rgbform"];
r.setValue(0);
g.setValue(0);
b.setValue(0);
}
</script> </body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
Slider: vertical and horizontal, tick mark, animate the movement of the thumb
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"
xmlns:x2="http://www.w3.org/TR/xhtml2" xmlns:role="http://www.w3.org/2005/01/wai-rdf/GUIRoleTaxonomy#" xmlns:state="http://www.w3.org/2005/07/aaa">
<head> <title>Yahoo! UI Library - Slider Widget</title> <link rel="stylesheet" type="text/css" href="./examples/dragdrop/css/screen.css"> <style type="text/css"> </style> </head> <body>
Drag and Drop - Slider Widgets
Basic Sliders
The slider widget is an implementation of YAHOO.util.DragDrop It also will use YAHOO.util.Animation if available to animate the movement of the thumb when you click the slider background. The only difference between the two sliders aside from the fact that one is vertical and one horizontal is that the horizontal slider implements the "tick mark" feature of drag and drop; it will "snap" to the tick marks spaced 25 pixels apart.
<form name="formV" onsubmit="return updateVert()">
<input name="vertVal" id="vertVal" type="text" value="0" size="4" maxlength="4" />
<input type="button" value="Update" onclick="updateVert()" />
</form>
<form name="formH" onsubmit="return updateHoriz()">
<input name="horizVal" id="horizVal" type="text" value="0" size="4" maxlength="4" />
<input type="button" value="Update" onclick="updateHoriz()" />
</form>
Color Picker
Implements a slider region and a vertical slider to implement an HSV color picker.
<img id="pickerbg" src="./examples/dragdrop/img/pickerbg.png" alt="">
<form name="pickerform" onsubmit="return pickerUpdate()">
R <input name="pickerrval" id="pickerrval" type="text" value="0" size="3" maxlength="3" />
H <input name="pickerhval" id="pickerhval" type="text" value="0" size="3" maxlength="3" />
G <input name="pickergval" id="pickergval" type="text" value="0" size="3" maxlength="3" />
S <input name="pickergsal" id="pickersval" type="text" value="0" size="3" maxlength="3" />
B <input name="pickerbval" id="pickerbval" type="text" value="0" size="3" maxlength="3" />
V <input name="pickervval" id="pickervval" type="text" value="0" size="3" maxlength="3" />
# <input name="pickerhexval" id="pickerhexval" type="text" value="0" size="6" maxlength="6" />
</form>
</div>
</div> <script type="text/javascript" src="./build/yahoo/yahoo.js" ></script> <script type="text/javascript" src="./build/event/event.js" ></script> <script type="text/javascript" src="./build/dom/dom.js"></script> <script type="text/javascript" src="./build/logger/logger.js" ></script> <script type="text/javascript" src="./build/dragdrop/dragdrop.js" ></script> <script type="text/javascript" src="./examples/dragdrop/js/color.js" ></script> <script type="text/javascript" src="./examples/dragdrop/js/key.js" ></script> <script type="text/javascript" src="./build/animation/animation.js" ></script> <script type="text/javascript" src="./build/slider/slider.js" ></script> <script type="text/javascript">
var hue;
var picker;
var dd1, dd2;
var r, g, b;
function init() {
standardSliderInit();
// rgbInit();
pickerInit();
}
// Picker ---------------------------------------------------------
function pickerInit() {
hue = YAHOO.widget.Slider.getVertSlider("hueBg", "hueThumb", 0, 180);
hue.onChange = function(newVal) { hueUpdate(newVal); };
picker = YAHOO.widget.Slider.getSliderRegion("pickerDiv", "selector",
0, 180, 0, 180);
picker.onChange = function(newX, newY) { pickerUpdate(newX, newY); };
hueUpdate();
dd1 = new YAHOO.util.DD("pickerPanel");
dd1.setHandleElId("pickerHandle");
dd1.endDrag = function(e) {
// picker.thumb.resetConstraints();
// hue.thumb.resetConstraints();
};
}
window.onload = init;
function pickerUpdate(newX, newY) {
pickerSwatchUpdate();
}
function hueUpdate(newVal) {
var h = (180 - hue.getValue()) / 180;
if (h == 1) { h = 0; }
YAHOO.log("hue " + hue.getValue());
var a = YAHOO.util.Color.hsv2rgb( h, 1, 1);
document.getElementById("pickerDiv").style.backgroundColor =
"rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")";
pickerSwatchUpdate();
}
function pickerSwatchUpdate() {
var h = (180 - hue.getValue());
if (h == 180) { h = 0; }
document.getElementById("pickerhval").value = (h*2);
h = h / 180;
YAHOO.log("h " + hue.getValue());
var s = picker.getXValue() / 180;
document.getElementById("pickersval").value = Math.round(s * 100);
YAHOO.log("s " + s);
var v = (180 - picker.getYValue()) / 180;
document.getElementById("pickervval").value = Math.round(v * 100);
YAHOO.log("v " + v);
var a = YAHOO.util.Color.hsv2rgb( h, s, v );
document.getElementById("pickerSwatch").style.backgroundColor =
"rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")";
document.getElementById("pickerrval").value = a[0];
document.getElementById("pickergval").value = a[1];
document.getElementById("pickerbval").value = a[2];
document.getElementById("pickerhexval").value =
YAHOO.util.Color.rgb2hex(a[0], a[1], a[2]);
}
// RGB slider ---------------------------------------------------------
function rgbInit() {
r = YAHOO.widget.Slider.getHorizSlider("rBG", "rthumb", 0, 128);
r.onChange = function(newVal) { listenerUpdate("r", newVal*2); };
g = YAHOO.widget.Slider.getHorizSlider("gBG", "gthumb", 0, 128);
g.onChange = function(newVal) { listenerUpdate("g", newVal*2); };
b = YAHOO.widget.Slider.getHorizSlider("bBG", "bthumb", 0, 128);
b.onChange = function(newVal) { listenerUpdate("b", newVal*2); };
initColor();
dd2 = new YAHOO.util.DD("rgbPanel");
dd2.setHandleElId("rgbHandle");
dd2.endDrag = function(e) {
// r.thumb.resetConstraints();
// g.thumb.resetConstraints();
// b.thumb.resetConstraints();
}
}
function initColor() {
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);
userUpdate();
}
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);
var d;
for (var i=0; i<34; i++) {
d = document.getElementById("rBG" + i);
d.style.backgroundColor =
"rgb(" + (i*8) + "," + curg + "," + curb + ")";
d = document.getElementById("gBG" + i);
d.style.backgroundColor =
"rgb(" + curr + "," + (i*8) + "," + curb + ")";
d = document.getElementById("bBG" + i);
d.style.backgroundColor =
"rgb(" + curr + "," + curg + "," + (i*8) + ")";
}
document.getElementById("rgbSwatch").style.backgroundColor =
"rgb(" + curr + "," + curg + "," + curb + ")";
document.getElementById("hexval").value =
YAHOO.util.Color.rgb2hex(curr, curg, curb);
}
function listenerUpdate(whichSlider, newVal) {
if (newVal == 256) {
newVal = 255;
}
document.getElementById(whichSlider + "val").value = newVal;
updateSliderColors();
}
function userUpdate(isHex) {
YAHOO.log("userupdate");
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 = YAHOO.util.Color.hex2rgb(hexval);
// alert(rgb.toString());
if (YAHOO.util.Color.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);
r.setValue(Math.round(v) / 2);
v = parseFloat(f["gval"].value);
v = ( isNaN(v) ) ? 0 : Math.round(v);
g.setValue(Math.round(v) / 2);
v = parseFloat(f["bval"].value);
v = ( isNaN(v) ) ? 0 : Math.round(v);
b.setValue(Math.round(v) / 2);
updateSliderColors();
return false;
}
function userReset() {
var v;
var f = document.forms["rgbform"];
r.setValue(0);
g.setValue(0);
b.setValue(0);
}
var slider1, slider2;
function standardSliderInit() {
slider1 = YAHOO.widget.Slider.getVertSlider("vertBGDiv", "vertHandleDiv", 0, 200);
slider1.onChange = function(offsetFromStart) {
document.getElementById("vertVal").value = offsetFromStart;
}
slider2 = YAHOO.widget.Slider.getHorizSlider("horizBGDiv", "horizHandleDiv", 100, 100, 25);
slider2.onChange = function(offsetFromStart) {
document.getElementById("horizVal").value = offsetFromStart;
}
// if (document.getElementById("vertBGDiv").getAttributeNS) {
// slider1.focusOnClick = true;
// slider2.focusOnClick = true;
// }
}
function updateVert() {
var v = parseFloat(document.forms["formV"]["vertVal"].value, 10);
if ( isNaN(v) ) v = 0;
slider1.setValue(Math.round(v));
return false;
}
function updateHoriz() {
var v = parseFloat(document.forms["formH"]["horizVal"].value, 10);
if ( isNaN(v) ) v = 0;
slider2.setValue(Math.round(v));
return false;
}
// accessibility keypress test function handleHorizSliderKey(slider, ev) {
YAHOO.log("horizontal slider keypress");
// Firefox 1.5+ only at this point
if (!slider.getAttributeNS) {
return true;
}
// var valueNow = parseInt(slider.getAttributeNS("http://www.w3.org/2005/07/aaa", "valuenow"));
var valueNow = slider2.getValue();
var valueMin = parseInt(slider.getAttributeNS("http://www.w3.org/2005/07/aaa", "valuemin"));
var valueMax = parseInt(slider.getAttributeNS("http://www.w3.org/2005/07/aaa", "valuemax"));
var delta = 0;
var kc = ev.keyCode;
YAHOO.log("keycode: " + kc);
if (kc == YAHOO.util.Key.DOM_VK_LEFT) {
delta = -25;
} else if (kc == YAHOO.util.Key.DOM_VK_RIGHT) {
delta = 25;
} else if (kc == YAHOO.util.Key.DOM_VK_HOME) {
delta = -( valueNow - valueMin );
} else if (kc == YAHOO.util.Key.DOM_VK_END) {
delta = valueMax - valueNow;
} else {
return true;
}
valueNow += delta;
slider2.setValue(valueNow, true);
slider.setAttributeNS("http://www.w3.org/2005/07/aaa", "valuenow", valueNow);
// displaySlider(slider);
return false;
} function handleVertSliderKey(slider, ev) {
YAHOO.log("vertical slider keypress");
// Firefox 1.5+ only at this point
if (!slider.getAttributeNS) {
return true;
}
// var valueNow = parseInt(slider.getAttributeNS("http://www.w3.org/2005/07/aaa", "valuenow"));
var valueNow = slider1.getValue();
var valueMin = parseInt(slider.getAttributeNS("http://www.w3.org/2005/07/aaa", "valuemin"));
var valueMax = parseInt(slider.getAttributeNS("http://www.w3.org/2005/07/aaa", "valuemax"));
var delta = 0;
var kc = ev.keyCode;
if (kc == YAHOO.util.Key.DOM_VK_UP) {
delta = -20;
}
else if (kc == YAHOO.util.Key.DOM_VK_DOWN) {
delta = 20;
}
else if (kc == YAHOO.util.Key.DOM_VK_HOME) {
delta = -( valueNow - valueMin );
}
else if (kc == YAHOO.util.Key.DOM_VK_END) {
delta = valueMax - valueNow;
}
else {
return true;
}
valueNow += delta;
if (valueNow < valueMin) {
valueNow = valueMin;
}
if (valueNow > valueMax) {
valueNow = valueMax;
}
slider.setAttributeNS("http://www.w3.org/2005/07/aaa", "valuenow", valueNow);
// displaySlider(slider);
slider1.setValue(valueNow, true);
return false;
} </script>
</body>
</html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
The RGB slider implements three slider controls to generate a RGB color
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"
xmlns:x2="http://www.w3.org/TR/xhtml2" xmlns:role="http://www.w3.org/2005/01/wai-rdf/GUIRoleTaxonomy#" xmlns:state="http://www.w3.org/2005/07/aaa">
<head> <title>Yahoo! UI Library - Slider Widget</title> <link rel="stylesheet" type="text/css" href="./examples/slider/css/screen.css"> <style type="text/css">
.dragPanel {
position: absolute;
background-color: #eeeeee;
top: 200px;
left: 20px;
width: 320px;
height: 180px;
}
.dragPanel h4 {
background-color: #bbbbbb;
height: 10px;
margin: 0px;
cursor: move;
}
input { font-size: 85%}
.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 {top:30px}
#gBG {top:50px}
#bBG {top:70px}
#swatch {
position:absolute;
left:160px;
top:34px;
height:50px;
width:50px;
border:1px solid #aaaaaa;
}
</style>
<script type="text/javascript" src="./build/yahoo/yahoo.js" ></script> <script type="text/javascript" src="./build/event/event.js" ></script> <script type="text/javascript" src="./build/logger/logger.js" ></script> <script type="text/javascript" src="./build/dom/dom.js" ></script> <script type="text/javascript" src="./build/animation/animation.js" ></script> <script type="text/javascript" src="./build/dragdrop/dragdrop.js" ></script> <script type="text/javascript" src="./examples/slider/js/color.js" ></script> <script type="text/javascript" src="./examples/slider/js/key.js" ></script> <script type="text/javascript" src="./build/slider/slider-debug.js" ></script></head> <body>
Slider Widget
<style type="text/css">
#logButtonHeader input { font-size: 80% }
/* logger default styles */ /* font size is controlled here: default 77% */
- yui-log {position:absolute;top:1em;right:1em;font-size:77%;text-align:left;}
/* width is controlled here: default 31em */ .yui-log {background-color:#AAA;border:1px solid black;font-family:monospace;z-index:9000;} .yui-log p {margin:1px;padding:.1em;} .yui-log button {font-family:monospace;} .yui-log .yui-log-hd {padding:.5em;background-color:#575757;color:#FFF;} /* height is controlled here: default 20em*/ .yui-log .yui-log-bd {width:100%;height:20em;background-color:#FFF;border:1px solid gray;overflow:auto;} .yui-log .yui-log-ft {margin-top:.5em;margin-bottom:1em;} .yui-log .yui-log-ft .yui-log-categoryfilters {} .yui-log .yui-log-ft .yui-log-sourcefilters {width:100%;border-top:1px solid #575757;margin-top:.75em;padding-top:.75em;} .yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;} .yui-log .yui-log-filtergrp {margin-right:.5em;} .yui-log .info {background-color:#A7CC25;} /* A7CC25 green */ .yui-log .warn {background-color:#F58516;} /* F58516 orange */ .yui-log .error {background-color:#E32F0B;} /* E32F0B red */ .yui-log .time {background-color:#A6C9D7;} /* A6C9D7 blue */ .yui-log .window {background-color:#F2E886;} /* F2E886 tan */
</style>
<script type="text/javascript">
YAHOO.example.logApp = function() {
return {
init: function() {
if (YAHOO.widget.Logger) {
var reader = new YAHOO.widget.LogReader( "logDiv",
{ newestOnTop: true, height: "400px" } );
reader._onClickPauseBtn(null, reader);
}
}
};
} ();
YAHOO.util.Event.on(window, "load", YAHOO.example.logApp.init);
</script>
RGB Slider
The RGB slider implements three slider controls to generate a 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.
The logger is paused for performance reasons. Click "Resume" to re-enable it.
<form name="rgbform" onsubmit="return userUpdate()">
RGB |
<input name="rval" id="rval" type="text" value="0" size="4" maxlength="4" /> <input name="gval" id="gval" type="text" value="0" size="4" maxlength="4" /> <input name="bval" id="bval" type="text" value="0" size="4" maxlength="4" /> |
<input type="button" value="Update" onclick="userUpdate()" /> |
Hex: # |
<input name="hexval" id="hexval" type="text" value="" size="6" maxlength="6" /> |
<input type="button" value="Update" onclick="userUpdate(true)" /> |
<input type="button" value="Reset" onclick="userReset()" /> |
</form>
<script type="text/javascript">
var r, g, b;
var dd;
function init() {
rgbInit();
}
function rgbInit() {
r = YAHOO.widget.Slider.getHorizSlider("rBG", "rthumb", 0, 128);
r.onChange = function(newVal) { listenerUpdate("r", newVal*2); };
g = YAHOO.widget.Slider.getHorizSlider("gBG", "gthumb", 0, 128);
g.onChange = function(newVal) { listenerUpdate("g", newVal*2); };
b = YAHOO.widget.Slider.getHorizSlider("bBG", "bthumb", 0, 128);
b.onChange = function(newVal) { listenerUpdate("b", newVal*2); };
initColor();
dd = new YAHOO.util.DD("ddRGB");
dd.setHandleElId("pickerHandle");
}
window.onload = init;
function initColor() {
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);
userUpdate();
}
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);
var d;
for (var i=0; i<34; i++) {
d = document.getElementById("rBG" + i);
d.style.backgroundColor =
"rgb(" + (i*8) + "," + curg + "," + curb + ")";
d = document.getElementById("gBG" + i);
d.style.backgroundColor =
"rgb(" + curr + "," + (i*8) + "," + curb + ")";
d = document.getElementById("bBG" + i);
d.style.backgroundColor =
"rgb(" + curr + "," + curg + "," + (i*8) + ")";
}
document.getElementById("swatch").style.backgroundColor =
"rgb(" + curr + "," + curg + "," + curb + ")";
document.getElementById("hexval").value =
YAHOO.util.Color.rgb2hex(curr, curg, curb);
}
function listenerUpdate(whichSlider, newVal) {
if (newVal == 256) {
newVal = 255;
}
document.getElementById(whichSlider + "val").value = newVal;
updateSliderColors();
}
function userUpdate(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 = YAHOO.util.Color.hex2rgb(hexval);
// alert(rgb.toString());
if (YAHOO.util.Color.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();
return false;
}
function userReset() {
var v;
var f = document.forms["rgbform"];
r.setValue(0);
g.setValue(0);
b.setValue(0);
}
</script> </body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
Yahoo! UI Library - Slider Widget
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Yahoo! UI Library - Slider Widget</title> <link rel="stylesheet" type="text/css" href="./examples/slider/css/screen.css">
<script type="text/javascript" src="./build/yahoo/yahoo.js" ></script> <script type="text/javascript" src="./build/event/event.js" ></script> <script type="text/javascript" src="./build/logger/logger.js" ></script> <script type="text/javascript" src="./build/dom/dom.js" ></script> <script type="text/javascript" src="./build/animation/animation.js" ></script> <script type="text/javascript" src="./build/dragdrop/dragdrop.js" ></script> <script type="text/javascript" src="./examples/slider/js/color.js" ></script> <script type="text/javascript" src="./examples/slider/js/key.js" ></script> <script type="text/javascript" src="./build/slider/slider-debug.js" ></script></head> <body>
Slider Widget
<style type="text/css">
#logButtonHeader input { font-size: 80% }
/* logger default styles */ /* font size is controlled here: default 77% */
- yui-log {position:absolute;top:1em;right:1em;font-size:77%;text-align:left;}
/* width is controlled here: default 31em */ .yui-log {background-color:#AAA;border:1px solid black;font-family:monospace;z-index:9000;} .yui-log p {margin:1px;padding:.1em;} .yui-log button {font-family:monospace;} .yui-log .yui-log-hd {padding:.5em;background-color:#575757;color:#FFF;} /* height is controlled here: default 20em*/ .yui-log .yui-log-bd {width:100%;height:20em;background-color:#FFF;border:1px solid gray;overflow:auto;} .yui-log .yui-log-ft {margin-top:.5em;margin-bottom:1em;} .yui-log .yui-log-ft .yui-log-categoryfilters {} .yui-log .yui-log-ft .yui-log-sourcefilters {width:100%;border-top:1px solid #575757;margin-top:.75em;padding-top:.75em;} .yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;} .yui-log .yui-log-filtergrp {margin-right:.5em;} .yui-log .info {background-color:#A7CC25;} /* A7CC25 green */ .yui-log .warn {background-color:#F58516;} /* F58516 orange */ .yui-log .error {background-color:#E32F0B;} /* E32F0B red */ .yui-log .time {background-color:#A6C9D7;} /* A6C9D7 blue */ .yui-log .window {background-color:#F2E886;} /* F2E886 tan */
</style>
Links
<script type="text/javascript">
YAHOO.example.logApp = function() {
return {
init: function() {
if (YAHOO.widget.Logger) {
var reader = new YAHOO.widget.LogReader( "logDiv",
{ newestOnTop: true, height: "400px" } );
reader._onClickPauseBtn(null, reader);
}
}
};
} ();
YAHOO.util.Event.on(window, "load", YAHOO.example.logApp.init);
</script>
Slider
This example uses a scale factor to convert pixels into a "real" value.
The logger is paused for performance reasons. Click "Resume" to re-enable it.
<form name="formV" id="formV">
<input name="vertVal" id="vertVal" type="text" value="0" size="4" maxlength="4" />
<input id="vertButton" type="button" value="Update" />
</form>
<input id="re2" type="button" value="removeTicks" />
<script type="text/javascript"> // YAHOO.widget.SliderThumb.prototype.toString = function () {
// return "ASDF";
// } YAHOO.example.SliderApp = function() {
var verticalSlider;
// 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;
return {
init: function() {
YAHOO.util.Event.addListener("formV", "submit", this.updateVert);
YAHOO.util.Event.addListener("vertButton", "click", this.updateVert);
verticalSlider = YAHOO.widget.Slider.getVertSlider("vertBGDiv",
"vertHandleDiv", topConstraint, bottomConstraint, 20);
verticalSlider.onChange = function(offsetFromStart) {
// use the scale factor to convert the pixel offset into a
// real value
var actualValue = parseInt(offsetFromStart * scaleFactor, 10);
document.getElementById("vertVal").value = actualValue;
document.getElementById("vertBGDiv").title =
"Vertical Slider, value = " + actualValue;
};
verticalSlider.onSlideStart = function() {
YAHOO.log("slidestart");
};
verticalSlider.onSlideEnd = function() {
YAHOO.log("slideend");
};
// verticalSlider.unreg();
// verticalSlider.backgroundEnabled = false;
verticalSlider.setValue(20);
},
updateVert: function() {
var v = parseFloat(document.forms["formV"]["vertVal"].value, 10);
if ( isNaN(v) ) v = 0;
// convert the real value into a pixel offset
verticalSlider.setValue(Math.round(v/scaleFactor));
return false;
},
clearConstraints: function() {
verticalSlider.getThumb().clearConstraints();
},
clearTicks: function() {
verticalSlider.getThumb().clearTicks();
}
};
} (); //YAHOO.example.SliderApp.init(); YAHOO.util.Event.addListener(window, "load", YAHOO.example.SliderApp.init,
YAHOO.example.SliderApp, true);
YAHOO.util.Event.addListener("re2", "click", YAHOO.example.SliderApp.clearTicks); </script> </body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
Yahoo! UI Library - Slider Widget 2: animate the movement of the thumb
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W4C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w4.org/1999/xhtml"
xmlns:x2="http://www.w3.org/TR/xhtml2" xmlns:role="http://www.w3.org/2005/01/wai-rdf/GUIRoleTaxonomy#" xmlns:state="http://www.w3.org/2005/07/aaa">
<head> <title>Yahoo! UI Library - Slider Widget</title> <link rel="stylesheet" type="text/css" href="./examples/slider/css/screen.css" ></link>
<script type="text/javascript" src="./build/yahoo/yahoo.js" ></script> <script type="text/javascript" src="./build/event/event.js" ></script> <script type="text/javascript" src="./build/logger/logger.js" ></script> <script type="text/javascript" src="./build/dom/dom.js" ></script> <script type="text/javascript" src="./build/animation/animation.js" ></script> <script type="text/javascript" src="./build/dragdrop/dragdrop.js" ></script> <script type="text/javascript" src="./examples/slider/js/color.js" ></script> <script type="text/javascript" src="./examples/slider/js/key.js" ></script> <script type="text/javascript" src="./build/slider/slider-debug.js" ></script></head> <body>
Slider Widget
<style type="text/css">
#logButtonHeader input { font-size: 80% }
/* logger default styles */ /* font size is controlled here: default 77% */
- yui-log {position:absolute;top:1em;right:1em;font-size:77%;text-align:left;}
/* width is controlled here: default 31em */ .yui-log {background-color:#AAA;border:1px solid black;font-family:monospace;z-index:9000;} .yui-log p {margin:1px;padding:.1em;} .yui-log button {font-family:monospace;} .yui-log .yui-log-hd {padding:.5em;background-color:#575757;color:#FFF;} /* height is controlled here: default 20em*/ .yui-log .yui-log-bd {width:100%;height:20em;background-color:#FFF;border:1px solid gray;overflow:auto;} .yui-log .yui-log-ft {margin-top:.5em;margin-bottom:1em;} .yui-log .yui-log-ft .yui-log-categoryfilters {} .yui-log .yui-log-ft .yui-log-sourcefilters {width:100%;border-top:1px solid #575757;margin-top:.75em;padding-top:.75em;} .yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;} .yui-log .yui-log-filtergrp {margin-right:.5em;} .yui-log .info {background-color:#A7CC25;} /* A7CC25 green */ .yui-log .warn {background-color:#F58516;} /* F58516 orange */ .yui-log .error {background-color:#E32F0B;} /* E32F0B red */ .yui-log .time {background-color:#A6C9D7;} /* A6C9D7 blue */ .yui-log .window {background-color:#F2E886;} /* F2E886 tan */
</style>
<script type="text/javascript">
YAHOO.example.logApp = function() {
return {
init: function() {
if (YAHOO.widget.Logger) {
var reader = new YAHOO.widget.LogReader( "logDiv",
{ newestOnTop: true, height: "400px" } );
reader._onClickPauseBtn(null, reader);
}
}
};
} ();
YAHOO.util.Event.on(window, "load", YAHOO.example.logApp.init);
</script>
Sliders
The slider widget is an implementation of YAHOO.util.DragDrop It also will use YAHOO.util.Animation if available to animate the movement of the thumb when you click the slider background. The only difference between the two sliders aside from the fact that one is vertical and one horizontal is that the horizontal slider implements the "tick mark" feature of drag and drop; it will "snap" to the tick marks spaced 25 pixels apart.
The logger is paused for performance reasons. Click "Resume" to re-enable it.
<form name="formV" onsubmit="return updateVert()">
<input name="vertVal" id="vertVal" type="text" value="0" size="4" maxlength="4" />
<input type="button" value="Update" onclick="updateVert()" />
</form>
<form name="formH" onsubmit="return updateHoriz()">
<input name="horizVal" id="horizVal" type="text" value="0" size="4" maxlength="4" />
<input type="button" value="Update" onclick="updateHoriz()" />
</form>
<script type="text/javascript"> function handleHorizSliderKey(slider, ev) {
if (gLogger) gLogger.debug("horizontal slider keypress");
// var valueNow = parseInt(slider.getAttributeNS("http://www.w3.org/2005/07/aaa", "valuenow"), 10);
var valueNow = horizontalSlider.getValue();
// var valueMin = parseInt(slider.getAttributeNS("http://www.w3.org/2005/07/aaa", "valuemin"), 10);
// var valueMax = parseInt(slider.getAttributeNS("http://www.w3.org/2005/07/aaa", "valuemax"), 10);
var valueMin = horizontalSlider.thumb.rightConstraint;
var valueMax = horizontalSlider.thumb.leftConstraint;
var delta = 0;
var kc = ev.keyCode;
if (gLogger) gLogger.debug("keycode: " + kc);
if (kc == YAHOO.util.Key.DOM_VK_LEFT) {
delta = -25;
} else if (kc == YAHOO.util.Key.DOM_VK_RIGHT) {
delta = 25;
} else if (kc == YAHOO.util.Key.DOM_VK_HOME) {
delta = -( valueNow - valueMin );
} else if (kc == YAHOO.util.Key.DOM_VK_END) {
delta = valueMax - valueNow;
} else {
return true;
}
valueNow += delta;
horizontalSlider.setValue(valueNow, true);
if (slider.setAttributeNS) {
slider.setAttributeNS("http://www.w3.org/2005/07/aaa",
"valuenow",
valueNow);
}
// displaySlider(slider);
YAHOO.util.Event.stopEvent(ev);
return false;
} function handleVertSliderKey(slider, ev) {
if (gLogger) gLogger.debug("vertical slider keypress");
// var valueNow = parseInt(slider.getAttributeNS("http://www.w3.org/2005/07/aaa", "valuenow"), 10);
var valueNow = verticalSlider.getValue();
// var valueMin = parseInt(slider.getAttributeNS("http://www.w3.org/2005/07/aaa", "valuemin"), 10);
// var valueMax = parseInt(slider.getAttributeNS("http://www.w3.org/2005/07/aaa", "valuemax"), 10);
var valueMin = verticalSlider.thumb.topConstraint;
var valueMax = verticalSlider.thumb.bottomConstraint;
var delta = 0;
var kc = ev.keyCode;
if (kc == YAHOO.util.Key.DOM_VK_UP) {
delta = -20;
}
else if (kc == YAHOO.util.Key.DOM_VK_DOWN) {
delta = 20;
}
else if (kc == YAHOO.util.Key.DOM_VK_HOME) {
delta = -( valueNow - valueMin );
}
else if (kc == YAHOO.util.Key.DOM_VK_END) {
delta = valueMax - valueNow;
}
else {
return true;
}
valueNow += delta;
if (valueNow < valueMin) {
valueNow = valueMin;
}
if (valueNow > valueMax) {
valueNow = valueMax;
}
if (slider.setAttributeNS) {
slider.setAttributeNS("http://www.w3.org/2005/07/aaa",
"valuenow", valueNow);
}
// displaySlider(slider);
verticalSlider.setValue(valueNow, true);
YAHOO.util.Event.stopEvent(ev);
return false;
}
var verticalSlider, horizontalSlider;
var gLogger;
function init() {
if (typeof(ygLogger) != "undefined") {
ygLogger.init(document.getElementById("logDiv"));
gLogger = new ygLogger("slider.php");
}
//////////////////////////////////////////////////////////////////
verticalSlider = YAHOO.widget.Slider.getVertSlider("vertBGDiv",
"vertHandleDiv", 0, 200);
verticalSlider.onChange = function(offsetFromStart) {
document.getElementById("vertVal").value = offsetFromStart;
document.getElementById("vertBGDiv").title =
"Vertical Slider, value = " + offsetFromStart;
};
verticalSlider.onSlideStart = function() {
//alert("slidestart");
YAHOO.log("VERT slidestart", "warn");
}
verticalSlider.onSlideEnd = function() {
//alert("slideend");
YAHOO.log("VERT slideend", "warn");
}
// verticalSlider.setValue(20);
// verticalSlider.lock();
//verticalSlider.animate = false;
document.getElementById("vertVal").title =
"Type in slider value between 0 and 200.";
//////////////////////////////////////////////////////////////////
horizontalSlider = YAHOO.widget.Slider.getHorizSlider("horizBGDiv",
"horizHandleDiv", 100, 100, 25);
horizontalSlider.onChange = function(offsetFromStart) {
document.getElementById("horizVal").value = offsetFromStart;
document.getElementById("horizBGDiv").title =
"Horizontal Slider, value = " + offsetFromStart;
};
horizontalSlider.onSlideStart = function() {
//alert("slidestart");
YAHOO.log("HORIZ slidestart", "warn");
};
horizontalSlider.onSlideEnd = function() {
// alert("slideend");
YAHOO.log("HORIZ slideend", "warn");
};
// horizontalSlider.lock();
document.getElementById("horizVal").title =
"Type in slider value between -100 and 100. Values " +
"will be rounded to a number divisable by 25."
}
function updateVert() {
var v = parseFloat(document.forms["formV"]["vertVal"].value, 10);
if ( isNaN(v) ) v = 0;
verticalSlider.setValue(Math.round(v));
return false;
}
function updateHoriz() {
var fld = document.forms["formH"]["horizVal"];
var v = parseFloat(fld.value, 10);
if ( isNaN(v) ) v = 0;
horizontalSlider.setValue(Math.round(v));
var newVal = horizontalSlider.getValue();
if (v != newVal) {
fld.value = newVal;
}
return false;
}
window.onload = init;
</script> </body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
Yahoo! UI Library - Slider Widget 3:
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"
xmlns:x2="http://www.w3.org/TR/xhtml2" xmlns:role="http://www.w3.org/2005/01/wai-rdf/GUIRoleTaxonomy#" xmlns:state="http://www.w3.org/2005/07/aaa">
<head> <title>Yahoo! UI Library - Slider Widget</title> <link rel="stylesheet" type="text/css" href="./examples/slider/css/screen.css"> <style type="text/css">
input { font-size: .85em }
#ddPicker {
position: absolute;
background-color: #eeeeee;
top: 200px;
left: 20px;
width: 360px;
height: 240px;
}
#pickerHandle {
background-color: #bbbbbb;
height: 10px;
cursor: move;
}
#hueThumb {
cursor:default;
width:18px;
height:18px;
z-index: 9;
position:absolute;
}
#hueBg {
position:absolute;
left:216px;
height:198px;
width:18px;
background:url(./examples/slider/img/hue.png) no-repeat;
top:18px;
}
#pickerDiv {
position:absolute;
left:10px;
height:187px;
width:188px;
/*
background:url(./examples/slider/img/pickerbg.png) no-repeat;
*/
top:20px;
}
#pickerbg {
position:absolute;
z-index: 1;
top:0px;
left:0px;
}
#selector {
cursor:default;
width:11px;
height:11px;
z-index: 9;
position:absolute;
top:0px;
left:0px;
}
#valdiv { text-align:right; position:absolute; top: 86px; left:246px; }
#rBG {top:180px}
#gBG {top:210px}
#bBG {top:240px}
#swatch {
position:absolute;
left:260px;
top:30px;
height:60px;
width:60px;
border:2px solid #aaaaaa;
}
</style>
<script type="text/javascript" src="./build/yahoo/yahoo.js" ></script> <script type="text/javascript" src="./build/event/event.js" ></script> <script type="text/javascript" src="./build/logger/logger.js" ></script> <script type="text/javascript" src="./build/dom/dom.js" ></script> <script type="text/javascript" src="./build/animation/animation.js" ></script> <script type="text/javascript" src="./build/dragdrop/dragdrop.js" ></script> <script type="text/javascript" src="./examples/slider/js/color.js" ></script> <script type="text/javascript" src="./examples/slider/js/key.js" ></script> <script type="text/javascript" src="./build/slider/slider-debug.js" ></script></head> <body>
Slider Widget
<style type="text/css">
#logButtonHeader input { font-size: 80% }
/* logger default styles */ /* font size is controlled here: default 77% */
- yui-log {position:absolute;top:1em;right:1em;font-size:77%;text-align:left;}
/* width is controlled here: default 31em */ .yui-log {background-color:#AAA;border:1px solid black;font-family:monospace;z-index:9000;} .yui-log p {margin:1px;padding:.1em;} .yui-log button {font-family:monospace;} .yui-log .yui-log-hd {padding:.5em;background-color:#575757;color:#FFF;} /* height is controlled here: default 20em*/ .yui-log .yui-log-bd {width:100%;height:20em;background-color:#FFF;border:1px solid gray;overflow:auto;} .yui-log .yui-log-ft {margin-top:.5em;margin-bottom:1em;} .yui-log .yui-log-ft .yui-log-categoryfilters {} .yui-log .yui-log-ft .yui-log-sourcefilters {width:100%;border-top:1px solid #575757;margin-top:.75em;padding-top:.75em;} .yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;} .yui-log .yui-log-filtergrp {margin-right:.5em;} .yui-log .info {background-color:#A7CC25;} /* A7CC25 green */ .yui-log .warn {background-color:#F58516;} /* F58516 orange */ .yui-log .error {background-color:#E32F0B;} /* E32F0B red */ .yui-log .time {background-color:#A6C9D7;} /* A6C9D7 blue */ .yui-log .window {background-color:#F2E886;} /* F2E886 tan */
</style>
<script type="text/javascript">
YAHOO.example.logApp = function() {
return {
init: function() {
if (YAHOO.widget.Logger) {
var reader = new YAHOO.widget.LogReader( "logDiv",
{ newestOnTop: true, height: "400px" } );
reader._onClickPauseBtn(null, reader);
}
}
};
} ();
YAHOO.util.Event.on(window, "load", YAHOO.example.logApp.init);
</script>
HSV Color Picker
The logger is paused for performance reasons. Click "Resume" to re-enable it.
<img id="pickerbg" src="img/pickerbg.png" alt="" />
<form name="rgbform" onsubmit="return userUpdate()">
R <input name="rval" id="rval" type="text" value="0" size="3" maxlength="3" /> H <input name="hval" id="hval" type="text" value="0" size="3" maxlength="3" />
G <input name="gval" id="gval" type="text" value="0" size="3" maxlength="3" /> S <input name="gsal" id="sval" type="text" value="0" size="3" maxlength="3" />
B <input name="bval" id="bval" type="text" value="0" size="3" maxlength="3" /> V <input name="vval" id="vval" type="text" value="0" size="3" maxlength="3" />
# <input name="hexval" id="hexval" type="text" value="0" size="6" maxlength="6" />
</form>
<script type="text/javascript">
var hue;
var picker;
var dd;
function init() {
hue = YAHOO.widget.Slider.getVertSlider("hueBg", "hueThumb", 0, 180);
hue.onChange = function(newVal) { hueUpdate(newVal); };
picker = YAHOO.widget.Slider.getSliderRegion("pickerDiv", "selector",
0, 180, 0, 180);
picker.onChange = function(newX, newY) { pickerUpdate(newX, newY); };
hueUpdate();
dd = new YAHOO.util.DD("ddPicker");
dd.setHandleElId("pickerHandle");
dd.endDrag = function(e) {
// picker.thumb.resetConstraints();
// hue.thumb.resetConstraints();
};
}
window.onload = init;
function pickerUpdate(newX, newY) {
swatchUpdate();
}
function hueUpdate(newVal) {
var h = (180 - hue.getValue()) / 180;
if (h == 1) { h = 0; }
YAHOO.log("hue " + hue.getValue());
var a = YAHOO.util.Color.hsv2rgb( h, 1, 1);
document.getElementById("pickerDiv").style.backgroundColor =
"rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")";
swatchUpdate();
}
function swatchUpdate() {
var h = (180 - hue.getValue());
if (h == 180) { h = 0; }
document.getElementById("hval").value = (h*2);
h = h / 180;
YAHOO.log("h " + hue.getValue());
var s = picker.getXValue() / 180;
document.getElementById("sval").value = Math.round(s * 100);
YAHOO.log("s " + s);
var v = (180 - picker.getYValue()) / 180;
document.getElementById("vval").value = Math.round(v * 100);
YAHOO.log("v " + v);
var a = YAHOO.util.Color.hsv2rgb( h, s, v );
document.getElementById("swatch").style.backgroundColor =
"rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")";
document.getElementById("rval").value = a[0];
document.getElementById("gval").value = a[1];
document.getElementById("bval").value = a[2];
document.getElementById("hexval").value =
YAHOO.util.Color.rgb2hex(a[0], a[1], a[2]);
}
</script>
</body>
</html>
</source><A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
