GUI Components
JavaScript DHTML
-
Home
-
JavaScript DHTML
-
GUI Components
- Yahoo! UI Library - Slider Widget 3
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
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">
Yahoo! UI Library - Slider Widget
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;
}
Slider Widget
#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 */
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);
HSV Color Picker
The logger is paused for performance reasons. Click "Resume" to re-enable it.
R
H
G
S
B
V
#
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]);
}