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
342 lines
9.5 KiB
HTML
342 lines
9.5 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">
|
|
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(img/hue.png) no-repeat;
|
|
top:18px;
|
|
}
|
|
|
|
#pickerDiv {
|
|
position:absolute;
|
|
left:10px;
|
|
height:187px;
|
|
width:188px;
|
|
/*
|
|
background:url(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="js/color.js" ></script>
|
|
<script type="text/javascript" src="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="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">
|
|
<h3>Links</h3>
|
|
<div id="linkage">
|
|
<ul>
|
|
<li><a href="index.html?mode=dist">Basic Sliders</a></li>
|
|
<li><a href="basic.html?mode=dist">Scale Factor</a></li>
|
|
<li><a href="rgb.html?mode=dist">RGB Slider</a></li>
|
|
<li><a href="rgb2.html?mode=dist">Color Picker</a></li>
|
|
<!--
|
|
<li><a href="slider.html?mode=dist">All on one page</a></li>
|
|
-->
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
//<![CDATA[
|
|
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="img/select.gif" /></div>
|
|
</div>
|
|
|
|
<div id="hueBg">
|
|
<div id="hueThumb"><img src="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>
|