upgraded yui to 2.2.2 and yui-ext to 1.0.1a
This commit is contained in:
JT Smith
parent
4d9af2c691
commit
547ced6500
1992 changed files with 645731 additions and 0 deletions
221
www/extras/yui/examples/slider/basic.html
Normal file
221
www/extras/yui/examples/slider/basic.html
Normal file
|
|
@ -0,0 +1,221 @@
|
|||
<!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"></link>
|
||||
|
||||
<!-- Nav and logger start -->
|
||||
|
||||
<script type="text/javascript" src="../../build/yahoo/yahoo-min.js" ></script>
|
||||
<script type="text/javascript" src="../../build/event/event-min.js" ></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom-min.js" ></script>
|
||||
<script type="text/javascript" src="../../build/logger/logger-min.js" ></script>
|
||||
<script type="text/javascript" src="../../build/dragdrop/dragdrop-min.js" ></script>
|
||||
|
||||
<script type="text/javascript" src="../../build/animation/animation-min.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="dual.html?mode=dist">Dual Thumb Slider</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="-1"
|
||||
id="vertBGDiv"
|
||||
title="Vertical Slider">
|
||||
<div id="vertHandleDiv"><img alt="" src="img/vertSlider.png" /></div>
|
||||
</div>
|
||||
|
||||
<div id="vertValueDiv">
|
||||
<form name="formV" id="formV">
|
||||
<input autocomplete="off" 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.example.SliderApp = function() {
|
||||
var Event = YAHOO.util.Event;
|
||||
var Dom = YAHOO.util.Dom;
|
||||
var Key = YAHOO.util.Key;
|
||||
var slider, bg="vertBGDiv", thumb="vertHandleDiv";
|
||||
|
||||
// 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;
|
||||
|
||||
// The amount the slider moves when the value is changed with the arrow
|
||||
// keys
|
||||
var keyIncrement = 25;
|
||||
|
||||
return {
|
||||
|
||||
init: function() {
|
||||
|
||||
Event.on("formV", "submit", this.updateVert);
|
||||
Event.on("vertButton", "click", this.updateVert);
|
||||
|
||||
slider = YAHOO.widget.Slider.getVertSlider(bg,
|
||||
thumb, topConstraint, bottomConstraint, 20);
|
||||
|
||||
slider.subscribe("change", this.updateUI);
|
||||
|
||||
slider.subscribe("slideStart", function() {
|
||||
YAHOO.log("slideStart fired", "warn");
|
||||
});
|
||||
|
||||
slider.subscribe("slideEnd", function() {
|
||||
YAHOO.log("slideEnd fired", "warn");
|
||||
});
|
||||
|
||||
slider.setValue(20);
|
||||
|
||||
},
|
||||
|
||||
updateUI: function(offsetFromStart) {
|
||||
// use the scale factor to convert the pixel offset into a
|
||||
// real value
|
||||
var actualValue = parseInt(offsetFromStart * scaleFactor, 10);
|
||||
|
||||
// update the text box with the actual value
|
||||
Dom.get("vertVal").value = actualValue;
|
||||
|
||||
// update the title attribute on the background
|
||||
Dom.get(bg).title =
|
||||
"Vertical Slider, value = " + actualValue;
|
||||
},
|
||||
|
||||
updateVert: function() {
|
||||
var v = parseFloat(document.forms['formV']['vertVal'].value, 10);
|
||||
if ( isNaN(v) ) v = 0;
|
||||
|
||||
// convert the real value into a pixel offset
|
||||
slider.setValue(Math.round(v/scaleFactor));
|
||||
return false;
|
||||
},
|
||||
|
||||
clearConstraints: function() {
|
||||
slider.getThumb().clearConstraints();
|
||||
},
|
||||
|
||||
clearTicks: function() {
|
||||
slider.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>
|
||||
289
www/extras/yui/examples/slider/css/screen.css
Normal file
289
www/extras/yui/examples/slider/css/screen.css
Normal file
|
|
@ -0,0 +1,289 @@
|
|||
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:relative; */
|
||||
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;height:300px;}
|
||||
*/
|
||||
#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; width:300px; }
|
||||
*/
|
||||
#vertValueDiv { position:relative; top: 100px; left:40px; }
|
||||
|
||||
|
||||
|
||||
BIN
www/extras/yui/examples/slider/img/bullet.gif
Normal file
BIN
www/extras/yui/examples/slider/img/bullet.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 172 B |
BIN
www/extras/yui/examples/slider/img/greybg.png
Normal file
BIN
www/extras/yui/examples/slider/img/greybg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 197 B |
BIN
www/extras/yui/examples/slider/img/header.gif
Normal file
BIN
www/extras/yui/examples/slider/img/header.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 203 B |
BIN
www/extras/yui/examples/slider/img/hline.png
Normal file
BIN
www/extras/yui/examples/slider/img/hline.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 416 B |
BIN
www/extras/yui/examples/slider/img/horizBg.png
Normal file
BIN
www/extras/yui/examples/slider/img/horizBg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 519 B |
BIN
www/extras/yui/examples/slider/img/horizSlider.png
Normal file
BIN
www/extras/yui/examples/slider/img/horizSlider.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
www/extras/yui/examples/slider/img/horizSlider_on.png
Normal file
BIN
www/extras/yui/examples/slider/img/horizSlider_on.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
www/extras/yui/examples/slider/img/hue.png
Normal file
BIN
www/extras/yui/examples/slider/img/hue.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
www/extras/yui/examples/slider/img/logo.gif
Normal file
BIN
www/extras/yui/examples/slider/img/logo.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 705 B |
BIN
www/extras/yui/examples/slider/img/lthumb.png
Normal file
BIN
www/extras/yui/examples/slider/img/lthumb.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
www/extras/yui/examples/slider/img/navHover2.png
Normal file
BIN
www/extras/yui/examples/slider/img/navHover2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 875 B |
BIN
www/extras/yui/examples/slider/img/pickerbg.png
Normal file
BIN
www/extras/yui/examples/slider/img/pickerbg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
www/extras/yui/examples/slider/img/qbottom.png
Normal file
BIN
www/extras/yui/examples/slider/img/qbottom.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
www/extras/yui/examples/slider/img/qmiddle.png
Normal file
BIN
www/extras/yui/examples/slider/img/qmiddle.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 385 B |
BIN
www/extras/yui/examples/slider/img/qtop.png
Normal file
BIN
www/extras/yui/examples/slider/img/qtop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2 KiB |
BIN
www/extras/yui/examples/slider/img/select.gif
Normal file
BIN
www/extras/yui/examples/slider/img/select.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 78 B |
BIN
www/extras/yui/examples/slider/img/select.png
Normal file
BIN
www/extras/yui/examples/slider/img/select.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 192 B |
BIN
www/extras/yui/examples/slider/img/vertBg.png
Normal file
BIN
www/extras/yui/examples/slider/img/vertBg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 572 B |
BIN
www/extras/yui/examples/slider/img/vertSlider.png
Normal file
BIN
www/extras/yui/examples/slider/img/vertSlider.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
www/extras/yui/examples/slider/img/vertSlider_on.png
Normal file
BIN
www/extras/yui/examples/slider/img/vertSlider_on.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
www/extras/yui/examples/slider/img/vline.png
Normal file
BIN
www/extras/yui/examples/slider/img/vline.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 481 B |
349
www/extras/yui/examples/slider/index.html
Normal file
349
www/extras/yui/examples/slider/index.html
Normal file
|
|
@ -0,0 +1,349 @@
|
|||
<!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" ></link>
|
||||
|
||||
<!-- Nav and logger start -->
|
||||
|
||||
<script type="text/javascript" src="../../build/yahoo/yahoo-min.js" ></script>
|
||||
<script type="text/javascript" src="../../build/event/event-min.js" ></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom-min.js" ></script>
|
||||
<script type="text/javascript" src="../../build/logger/logger-min.js" ></script>
|
||||
<script type="text/javascript" src="../../build/dragdrop/dragdrop-min.js" ></script>
|
||||
|
||||
<script type="text/javascript" src="../../build/animation/animation-min.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="dual.html?mode=dist">Dual Thumb Slider</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>
|
||||
|
||||
<div id="vertWrapper">
|
||||
<div id="vertBGDiv" tabindex="0" x2:role="role:slider" state:valuenow="0" state:valuemin="0" state:valuemax="200" title="Vertical Slider" >
|
||||
<div id="vertHandleDiv"><img alt="" src="img/vertSlider.png" /></div>
|
||||
</div>
|
||||
|
||||
<div id="vertValueDiv">
|
||||
<form name="formV" onsubmit="return YAHOO.example.Sliders.updateVert()">
|
||||
<input autocomplete="off" name="vertVal" id="vertVal" type="text" value="0" size="4" maxlength="4" />
|
||||
<input type="button" value="Update" onclick="YAHOO.example.Sliders.updateVert()" />
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="horizWrapper">
|
||||
<div id="horizBGDiv" tabindex="0" x2:role="role:slider" state:valuenow="0" state:valuemin="-100" state:valuemax="100" title="Horizontal Slider" >
|
||||
<div id="horizHandleDiv" ><img alt="" src="img/horizSlider.png" /></div>
|
||||
</div>
|
||||
|
||||
<div id="horizValueDiv">
|
||||
<form name="formH" onsubmit="return YAHOO.example.Sliders.updateHoriz()">
|
||||
<input autocomplete="off" name="horizVal" id="horizVal" type="text" value="0" size="4" maxlength="4" />
|
||||
<input type="button" value="Update" onclick="YAHOO.example.Sliders.updateHoriz()" />
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
//<![CDATA[
|
||||
|
||||
YAHOO.example.Sliders = function() {
|
||||
|
||||
var Dom = YAHOO.util.Dom;
|
||||
var Event = YAHOO.util.Event;
|
||||
|
||||
var yslider, xslider;
|
||||
|
||||
function handleHorizSliderKey(e) {
|
||||
YAHOO.log("horizontal slider keypress");
|
||||
|
||||
var valueNow = xslider.getValue();
|
||||
var valueMin = xslider.thumb.rightConstraint;
|
||||
var valueMax = xslider.thumb.leftConstraint;
|
||||
var delta = 0;
|
||||
var kc = Event.getCharCode(e);
|
||||
|
||||
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;
|
||||
|
||||
var sliderBg = Dom.get("horizBGDiv");
|
||||
if (sliderBg.setAttributeNS) {
|
||||
sliderBg.setAttributeNS("http://www.w3.org/2005/07/aaa",
|
||||
"valuenow", valueNow);
|
||||
}
|
||||
|
||||
Event.stopEvent(e);
|
||||
return false;
|
||||
}
|
||||
|
||||
function handleVertSliderKey(e) {
|
||||
YAHOO.log("vertical slider keypress");
|
||||
var valueNow = yslider.getValue();
|
||||
var valueMin = yslider.thumb.topConstraint;
|
||||
var valueMax = yslider.thumb.bottomConstraint;
|
||||
|
||||
var delta = 0;
|
||||
var kc = Event.getCharCode(e);
|
||||
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;
|
||||
}
|
||||
|
||||
var sliderBg = Dom.get("vertBGDiv");
|
||||
if (sliderBg.setAttributeNS) {
|
||||
sliderBg.setAttributeNS("http://www.w3.org/2005/07/aaa",
|
||||
"valuenow", valueNow);
|
||||
}
|
||||
|
||||
Event.stopEvent(e);
|
||||
return false;
|
||||
}
|
||||
|
||||
var initVert = function() {
|
||||
|
||||
var bg="vertBGDiv",thumb="vertHandleDiv",valFld="vertVal";
|
||||
|
||||
yslider = YAHOO.widget.Slider.getVertSlider(bg,
|
||||
thumb, 0, 200);
|
||||
|
||||
yslider.subscribe("change", function(offsetFromStart) {
|
||||
if (this.moveComplete) {
|
||||
YAHOO.log("moveComplete", "warn");
|
||||
}
|
||||
Dom.get(valFld).value = offsetFromStart;
|
||||
Dom.get(bg).title = "Vert Slider, value = " + offsetFromStart;
|
||||
});
|
||||
|
||||
yslider.subscribe("slideStart", function() {
|
||||
YAHOO.log("VERT slidestart", "warn");
|
||||
});
|
||||
|
||||
yslider.subscribe("slideEnd", function() {
|
||||
// If you are only interested in the end value (when the
|
||||
// animation completes, or the user stops dragging the
|
||||
// slider handle), you can use this event rather than the
|
||||
// change event
|
||||
|
||||
YAHOO.log("VERT slideend", "warn");
|
||||
// var val = this.getValue();
|
||||
// Dom.get(valFld).value = val;
|
||||
// Dom.get(bg).title = "Vert Slider, value = " + val;
|
||||
});
|
||||
|
||||
Dom.get(valFld).title = "Type in slider value between 0 and 200.";
|
||||
|
||||
Event.on(bg, "keydown", handleVertSliderKey);
|
||||
Event.on(bg, "keypress", Event.preventDefault);
|
||||
|
||||
};
|
||||
|
||||
var initHoriz = function() {
|
||||
|
||||
var bg="horizBGDiv",thumb="horizHandleDiv",valFld="horizVal";
|
||||
|
||||
xslider = YAHOO.widget.Slider.getHorizSlider(bg,
|
||||
thumb, 100, 100, 25);
|
||||
|
||||
xslider.subscribe("change", function(offsetFromStart) {
|
||||
Dom.get(valFld).value = offsetFromStart;
|
||||
Dom.get(bg).title = "Horiz Slider, value = " + offsetFromStart;
|
||||
});
|
||||
|
||||
xslider.subscribe("slideStart", function() {
|
||||
YAHOO.log("HORIZ slidestart", "warn");
|
||||
});
|
||||
|
||||
xslider.subscribe("slideEnd", function() {
|
||||
// If you are only interested in the end value (when the
|
||||
// animation completes, or the user stops dragging the
|
||||
// slider handle), you can use this event rather than the
|
||||
// change event
|
||||
|
||||
YAHOO.log("HORIZ slideend", "warn");
|
||||
// var val = this.getValue();
|
||||
// Dom.get(valFld).value = val;
|
||||
// Dom.get(bg).title = "Vert Slider, value = " + val;
|
||||
});
|
||||
|
||||
|
||||
Dom.get(valFld).title = "Type in slider value between -100 " +
|
||||
"and 100. Values will be rounded to a number divisable by 25."
|
||||
|
||||
Event.on(bg, "keydown", handleHorizSliderKey);
|
||||
Event.on(bg, "keypress", Event.preventDefault);
|
||||
};
|
||||
|
||||
return {
|
||||
|
||||
init: function() {
|
||||
initVert(); initHoriz();
|
||||
},
|
||||
|
||||
updateVert: function() {
|
||||
var v = parseFloat(document.forms['formV']['vertVal'].value, 10);
|
||||
if ( isNaN(v) ) v = 0;
|
||||
yslider.setValue(Math.round(v));
|
||||
return false;
|
||||
},
|
||||
|
||||
updateHoriz:function() {
|
||||
var fld = document.forms["formH"]["horizVal"];
|
||||
var v = parseFloat(fld.value, 10);
|
||||
if ( isNaN(v) ) v = 0;
|
||||
xslider.setValue(Math.round(v));
|
||||
var newVal = xslider.getValue();
|
||||
if (v != newVal) {
|
||||
fld.value = newVal;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
}
|
||||
}();
|
||||
|
||||
YAHOO.util.Event.on(window, "load", YAHOO.example.Sliders.init);
|
||||
//]]>
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
97
www/extras/yui/examples/slider/js/color.js
vendored
Normal file
97
www/extras/yui/examples/slider/js/color.js
vendored
Normal file
|
|
@ -0,0 +1,97 @@
|
|||
/* Copyright (c) 2006 Yahoo! Inc. All rights reserved. */
|
||||
|
||||
YAHOO.util.Color = function() {
|
||||
|
||||
var hexchars = "0123456789ABCDEF";
|
||||
|
||||
var real2int = function(n) {
|
||||
return Math.min(255, Math.round(n*256));
|
||||
};
|
||||
|
||||
return {
|
||||
|
||||
/**
|
||||
* HSV to RGB. h[0,360], s[0,1], v[0,1]
|
||||
*/
|
||||
hsv2rgb: function(h,s,v) {
|
||||
var r,g,b,i,f,p,q,t;
|
||||
i = Math.floor((h/60)%6);
|
||||
f = (h/60)-i;
|
||||
p = v*(1-s);
|
||||
q = v*(1-f*s);
|
||||
t = v*(1-(1-f)*s);
|
||||
switch(i) {
|
||||
case 0: r=v; g=t; b=p; break;
|
||||
case 1: r=q; g=v; b=p; break;
|
||||
case 2: r=p; g=v; b=t; break;
|
||||
case 3: r=p; g=q; b=v; break;
|
||||
case 4: r=t; g=p; b=v; break;
|
||||
case 5: r=v; g=p; b=q; break;
|
||||
}
|
||||
//alert([h,s,v] + "-" + [r,g,b]);
|
||||
|
||||
return [real2int(r), real2int(g), real2int(b)];
|
||||
},
|
||||
|
||||
rgb2hsv: function(r,g,b) {
|
||||
var min,max,delta,h,s,v;
|
||||
min = Math.min(Math.min(r,g),b);
|
||||
max = Math.max(Math.max(r,g),b);
|
||||
delta = max-min;
|
||||
|
||||
switch (max) {
|
||||
case min: h=0; break;
|
||||
case r: h=(g-b)/delta;
|
||||
if (g<b) {
|
||||
h+=360;
|
||||
}
|
||||
break;
|
||||
case g: h=((b-r)/delta)+120; break;
|
||||
case b: h=((r-g)/delta)+240; break;
|
||||
}
|
||||
|
||||
s = (max==0) ? 0 : 1-(mix/max);
|
||||
|
||||
return {"h": h, "s": s, "v": max};
|
||||
|
||||
},
|
||||
|
||||
rgb2hex: function (r,g,b) {
|
||||
return this.int2hex(r) + this.int2hex(g) + this.int2hex(b);
|
||||
},
|
||||
|
||||
/**
|
||||
* Converts an int [0,255] to hex [00,FF]
|
||||
*/
|
||||
int2hex: 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 hexchars.charAt((n - n % 16) / 16) + hexchars.charAt(n % 16);
|
||||
},
|
||||
|
||||
hex2dec: function(hexchar) {
|
||||
return hexchars.indexOf(hexchar.toUpperCase());
|
||||
},
|
||||
|
||||
hex2rgb: function(s) {
|
||||
var rgb = [];
|
||||
rgb[0] = (this.hex2dec(s.substr(0, 1)) * 16) + this.hex2dec(s.substr(1, 1));
|
||||
rgb[1] = (this.hex2dec(s.substr(2, 1)) * 16) + this.hex2dec(s.substr(3, 1));
|
||||
rgb[2] = (this.hex2dec(s.substr(4, 1)) * 16) + this.hex2dec(s.substr(5, 1));
|
||||
// gLogger.debug("hex2rgb: " + str + ", " + rgb.toString());
|
||||
return rgb;
|
||||
},
|
||||
|
||||
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
Normal file
34
www/extras/yui/examples/slider/js/key.js
vendored
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
/* 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
Normal file
15
www/extras/yui/examples/slider/js/log.js
vendored
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
// 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
Normal file
1131
www/extras/yui/examples/slider/js/logger.js
vendored
Normal file
File diff suppressed because it is too large
Load diff
385
www/extras/yui/examples/slider/rgb.html
Normal file
385
www/extras/yui/examples/slider/rgb.html
Normal file
|
|
@ -0,0 +1,385 @@
|
|||
<!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"></link>
|
||||
<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 {-moz-outline: none; outline:0px none;top:30px}
|
||||
#gBG {-moz-outline: none; outline:0px none;top:50px}
|
||||
#bBG {-moz-outline: none; outline:0px none;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-min.js" ></script>
|
||||
<script type="text/javascript" src="../../build/event/event-min.js" ></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom-min.js" ></script>
|
||||
<script type="text/javascript" src="../../build/logger/logger-min.js" ></script>
|
||||
<script type="text/javascript" src="../../build/dragdrop/dragdrop-min.js" ></script>
|
||||
|
||||
<script type="text/javascript" src="../../build/animation/animation-min.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="dual.html?mode=dist">Dual Thumb Slider</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" tabindex="1" hidefocus="true">
|
||||
<div id="rthumb" class="thumb"><img src="img/vline.png" /></div>
|
||||
</div>
|
||||
|
||||
<div id="gBG" class="bg" tabindex="2" hidefocus="true">
|
||||
<div id="gthumb" class="thumb"><img src="img/vline.png" /></div>
|
||||
</div>
|
||||
|
||||
<div id="bBG" class="bg" tabindex="3" hidefocus="true">
|
||||
<div id="bthumb" class="thumb"><img src="img/vline.png" /></div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="valdiv">
|
||||
<form name="rgbform">
|
||||
<table border="0">
|
||||
<tr>
|
||||
<td>
|
||||
RGB
|
||||
</td>
|
||||
<td>
|
||||
<input autocomplete="off" tabindex="3" name="rval" id="rval" type="text" value="0" size="4" maxlength="4" />
|
||||
<input autocomplete="off" tabindex="4" name="gval" id="gval" type="text" value="0" size="4" maxlength="4" />
|
||||
<input autocomplete="off" tabindex="5" name="bval" id="bval" type="text" value="0" size="4" maxlength="4" />
|
||||
</td>
|
||||
<td>
|
||||
<input tabindex="6" id="rgbSubmit" type="button" value="Update" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Hex: #
|
||||
</td>
|
||||
<td>
|
||||
<input autocomplete="off" tabindex="7" name="hexval" id="hexval" type="text" value="" size="6" maxlength="6" />
|
||||
</td>
|
||||
<td>
|
||||
<input tabindex="8" id="hexSubmit" type="button" value="Update" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input tabindex="9" id="resetButton" type="button" value="Reset" />
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="swatch"> </div>
|
||||
</div>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
YAHOO.example.RGBSlider = function() {
|
||||
|
||||
var Event = YAHOO.util.Event;
|
||||
var Dom = YAHOO.util.Dom;
|
||||
var Color = YAHOO.util.Color;
|
||||
var Slider = YAHOO.widget.Slider;
|
||||
|
||||
var r, g, b, dd;
|
||||
|
||||
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);
|
||||
|
||||
for (var i=0; i<34; i++) {
|
||||
Dom.setStyle("rBG" + i, "background-color",
|
||||
"rgb(" + (i*8) + "," + curg + "," + curb + ")");
|
||||
|
||||
Dom.setStyle("gBG" + i, "background-color",
|
||||
"rgb(" + curr + "," + (i*8) + "," + curb + ")");
|
||||
|
||||
Dom.setStyle("bBG" + i, "background-color",
|
||||
"rgb(" + curr + "," + curg + "," + (i*8) + ")");
|
||||
}
|
||||
|
||||
Dom.setStyle("swatch", "background-color",
|
||||
"rgb(" + curr + "," + curg + "," + curb + ")");
|
||||
|
||||
Dom.get("hexval").value = Color.rgb2hex(curr, curg, curb);
|
||||
}
|
||||
|
||||
|
||||
function listenerUpdate(whichSlider, newVal) {
|
||||
newVal = Math.min(255, newVal);
|
||||
Dom.get(whichSlider + "val").value = newVal;
|
||||
updateSliderColors();
|
||||
}
|
||||
|
||||
return {
|
||||
|
||||
userReset: function() {
|
||||
var v;
|
||||
var f = document.forms['rgbform'];
|
||||
|
||||
r.setValue(0);
|
||||
g.setValue(0);
|
||||
b.setValue(0);
|
||||
},
|
||||
|
||||
rgbInit: function() {
|
||||
|
||||
r = Slider.getHorizSlider("rBG", "rthumb", 0, 128);
|
||||
r.subscribe("change", function(newVal) { listenerUpdate("r", newVal*2); });
|
||||
|
||||
g = Slider.getHorizSlider("gBG", "gthumb", 0, 128);
|
||||
g.subscribe("change", function(newVal) { listenerUpdate("g", newVal*2); });
|
||||
|
||||
b = Slider.getHorizSlider("bBG", "bthumb", 0, 128);
|
||||
b.subscribe("change", function(newVal) { listenerUpdate("b", newVal*2); });
|
||||
|
||||
this.initColor();
|
||||
|
||||
dd = new YAHOO.util.DD("ddRGB");
|
||||
dd.setHandleElId("pickerHandle");
|
||||
},
|
||||
|
||||
initColor: function() {
|
||||
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);
|
||||
|
||||
this.userUpdate();
|
||||
},
|
||||
|
||||
hexUpdate: function(e) {
|
||||
return this.userUpdate(e, true);
|
||||
},
|
||||
|
||||
userUpdate: function(e, 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 = Color.hex2rgb(hexval);
|
||||
// alert(rgb.toString());
|
||||
if (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();
|
||||
|
||||
if (e) {
|
||||
Event.stopEvent(e);
|
||||
}
|
||||
},
|
||||
|
||||
init: function() {
|
||||
this.rgbInit();
|
||||
Event.on("rgbForm", "submit", this.userUpdate);
|
||||
Event.on("rgbSubmit", "click", this.userUpdate);
|
||||
Event.on("hexSubmit", "click", this.hexUpdate, this, true);
|
||||
Event.on("resetButton", "click", this.userReset);
|
||||
}
|
||||
|
||||
|
||||
};
|
||||
}();
|
||||
|
||||
YAHOO.util.Event.on(window, "load",
|
||||
YAHOO.example.RGBSlider.init, YAHOO.example.RGBSlider, true);
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
283
www/extras/yui/examples/slider/rgb2.html
Normal file
283
www/extras/yui/examples/slider/rgb2.html
Normal file
|
|
@ -0,0 +1,283 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>Yahoo! UI Library - Slider Widget</title>
|
||||
<link rel="stylesheet" type="text/css" href="css/screen.css">
|
||||
<style type="text/css">
|
||||
#ddPicker { position: absolute; background-color: #eeeeee; top: 200px; left: 20px; width: 360px; height: 240px; }
|
||||
#ddPicker input { font-size: .85em }
|
||||
#pickerHandle { background-color: #bbbbbb; height: 10px; cursor: move; }
|
||||
#hueThumb { cursor:default; width:18px; height:18px; z-index: 9; position:absolute; }
|
||||
#hueBg {-moz-outline: none; outline:0px none; position:absolute; left:216px; height:198px; width:18px; background:url(img/hue.png) no-repeat; top:18px; }
|
||||
#pickerDiv {-moz-outline: none; outline:0px none; position:absolute; left:10px; height:187px; width:188px; background-color:#FF0000; 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; }
|
||||
#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-min.js" ></script>
|
||||
<script type="text/javascript" src="../../build/event/event-min.js" ></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom-min.js" ></script>
|
||||
<script type="text/javascript" src="../../build/logger/logger-min.js" ></script>
|
||||
<script type="text/javascript" src="../../build/dragdrop/dragdrop-min.js" ></script>
|
||||
|
||||
<script type="text/javascript" src="../../build/animation/animation-min.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="dual.html?mode=dist">Dual Thumb Slider</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" tabindex="-1" hidefocus="true">
|
||||
<img id="pickerbg" src="img/pickerbg.png" alt="" />
|
||||
<div id="selector"><img src="img/select.gif" /></div>
|
||||
</div>
|
||||
|
||||
<div id="hueBg" tabindex="-1" hidefocus="true">
|
||||
<div id="hueThumb"><img src="img/hline.png" /></div>
|
||||
</div>
|
||||
|
||||
<div id="valdiv">
|
||||
<form name="rgbform">
|
||||
<br />
|
||||
R <input autocomplete="off" name="rval" id="rval" type="text" value="0" size="3" maxlength="3" />
|
||||
H <input autocomplete="off" name="hval" id="hval" type="text" value="0" size="3" maxlength="3" />
|
||||
<br />
|
||||
G <input autocomplete="off" name="gval" id="gval" type="text" value="0" size="3" maxlength="3" />
|
||||
S <input autocomplete="off" name="gsal" id="sval" type="text" value="0" size="3" maxlength="3" />
|
||||
<br />
|
||||
B <input autocomplete="off" name="bval" id="bval" type="text" value="0" size="3" maxlength="3" />
|
||||
V <input autocomplete="off" name="vval" id="vval" type="text" value="0" size="3" maxlength="3" />
|
||||
<br />
|
||||
<br />
|
||||
# <input autocomplete="off" name="hexval" id="hexval" type="text" value="0" size="6" maxlength="6" />
|
||||
<br />
|
||||
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="swatch"> </div>
|
||||
</div>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
YAHOO.example.ColorPicker = function() {
|
||||
|
||||
var Slider=YAHOO.widget.Slider;
|
||||
var Color=YAHOO.util.Color;
|
||||
var Dom=YAHOO.util.Dom;
|
||||
|
||||
var pickerSize=180;
|
||||
|
||||
var hue,picker,panel;
|
||||
|
||||
// hue, int[0,359]
|
||||
var getH = function() {
|
||||
var h = (pickerSize - hue.getValue()) / pickerSize;
|
||||
h = Math.round(h*360);
|
||||
return (h == 360) ? 0 : h;
|
||||
}
|
||||
|
||||
// saturation, int[0,1], left to right
|
||||
var getS = function() {
|
||||
return picker.getXValue() / pickerSize;
|
||||
}
|
||||
|
||||
// value, int[0,1], top to bottom
|
||||
var getV = function() {
|
||||
return (pickerSize - picker.getYValue()) / pickerSize;
|
||||
}
|
||||
|
||||
var swatchUpdate = function() {
|
||||
var h=getH(), s=getS(), v=getV();
|
||||
YAHOO.log("hsv " + [h,s,v]);
|
||||
|
||||
Dom.get("hval").value = h;
|
||||
Dom.get("sval").value = Math.round(s*100);
|
||||
Dom.get("vval").value = Math.round(v*100);
|
||||
|
||||
var rgb = Color.hsv2rgb(h, s, v);
|
||||
|
||||
var styleDef = "rgb(" + rgb.join(",") + ")";
|
||||
Dom.setStyle("swatch", "background-color", styleDef);
|
||||
|
||||
Dom.get("rval").value = rgb[0];
|
||||
Dom.get("gval").value = rgb[1];
|
||||
Dom.get("bval").value = rgb[2];
|
||||
|
||||
Dom.get("hexval").value = Color.rgb2hex(rgb[0], rgb[1], rgb[2]);
|
||||
};
|
||||
|
||||
var hueUpdate = function(newOffset) {
|
||||
YAHOO.log("hue update: " + newOffset , "warn");
|
||||
var rgb = Color.hsv2rgb(getH(), 1, 1);
|
||||
var styleDef = "rgb(" + rgb.join(",") + ")";
|
||||
Dom.setStyle("pickerDiv", "background-color", styleDef);
|
||||
|
||||
swatchUpdate();
|
||||
};
|
||||
|
||||
pickerUpdate = function(newOffset) {
|
||||
YAHOO.log("picker update [" + newOffset.x + ", " + newOffset.y + "]" , "warn");
|
||||
swatchUpdate();
|
||||
};
|
||||
|
||||
return {
|
||||
|
||||
init: function () {
|
||||
|
||||
hue = Slider.getVertSlider("hueBg", "hueThumb", 0, pickerSize);
|
||||
hue.subscribe("change", hueUpdate);
|
||||
|
||||
picker = Slider.getSliderRegion("pickerDiv", "selector",
|
||||
0, pickerSize, 0, pickerSize);
|
||||
picker.subscribe("change", pickerUpdate);
|
||||
|
||||
hueUpdate(0);
|
||||
|
||||
panel = new YAHOO.util.DD("ddPicker");
|
||||
panel.setHandleElId("pickerHandle");
|
||||
|
||||
}
|
||||
}
|
||||
}();
|
||||
|
||||
YAHOO.util.Event.on(window, "load", YAHOO.example.ColorPicker.init);
|
||||
|
||||
</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