|
<!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>
<div id="pageTitle"><h3>Drag and Drop - Slider Widgets</h3></div>
<div id="container">
<div id="containerTop">
<div id="header"><img src="./examples/dragdrop/img/logo.gif" vspace="4" hspace="4" /></div>
<div id="main">
<div id="content">
<div class="newsItem">
<h3>Basic Sliders</h3>
<p>
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.
</p>
<!--
<p>
<a href="javascript:slider1.lock()">Lock</a>
<a href="javascript:slider1.unlock()">Unlock</a>
</p>
-->
<div id="vertWrapper">
<div
id="vertBGDiv"
name="vertBGDiv"
tabindex="0"
x2:role="role:slider"
state:valuenow="0"
state:valuemin="0"
state:valuemax="200"
title="Vertical Slider"
onkeypress="return handleVertSliderKey(this, YAHOO.util.Event.getEvent(event))"
>
<div id="vertHandleDiv"><img src="./examples/dragdrop/img/vertSlider.png"></div>
</div>
<div id="vertValueDiv">
<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>
</div>
</div>
<div id="horizWrapper">
<div
id="horizBGDiv"
name="horizBGDiv"
tabindex="0"
x2:role="role:slider"
state:valuenow="0"
state:valuemin="-100"
state:valuemax="100"
title="Horizontal Slider"
onkeypress="return handleHorizSliderKey(this, YAHOO.util.Event.getEvent(event))"
>
<div id="horizHandleDiv" ><img src="./examples/dragdrop/img/horizSlider.png"></div>
</div>
<div id="horizValueDiv">
<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>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="content">
<h3>Color Picker</h3>
<p>
Implements a slider region and a vertical slider to implement an HSV color
picker.
</p>
<div id="pickerPanel" class="dragPanel">
<h4 id="pickerHandle"> </h4>
<div id="pickerDiv">
<img id="pickerbg" src="./examples/dragdrop/img/pickerbg.png" alt="">
<div id="selector"><img src="./examples/dragdrop/img/select.gif"></div>
</div>
<div id="hueBg">
<div id="hueThumb"><img src="./examples/dragdrop/img/hline.png"></div>
</div>
<div id="pickervaldiv">
<form name="pickerform" onsubmit="return pickerUpdate()">
<br />
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" />
<br />
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" />
<br />
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" />
<br />
<br />
# <input name="pickerhexval" id="pickerhexval" type="text" value="0" size="6" maxlength="6" />
<br />
</form>
</div>
<div id="pickerSwatch"> </div>
</div>
</div>
</div>
</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>
<!--[if gte IE 5.5000]>
<script type="text/javascript">
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher.
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}
YAHOO.util.Event.addListener(window, "load", correctPNG);
</script>
<![endif]-->
</body>
</html>
|
yui.zip( 3,714 k)