Mega Code Archive
Yahoo! UI Library - Slider Widget 3
<![CDATA[
<!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>
<!-- Nav and logger start -->
<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>
<div id="pageTitle"><h3>Slider Widget</h3></div>
<div id="container">
<div id="containerTop">
<div id="header"><img id="ylogo" src="./examples/slider/img/logo.gif" /></div>
<div id="main">
<!-- Nav and logger start -->
<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>
<div id="rightbar">
<div id="rightBarPad">
<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>
<div id="logDiv"></div>
</div>
</div>
<!-- Nav and logger end -->
<div id="content">
<div class="newsItem">
<h3>HSV Color Picker</h3>
<p> </p>
<strong>The logger is paused for performance reasons. Click "Resume" to re-enable it.</strong>
</div>
</div>
</div>
</div>
</div>
<div id="ddPicker">
<div id="pickerHandle"> </div>
<div id="pickerDiv">
<img id="pickerbg" src="img/pickerbg.png" alt="" />
<div id="selector"><img src="./examples/slider/img/select.gif" /></div>
</div>
<div id="hueBg">
<div id="hueThumb"><img src="./examples/slider/img/hline.png" /></div>
</div>
<div id="valdiv">
<form name="rgbform" onsubmit="return userUpdate()">
<br />
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" />
<br />
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" />
<br />
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" />
<br />
<br />
# <input name="hexval" id="hexval" type="text" value="0" size="6" maxlength="6" />
<br />
</form>
</div>
<div id="swatch"> </div>
</div>
<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>
<!--[if gte IE 5.5000]>
<script type="text/javascript">
// yuck.
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)
]]>