removing old version of yui
This commit is contained in:
JT Smith
parent
d1d368dcd1
commit
4fd23d094f
766 changed files with 0 additions and 262230 deletions
|
|
@ -1,215 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>Yahoo! UI Library - Slider Widget</title>
|
||||
<link rel="stylesheet" type="text/css" href="css/screen.css">
|
||||
|
||||
<!-- 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>Slider</h3>
|
||||
<p>
|
||||
This example uses a scale factor to convert pixels into
|
||||
a "real" value.
|
||||
</p>
|
||||
<p>
|
||||
<strong>The logger is paused for performance reasons. Click "Resume" to re-enable it.</strong>
|
||||
</p>
|
||||
|
||||
<div id="vertWrapper">
|
||||
<div
|
||||
tabindex="0"
|
||||
id="vertBGDiv"
|
||||
name="vertBGDiv"
|
||||
title="Vertical Slider">
|
||||
<div id="vertHandleDiv"><img alt="" src="img/vertSlider.png" /></div>
|
||||
</div>
|
||||
|
||||
<div id="vertValueDiv">
|
||||
<form name="formV" id="formV">
|
||||
<input name="vertVal" id="vertVal" type="text" value="0" size="4" maxlength="4" />
|
||||
<input id="vertButton" type="button" value="Update" />
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<input id="re2" type="button" value="removeTicks" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
// YAHOO.widget.SliderThumb.prototype.toString = function () {
|
||||
// return "ASDF";
|
||||
// }
|
||||
|
||||
YAHOO.example.SliderApp = function() {
|
||||
var verticalSlider;
|
||||
|
||||
// The slider can move 0 pixels up
|
||||
var topConstraint = 0;
|
||||
|
||||
// The slider can move 200 pixels down
|
||||
var bottomConstraint = 200;
|
||||
|
||||
// Custom scale factor for converting the pixel offset into a real value
|
||||
var scaleFactor = 1.5;
|
||||
|
||||
return {
|
||||
|
||||
init: function() {
|
||||
|
||||
YAHOO.util.Event.addListener("formV", "submit", this.updateVert);
|
||||
YAHOO.util.Event.addListener("vertButton", "click", this.updateVert);
|
||||
|
||||
verticalSlider = YAHOO.widget.Slider.getVertSlider("vertBGDiv",
|
||||
"vertHandleDiv", topConstraint, bottomConstraint, 20);
|
||||
|
||||
verticalSlider.onChange = function(offsetFromStart) {
|
||||
// use the scale factor to convert the pixel offset into a
|
||||
// real value
|
||||
var actualValue = parseInt(offsetFromStart * scaleFactor, 10);
|
||||
document.getElementById("vertVal").value = actualValue;
|
||||
document.getElementById("vertBGDiv").title =
|
||||
"Vertical Slider, value = " + actualValue;
|
||||
};
|
||||
|
||||
verticalSlider.onSlideStart = function() {
|
||||
YAHOO.log("slidestart");
|
||||
};
|
||||
|
||||
verticalSlider.onSlideEnd = function() {
|
||||
YAHOO.log("slideend");
|
||||
};
|
||||
|
||||
// verticalSlider.unreg();
|
||||
// verticalSlider.backgroundEnabled = false;
|
||||
|
||||
verticalSlider.setValue(20);
|
||||
|
||||
},
|
||||
|
||||
updateVert: function() {
|
||||
var v = parseFloat(document.forms['formV']['vertVal'].value, 10);
|
||||
if ( isNaN(v) ) v = 0;
|
||||
|
||||
// convert the real value into a pixel offset
|
||||
verticalSlider.setValue(Math.round(v/scaleFactor));
|
||||
return false;
|
||||
},
|
||||
|
||||
clearConstraints: function() {
|
||||
verticalSlider.getThumb().clearConstraints();
|
||||
},
|
||||
|
||||
clearTicks: function() {
|
||||
verticalSlider.getThumb().clearTicks();
|
||||
}
|
||||
};
|
||||
} ();
|
||||
|
||||
//YAHOO.example.SliderApp.init();
|
||||
YAHOO.util.Event.addListener(window, "load", YAHOO.example.SliderApp.init,
|
||||
YAHOO.example.SliderApp, true);
|
||||
YAHOO.util.Event.addListener("re2", "click", YAHOO.example.SliderApp.clearTicks);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,282 +0,0 @@
|
|||
html, body { padding: 0px 0px 10px 0px; border: 0; margin: 0; }
|
||||
body { font: normal 11px verdana, sans-serif; color: #333; line-height: 19px; margin: 0; }
|
||||
#container { clear: both; text-align: left; padding: 0 0; margin: 0 0; }
|
||||
#containerTop { height:48px; }
|
||||
#pad { padding: 0px 20px 0px 20px; }
|
||||
a { text-decoration: underline; color: #46546C; }
|
||||
a:hover { text-decoration: underline; color: #4d77c3; }
|
||||
h1, h2, h3, h4, h5, h6 { font-family: palatino, georgia, "Times New Roman", serif; }
|
||||
h2 { font-size:16px; font-weight: bold; margin: 0 0 11px 0; }
|
||||
img { padding: 0; margin: 0; border: 0; }
|
||||
form { padding: 0; margin: 0; }
|
||||
.input { width: 85px; font-size: 9px; }
|
||||
.submit { font-size: 9px; }
|
||||
#pageTitle { position:absolute;top:0px;left:90px; }
|
||||
#pageTitle H3 { font-size:14pt; color:#666666 }
|
||||
#header h1 { float:left; margin-top: 19px; margin-left: 50px; border: 0px solid Green; }
|
||||
#header h1 a { display: block; height: 19px; text-decoration: none; }
|
||||
#header { height: 60px; border: 0px solid #CFFB00; margin-bottom:0px; padding: 4px; }
|
||||
#header h4 { position: relative; float: right; font-size:11px; letter-spacing: 1px; top: 10px; right: 30px; line-height: 15px; padding: 0 0 0 13px; margin: 0px; }
|
||||
#content { float: left; width: 550px; padding:10px 0px; border: 0px solid #C13B00; margin-left: 50px; top:0px; }
|
||||
#content h1 { font-size:18px; margin:0px; }
|
||||
.newsItem { padding-bottom:25px; margin-bottom:25px; overflow: hidden; }
|
||||
.newsItem h3 { font-size:18px; margin:0px; }
|
||||
.newsItem h3 a { text-decoration:none; color:#6A7981; }
|
||||
.newsItem h3 a:hover { text-decoration:underline; color:#000; }
|
||||
.newsItemFooter, .newsItemFooter a { font-size:9px; color:#999; font-weight:normal; }
|
||||
.newsItemFooter a:hover { color:#222; }
|
||||
#footer { padding: 0px 0px 20px 0px; clear: both; color: #999; border-top:0px #CCC solid; margin:0px 26px 0px 30px }
|
||||
#footer a { color: #999; }
|
||||
#footer a:hover { color: #222; }
|
||||
#footerContainer { clear: both; }
|
||||
#rightbar {
|
||||
float: right;
|
||||
padding: 5px 5px 5px 5px;
|
||||
width: 304px; /* for IE5-Win */
|
||||
width: 300px;
|
||||
border: 1px solid #333333;
|
||||
position:relative;
|
||||
right:48px;
|
||||
top:0px;
|
||||
background-color:#eeeeee;
|
||||
}
|
||||
#rightbar h2, #rightbar h3 {
|
||||
font-size:12px;
|
||||
text-align:center;
|
||||
color:#FFF;
|
||||
|
||||
border-bottom:#848B8F solid 1px;
|
||||
border-right:#949B9F solid 1px;
|
||||
border-top:#eee solid 1px;
|
||||
padding:1px;
|
||||
margin:0px 0px 0px 0px;
|
||||
background-color:#383e45;
|
||||
width:100%;
|
||||
}
|
||||
#rightbar h2 a, #rightbar h3 a {
|
||||
font-size:12px;
|
||||
color:#FFF;
|
||||
text-decoration:none;
|
||||
display:block;
|
||||
}
|
||||
#rightBarPad {
|
||||
margin:0px;
|
||||
}
|
||||
#sidenav {
|
||||
margin: 0px 0;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
#sidenav ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
|
||||
}
|
||||
#sidenav ul li {
|
||||
list-style: none;
|
||||
list-style-image: none !important;
|
||||
margin: 0;
|
||||
padding:0;
|
||||
}
|
||||
#sidenav ul li a {
|
||||
text-decoration: none;
|
||||
padding: 5px 0px 5px 0px;
|
||||
color: #4C5250;
|
||||
display: block;
|
||||
width: 187px;
|
||||
font-size: 11px !important;
|
||||
font-weight: bold;
|
||||
border-top: 1px solid #ddd;
|
||||
border-bottom: 1px solid #aaa;
|
||||
border-left: 1px solid #C7CBD0;
|
||||
text-shadow: -2px -2px 0px #FFF;
|
||||
}
|
||||
|
||||
#sidenav ul li a:hover {
|
||||
|
||||
/* background: url(../img/navHover2.png) top no-repeat; */
|
||||
border-top: 1px solid #A1AAAF;
|
||||
border-bottom: 1px solid #CCC;
|
||||
border-right: 0px solid #C3C7CA;
|
||||
border-left: 1px solid #C3C7CA;
|
||||
text-shadow: 4px 4px 0px #C3C7CA;
|
||||
}
|
||||
|
||||
|
||||
#ylogo { position:absolute;top:5px;left:5px; }
|
||||
|
||||
/* slider */
|
||||
|
||||
.dragPanel {
|
||||
position: relative;
|
||||
background-color: #eeeeee;
|
||||
margin: 4px;
|
||||
/*
|
||||
top: 10px;
|
||||
left: 20px;
|
||||
*/
|
||||
width: 260px;
|
||||
height: 180px;
|
||||
}
|
||||
|
||||
.dragPanel h4 {
|
||||
background-color: #bbbbbb;
|
||||
height: 10px;
|
||||
margin: 0px;
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
|
||||
input { font-size: .85em }
|
||||
.thumb {
|
||||
cursor:default;
|
||||
width:18px;
|
||||
height:18px;
|
||||
z-index: 9;
|
||||
position:absolute;
|
||||
}
|
||||
|
||||
.bg {
|
||||
position:absolute;
|
||||
left:10px;
|
||||
height:18px;
|
||||
width:146px;
|
||||
border: 0px solid #aaaaaa;
|
||||
}
|
||||
|
||||
.bg span, .bg p {
|
||||
cursor:default;
|
||||
position: relative;
|
||||
font-size: 2px;
|
||||
overflow: hidden;
|
||||
color: #aaaaaa;
|
||||
top: 4px;
|
||||
height: 10px;
|
||||
width: 4px;
|
||||
display: block;
|
||||
float:left;
|
||||
}
|
||||
|
||||
.bg span {
|
||||
border-top:1px solid #cccccc;
|
||||
border-bottom:1px solid #cccccc;
|
||||
}
|
||||
|
||||
.bg .lb {
|
||||
border-left:1px solid #cccccc;
|
||||
}
|
||||
|
||||
.bg .rb {
|
||||
border-right:1px solid #cccccc;
|
||||
}
|
||||
#valdiv { position:absolute; top: 100px; left:10px; }
|
||||
|
||||
#rBG {top:30px}
|
||||
#gBG {top:50px}
|
||||
#bBG {top:70px}
|
||||
|
||||
#rgbSwatch {
|
||||
position:absolute;
|
||||
left:160px;
|
||||
top:34px;
|
||||
height:50px;
|
||||
width:50px;
|
||||
border:1px solid #aaaaaa;
|
||||
}
|
||||
|
||||
#rgbPanel {
|
||||
/*
|
||||
top: 400px;
|
||||
left: 20px;
|
||||
*/
|
||||
width: 360px;
|
||||
height: 240px;
|
||||
}
|
||||
|
||||
/* picker */
|
||||
|
||||
#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;
|
||||
}
|
||||
|
||||
#pickerSwatch {
|
||||
position:absolute;
|
||||
left:260px;
|
||||
top:30px;
|
||||
height:60px;
|
||||
width:60px;
|
||||
border:2px solid #aaaaaa;
|
||||
}
|
||||
|
||||
#pickervaldiv { text-align:right; position:absolute; top: 86px; left:246px; }
|
||||
|
||||
#pickerPanel {
|
||||
/*
|
||||
top: 200px;
|
||||
left: 20px;
|
||||
*/
|
||||
width: 360px;
|
||||
height: 240px;
|
||||
}
|
||||
|
||||
/* standard horizontal and vertical sliders */
|
||||
#horizHandleDiv {
|
||||
position:absolute;
|
||||
left: 100px; /* the default position is the center of the bg */
|
||||
top: 8px; /* force the image down a bit */
|
||||
cursor:default;
|
||||
width:18px;
|
||||
height:18px;
|
||||
}
|
||||
|
||||
#horizWrapper {position:relative; margin-left:60px;width:218px;float:left;}
|
||||
#horizBGDiv {position:relative; top:60px; background:url(../img/horizBg.png) no-repeat; height:26px; width:218px;zindex:5 }
|
||||
#horizValueDiv { position:relative; top: 70px; left:66px; }
|
||||
|
||||
#vertWrapper {position:relative; width:90px;float:left}
|
||||
#vertHandleDiv { cursor:default; width:20px; height:18px; position:absolute; }
|
||||
#vertBGDiv {position:relative;top:0px; float:left; width:26px; left:10px;background:url(../img/vertBg.png) no-repeat;height:218px; }
|
||||
#vertValueDiv { position:relative; top: 100px; left:40px; }
|
||||
|
||||
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 172 B |
Binary file not shown.
|
Before Width: | Height: | Size: 197 B |
Binary file not shown.
|
Before Width: | Height: | Size: 203 B |
Binary file not shown.
|
Before Width: | Height: | Size: 416 B |
Binary file not shown.
|
Before Width: | Height: | Size: 519 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 705 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 875 B |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 385 B |
Binary file not shown.
|
Before Width: | Height: | Size: 2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 78 B |
Binary file not shown.
|
Before Width: | Height: | Size: 192 B |
Binary file not shown.
|
Before Width: | Height: | Size: 572 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 481 B |
|
|
@ -1,372 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W4C//DTD XHTML 1.0 Strict//EN"
|
||||
"http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
|
||||
<html lang="en" xml:lang="en" xmlns="http://www.w4.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" ></link>
|
||||
|
||||
<!-- 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>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>
|
||||
<strong>The logger is paused for performance reasons. Click "Resume" to re-enable it.</strong>
|
||||
<p>
|
||||
<!--
|
||||
<a href="javascript:verticalSlider.lock()">Lock</a>
|
||||
<a href="javascript:verticalSlider.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"
|
||||
onkeydown="return handleVertSliderKey(this, YAHOO.util.Event.getEvent(event))"
|
||||
onkeypress="YAHOO.util.Event.preventDefault(YAHOO.util.Event.getEvent(event))" >
|
||||
<div id="vertHandleDiv"><img alt="" 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"
|
||||
onkeydown="return handleHorizSliderKey(this, YAHOO.util.Event.getEvent(event))"
|
||||
onkeypress="YAHOO.util.Event.preventDefault(YAHOO.util.Event.getEvent(event))" >
|
||||
<div id="horizHandleDiv" ><img alt="" 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>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
//<![CDATA[
|
||||
function handleHorizSliderKey(slider, ev) {
|
||||
if (gLogger) gLogger.debug("horizontal slider keypress");
|
||||
|
||||
// var valueNow = parseInt(slider.getAttributeNS("http://www.w3.org/2005/07/aaa", "valuenow"), 10);
|
||||
|
||||
var valueNow = horizontalSlider.getValue();
|
||||
|
||||
// var valueMin = parseInt(slider.getAttributeNS("http://www.w3.org/2005/07/aaa", "valuemin"), 10);
|
||||
// var valueMax = parseInt(slider.getAttributeNS("http://www.w3.org/2005/07/aaa", "valuemax"), 10);
|
||||
|
||||
var valueMin = horizontalSlider.thumb.rightConstraint;
|
||||
var valueMax = horizontalSlider.thumb.leftConstraint;
|
||||
|
||||
var delta = 0;
|
||||
|
||||
var kc = ev.keyCode;
|
||||
|
||||
if (gLogger) gLogger.debug("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;
|
||||
|
||||
horizontalSlider.setValue(valueNow, true);
|
||||
|
||||
if (slider.setAttributeNS) {
|
||||
slider.setAttributeNS("http://www.w3.org/2005/07/aaa",
|
||||
"valuenow",
|
||||
valueNow);
|
||||
}
|
||||
|
||||
// displaySlider(slider);
|
||||
|
||||
YAHOO.util.Event.stopEvent(ev);
|
||||
return false;
|
||||
}
|
||||
|
||||
function handleVertSliderKey(slider, ev) {
|
||||
if (gLogger) gLogger.debug("vertical slider keypress");
|
||||
|
||||
// var valueNow = parseInt(slider.getAttributeNS("http://www.w3.org/2005/07/aaa", "valuenow"), 10);
|
||||
|
||||
var valueNow = verticalSlider.getValue();
|
||||
|
||||
// var valueMin = parseInt(slider.getAttributeNS("http://www.w3.org/2005/07/aaa", "valuemin"), 10);
|
||||
// var valueMax = parseInt(slider.getAttributeNS("http://www.w3.org/2005/07/aaa", "valuemax"), 10);
|
||||
|
||||
var valueMin = verticalSlider.thumb.topConstraint;
|
||||
var valueMax = verticalSlider.thumb.bottomConstraint;
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
if (slider.setAttributeNS) {
|
||||
slider.setAttributeNS("http://www.w3.org/2005/07/aaa",
|
||||
"valuenow", valueNow);
|
||||
}
|
||||
|
||||
// displaySlider(slider);
|
||||
verticalSlider.setValue(valueNow, true);
|
||||
|
||||
YAHOO.util.Event.stopEvent(ev);
|
||||
return false;
|
||||
}
|
||||
|
||||
var verticalSlider, horizontalSlider;
|
||||
var gLogger;
|
||||
function init() {
|
||||
if (typeof(ygLogger) != "undefined") {
|
||||
ygLogger.init(document.getElementById("logDiv"));
|
||||
gLogger = new ygLogger("slider.php");
|
||||
}
|
||||
|
||||
//////////////////////////////////////////////////////////////////
|
||||
|
||||
verticalSlider = YAHOO.widget.Slider.getVertSlider("vertBGDiv",
|
||||
"vertHandleDiv", 0, 200);
|
||||
|
||||
verticalSlider.onChange = function(offsetFromStart) {
|
||||
document.getElementById("vertVal").value = offsetFromStart;
|
||||
document.getElementById("vertBGDiv").title =
|
||||
"Vertical Slider, value = " + offsetFromStart;
|
||||
};
|
||||
|
||||
verticalSlider.onSlideStart = function() {
|
||||
//alert("slidestart");
|
||||
YAHOO.log("VERT slidestart", "warn");
|
||||
}
|
||||
|
||||
verticalSlider.onSlideEnd = function() {
|
||||
//alert("slideend");
|
||||
YAHOO.log("VERT slideend", "warn");
|
||||
}
|
||||
|
||||
// verticalSlider.setValue(20);
|
||||
// verticalSlider.lock();
|
||||
//verticalSlider.animate = false;
|
||||
|
||||
|
||||
|
||||
document.getElementById("vertVal").title =
|
||||
"Type in slider value between 0 and 200.";
|
||||
|
||||
|
||||
//////////////////////////////////////////////////////////////////
|
||||
|
||||
horizontalSlider = YAHOO.widget.Slider.getHorizSlider("horizBGDiv",
|
||||
"horizHandleDiv", 100, 100, 25);
|
||||
|
||||
horizontalSlider.onChange = function(offsetFromStart) {
|
||||
document.getElementById("horizVal").value = offsetFromStart;
|
||||
document.getElementById("horizBGDiv").title =
|
||||
"Horizontal Slider, value = " + offsetFromStart;
|
||||
};
|
||||
|
||||
horizontalSlider.onSlideStart = function() {
|
||||
//alert("slidestart");
|
||||
YAHOO.log("HORIZ slidestart", "warn");
|
||||
};
|
||||
|
||||
horizontalSlider.onSlideEnd = function() {
|
||||
// alert("slideend");
|
||||
YAHOO.log("HORIZ slideend", "warn");
|
||||
};
|
||||
|
||||
|
||||
// horizontalSlider.lock();
|
||||
|
||||
document.getElementById("horizVal").title =
|
||||
"Type in slider value between -100 and 100. Values " +
|
||||
"will be rounded to a number divisable by 25."
|
||||
}
|
||||
|
||||
function updateVert() {
|
||||
var v = parseFloat(document.forms['formV']['vertVal'].value, 10);
|
||||
if ( isNaN(v) ) v = 0;
|
||||
verticalSlider.setValue(Math.round(v));
|
||||
return false;
|
||||
}
|
||||
|
||||
function updateHoriz() {
|
||||
var fld = document.forms["formH"]["horizVal"];
|
||||
var v = parseFloat(fld.value, 10);
|
||||
if ( isNaN(v) ) v = 0;
|
||||
horizontalSlider.setValue(Math.round(v));
|
||||
var newVal = horizontalSlider.getValue();
|
||||
if (v != newVal) {
|
||||
fld.value = newVal;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
window.onload = init;
|
||||
//]]>
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
101
www/extras/yui/examples/slider/js/color.js
vendored
101
www/extras/yui/examples/slider/js/color.js
vendored
|
|
@ -1,101 +0,0 @@
|
|||
/* Copyright (c) 2006 Yahoo! Inc. All rights reserved. */
|
||||
|
||||
YAHOO.util.Color = new function() {
|
||||
|
||||
// Adapted from http://www.easyrgb.com/math.html
|
||||
// hsv values = 0 - 1
|
||||
// rgb values 0 - 255
|
||||
this.hsv2rgb = function (h, s, v) {
|
||||
var r, g, b;
|
||||
if ( s == 0 ) {
|
||||
r = v * 255;
|
||||
g = v * 255;
|
||||
b = v * 255;
|
||||
} else {
|
||||
|
||||
// h must be < 1
|
||||
var var_h = h * 6;
|
||||
if ( var_h == 6 ) {
|
||||
var_h = 0;
|
||||
}
|
||||
|
||||
//Or ... var_i = floor( var_h )
|
||||
var var_i = Math.floor( var_h );
|
||||
var var_1 = v * ( 1 - s );
|
||||
var var_2 = v * ( 1 - s * ( var_h - var_i ) );
|
||||
var var_3 = v * ( 1 - s * ( 1 - ( var_h - var_i ) ) );
|
||||
|
||||
if ( var_i == 0 ) {
|
||||
var_r = v;
|
||||
var_g = var_3;
|
||||
var_b = var_1;
|
||||
} else if ( var_i == 1 ) {
|
||||
var_r = var_2;
|
||||
var_g = v;
|
||||
var_b = var_1;
|
||||
} else if ( var_i == 2 ) {
|
||||
var_r = var_1;
|
||||
var_g = v;
|
||||
var_b = var_3
|
||||
} else if ( var_i == 3 ) {
|
||||
var_r = var_1;
|
||||
var_g = var_2;
|
||||
var_b = v;
|
||||
} else if ( var_i == 4 ) {
|
||||
var_r = var_3;
|
||||
var_g = var_1;
|
||||
var_b = v;
|
||||
} else {
|
||||
var_r = v;
|
||||
var_g = var_1;
|
||||
var_b = var_2
|
||||
}
|
||||
|
||||
r = var_r * 255 //rgb results = 0 ÷ 255
|
||||
g = var_g * 255
|
||||
b = var_b * 255
|
||||
|
||||
}
|
||||
return [Math.round(r), Math.round(g), Math.round(b)];
|
||||
};
|
||||
|
||||
this.rgb2hex = function (r,g,b) {
|
||||
return this.toHex(r) + this.toHex(g) + this.toHex(b);
|
||||
};
|
||||
|
||||
this.hexchars = "0123456789ABCDEF";
|
||||
|
||||
this.toHex = function(n) {
|
||||
n = n || 0;
|
||||
n = parseInt(n, 10);
|
||||
if (isNaN(n)) n = 0;
|
||||
n = Math.round(Math.min(Math.max(0, n), 255));
|
||||
|
||||
return this.hexchars.charAt((n - n % 16) / 16) + this.hexchars.charAt(n % 16);
|
||||
};
|
||||
|
||||
this.toDec = function(hexchar) {
|
||||
return this.hexchars.indexOf(hexchar.toUpperCase());
|
||||
};
|
||||
|
||||
this.hex2rgb = function(str) {
|
||||
var rgb = [];
|
||||
rgb[0] = (this.toDec(str.substr(0, 1)) * 16) +
|
||||
this.toDec(str.substr(1, 1));
|
||||
rgb[1] = (this.toDec(str.substr(2, 1)) * 16) +
|
||||
this.toDec(str.substr(3, 1));
|
||||
rgb[2] = (this.toDec(str.substr(4, 1)) * 16) +
|
||||
this.toDec(str.substr(5, 1));
|
||||
// gLogger.debug("hex2rgb: " + str + ", " + rgb.toString());
|
||||
return rgb;
|
||||
};
|
||||
|
||||
this.isValidRGB = function(a) {
|
||||
if ((!a[0] && a[0] !=0) || isNaN(a[0]) || a[0] < 0 || a[0] > 255) return false;
|
||||
if ((!a[1] && a[1] !=0) || isNaN(a[1]) || a[1] < 0 || a[1] > 255) return false;
|
||||
if ((!a[2] && a[2] !=0) || isNaN(a[2]) || a[2] < 0 || a[2] > 255) return false;
|
||||
|
||||
return true;
|
||||
};
|
||||
}
|
||||
|
||||
34
www/extras/yui/examples/slider/js/key.js
vendored
34
www/extras/yui/examples/slider/js/key.js
vendored
|
|
@ -1,34 +0,0 @@
|
|||
/* Copyright (c) 2006 Yahoo! Inc. All rights reserved. */
|
||||
|
||||
YAHOO.util.Key = new function() {
|
||||
// this.logger = new ygLogger("ygEventUtil");
|
||||
// DOM key constants
|
||||
this.DOM_VK_UNDEFINED = 0x0;
|
||||
this.DOM_VK_RIGHT_ALT = 0x12;
|
||||
this.DOM_VK_LEFT_ALT = 0x12;
|
||||
this.DOM_VK_LEFT_CONTROL = 0x11;
|
||||
this.DOM_VK_RIGHT_CONTROL = 0x11;
|
||||
this.DOM_VK_LEFT_SHIFT = 0x10;
|
||||
this.DOM_VK_RIGHT_SHIFT = 0x10;
|
||||
this.DOM_VK_META = 0x9D;
|
||||
this.DOM_VK_BACK_SPACE = 0x08;
|
||||
this.DOM_VK_CAPS_LOCK = 0x14;
|
||||
this.DOM_VK_DELETE = 0x7F;
|
||||
this.DOM_VK_END = 0x23;
|
||||
this.DOM_VK_ENTER = 0x0D;
|
||||
this.DOM_VK_ESCAPE = 0x1B;
|
||||
this.DOM_VK_HOME = 0x24;
|
||||
this.DOM_VK_NUM_LOCK = 0x90;
|
||||
this.DOM_VK_PAUSE = 0x13;
|
||||
this.DOM_VK_PRINTSCREEN = 0x9A;
|
||||
this.DOM_VK_SCROLL_LOCK = 0x91;
|
||||
this.DOM_VK_SPACE = 0x20;
|
||||
this.DOM_VK_TAB = 0x09;
|
||||
this.DOM_VK_LEFT = 0x25;
|
||||
this.DOM_VK_RIGHT = 0x27;
|
||||
this.DOM_VK_UP = 0x26;
|
||||
this.DOM_VK_DOWN = 0x28;
|
||||
this.DOM_VK_PAGE_DOWN = 0x22;
|
||||
this.DOM_VK_PAGE_UP = 0x21;
|
||||
};
|
||||
|
||||
15
www/extras/yui/examples/slider/js/log.js
vendored
15
www/extras/yui/examples/slider/js/log.js
vendored
|
|
@ -1,15 +0,0 @@
|
|||
// Adapter for YAHOO.widget.Logger
|
||||
|
||||
var ygLogger = function(module) {
|
||||
return new YAHOO.widget.LogWriter(module);
|
||||
};
|
||||
|
||||
YAHOO.widget.LogWriter.prototype.debug = function() {
|
||||
this.log.apply(this, arguments);
|
||||
};
|
||||
|
||||
ygLogger.init = function(div) {
|
||||
new YAHOO.widget.LogReader(div, {
|
||||
height: "400px"
|
||||
});
|
||||
};
|
||||
1131
www/extras/yui/examples/slider/js/logger.js
vendored
1131
www/extras/yui/examples/slider/js/logger.js
vendored
File diff suppressed because it is too large
Load diff
|
|
@ -1,429 +0,0 @@
|
|||
<!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">
|
||||
|
||||
.dragPanel {
|
||||
position: absolute;
|
||||
background-color: #eeeeee;
|
||||
top: 200px;
|
||||
left: 20px;
|
||||
width: 320px;
|
||||
height: 180px;
|
||||
}
|
||||
|
||||
.dragPanel h4 {
|
||||
background-color: #bbbbbb;
|
||||
height: 10px;
|
||||
margin: 0px;
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
|
||||
input { font-size: 85%}
|
||||
.thumb {
|
||||
cursor:default;
|
||||
width:18px;
|
||||
height:18px;
|
||||
z-index: 9;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.bg {
|
||||
position:absolute;
|
||||
left:10px;
|
||||
height:18px;
|
||||
width:146px;
|
||||
border: 0px solid #aaaaaa;
|
||||
}
|
||||
|
||||
.bg span, .bg p {
|
||||
cursor:default;
|
||||
position: relative;
|
||||
font-size: 2px;
|
||||
overflow: hidden;
|
||||
color: #aaaaaa;
|
||||
top: 4px;
|
||||
height: 10px;
|
||||
width: 4px;
|
||||
display: block;
|
||||
float:left;
|
||||
}
|
||||
|
||||
.bg span {
|
||||
border-top:1px solid #cccccc;
|
||||
border-bottom:1px solid #cccccc;
|
||||
}
|
||||
|
||||
.bg .lb {
|
||||
border-left:1px solid #cccccc;
|
||||
}
|
||||
|
||||
.bg .rb {
|
||||
border-right:1px solid #cccccc;
|
||||
}
|
||||
#valdiv { position:absolute; top: 100px; left:10px; }
|
||||
|
||||
#rBG {top:30px}
|
||||
#gBG {top:50px}
|
||||
#bBG {top:70px}
|
||||
|
||||
#swatch {
|
||||
position:absolute;
|
||||
left:160px;
|
||||
top:34px;
|
||||
height:50px;
|
||||
width:50px;
|
||||
border:1px 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>RGB Slider</h3>
|
||||
<p>
|
||||
The RGB slider implements three slider controls to generate a
|
||||
RGB color. The background color of each slider is also
|
||||
dynamically modified to reflect the colors that could be
|
||||
generated by moving a single slider.
|
||||
</p>
|
||||
<strong>The logger is paused for performance reasons. Click "Resume" to re-enable it.</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="ddRGB" class="dragPanel">
|
||||
<h4 id="pickerHandle"> </h4>
|
||||
<div id="rBG" class="bg">
|
||||
<div id="rthumb" class="thumb"><img src="img/vline.png" /></div>
|
||||
</div>
|
||||
|
||||
<div id="gBG" class="bg">
|
||||
<div id="gthumb" class="thumb"><img src="img/vline.png" /></div>
|
||||
</div>
|
||||
|
||||
<div id="bBG" class="bg">
|
||||
<div id="bthumb" class="thumb"><img src="img/vline.png" /></div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="valdiv">
|
||||
<form name="rgbform" onsubmit="return userUpdate()">
|
||||
<table border="0">
|
||||
<tr>
|
||||
<td>
|
||||
RGB
|
||||
</td>
|
||||
<td>
|
||||
<input name="rval" id="rval" type="text" value="0" size="4" maxlength="4" />
|
||||
<input name="gval" id="gval" type="text" value="0" size="4" maxlength="4" />
|
||||
<input name="bval" id="bval" type="text" value="0" size="4" maxlength="4" />
|
||||
</td>
|
||||
<td>
|
||||
<input type="button" value="Update" onclick="userUpdate()" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Hex: #
|
||||
</td>
|
||||
<td>
|
||||
<input name="hexval" id="hexval" type="text" value="" size="6" maxlength="6" />
|
||||
</td>
|
||||
<td>
|
||||
<input type="button" value="Update" onclick="userUpdate(true)" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input type="button" value="Reset" onclick="userReset()" />
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="swatch"> </div>
|
||||
</div>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
var r, g, b;
|
||||
var dd;
|
||||
|
||||
function init() {
|
||||
rgbInit();
|
||||
}
|
||||
|
||||
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();
|
||||
|
||||
dd = new YAHOO.util.DD("ddRGB");
|
||||
dd.setHandleElId("pickerHandle");
|
||||
}
|
||||
|
||||
window.onload = init;
|
||||
|
||||
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("swatch").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) {
|
||||
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);
|
||||
YAHOO.log("setValue, r: " + v);
|
||||
r.setValue(Math.round(v) / 2);
|
||||
|
||||
v = parseFloat(f['gval'].value);
|
||||
v = ( isNaN(v) ) ? 0 : Math.round(v);
|
||||
YAHOO.log("setValue, g: " + g);
|
||||
g.setValue(Math.round(v) / 2);
|
||||
|
||||
v = parseFloat(f['bval'].value);
|
||||
v = ( isNaN(v) ) ? 0 : Math.round(v);
|
||||
YAHOO.log("setValue, b: " + b);
|
||||
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);
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,342 +0,0 @@
|
|||
<!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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue