4f68a0933c
fixed the resizable text area with IE problem fixed the ad space with IE problem merged the 7.2.0 and 7.1.4 change logs
576 lines
16 KiB
HTML
576 lines
16 KiB
HTML
<!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="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="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="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="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="img/pickerbg.png" alt="">
|
|
<div id="selector"><img src="img/select.gif"></div>
|
|
</div>
|
|
|
|
<div id="hueBg">
|
|
<div id="hueThumb"><img src="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="js/color.js" ></script>
|
|
<script type="text/javascript" src="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>
|