아래는 본예제의 자바스크립트원문입니다. 데모를 통해 확인하세요.
<html>
<head>
<title>해피CGI</title>
<style type="text/css">
.form_widget_amount_slider{
border-top:1px solid #9d9c99;
border-left:1px solid #9d9c99;
border-bottom:1px solid #eee;
border-right:1px solid #eee;
background-color:#f0ede0;
height:3px;
position:absolute;
bottom:0px;
width:200px;
}
</style>
<script>
/************************************************************************************************************
(C) www.dhtmlgoodies.com, September 2005
************************************************************************************************************/
function baseConverter (number,ob,nb) {
number = number + "";
number = number.toUpperCase();
var list = "0123456789ABCDEF";
var dec = 0;
for (var i = 0; i <= number.length; i++) {
dec += (list.indexOf(number.charAt(i))) * (Math.pow(ob , (number.length - i - 1)));
}
number = "";
var magnitude = Math.floor((Math.log(dec))/(Math.log(nb)));
for (var i = magnitude; i >= 0; i--) {
var amount = Math.floor(dec/Math.pow(nb,i));
number = number + list.charAt(amount);
dec -= amount*(Math.pow(nb,i));
}
if(number.length==0)number=0;
return number;
}
// Converts a RGB color to HSV
function toHSV(rgbColor){
rgbColor = rgbColor.replace('#','');
red = baseConverter(rgbColor.substr(0,2),16,10);
green = baseConverter(rgbColor.substr(2,2),16,10);
blue = baseConverter(rgbColor.substr(4,2),16,10);
if(red.length==0)red=0;
if(green.length==0)green=0;
if(blue.length==0)blue=0;
red = red/255;
green = green/255;
blue = blue/255;
maxValue = Math.max(red,green,blue);
minValue = Math.min(red,green,blue);
var hue = 0;
if(maxValue==minValue){
hue = 0;
saturation=0;
}else{
if(red == maxValue){
hue = (green - blue) / (maxValue-minValue)/1;
}else if(green == maxValue){
hue = 2 + (blue - red)/1 / (maxValue-minValue)/1;
}else if(blue == maxValue){
hue = 4 + (red - green) / (maxValue-minValue)/1;
}
saturation = (maxValue-minValue) / maxValue;
}
hue = hue * 60;
valueBrightness = maxValue;
if(valueBrightness/1<0.5){
//saturation = (maxValue - minValue) / (maxValue + minValue);
}
if(valueBrightness/1>= 0.5){
//saturation = (maxValue - minValue) / (2 - maxValue - minValue);
}
returnArray = [hue,saturation,valueBrightness];
return returnArray;
}
function toRgb(hue,saturation,valueBrightness){
Hi = Math.floor(hue / 60);
if(hue==360)Hi=0;
f = hue/60 - Hi;
p = (valueBrightness * (1- saturation)).toPrecision(2);
q = (valueBrightness * (1 - (f * saturation))).toPrecision(2);
t = (valueBrightness * (1 - ((1-f)*saturation))).toPrecision(2);
switch(Hi){
case 0:
red = valueBrightness;
green = t;
blue = p;
break;
case 1:
red = q;
green = valueBrightness;
blue = p;
break;
case 2:
red = p;
green = valueBrightness;
blue = t;
break;
case 3:
red = p;
green = q;;
blue = valueBrightness;
break;
case 4:
red = t;
green = p;
blue = valueBrightness;
break;
case 5:
red = valueBrightness;
green = p;
blue = q;
break;
}
if(saturation==0){
red = valueBrightness;
green = valueBrightness;
blue = valueBrightness;
}
red*=255;
green*=255;
blue*=255;
red = Math.round(red);
green = Math.round(green);
blue = Math.round(blue);
red = baseConverter(red,10,16);
green = baseConverter(green,10,16);
blue = baseConverter(blue,10,16);
red = red + "";
green = green + "";
blue = blue + "";
while(red.length<2){
red = "0" + red;
}
while(green.length<2){
green = "0" + green;
}
while(blue.length<2){
blue = "0" + "" + blue;
}
rgbColor = "#" + red + "" + green + "" + blue;
return rgbColor.toUpperCase();
}
function findColorByDegrees(rgbColor,degrees){
rgbColor = rgbColor.replace('#','');
myArray = toHSV(rgbColor);
myArray[0]+=degrees;
if(myArray[0]>=360)myArray[0]-=360;
if(myArray[0]<0)myArray[0]+=360;
return toRgb(myArray[0],myArray[1],myArray[2]);
}
function findColorByBrightness(rgbColor,brightness){
rgbColor = rgbColor.replace('#','');
myArray = toHSV(rgbColor);
myArray[2]+=brightness/100;
if(myArray[2]>1)myArray[2]=1;
if(myArray[2]<0)myArray[2]=0;
myArray[1]+=brightness/100;
if(myArray[1]>1)myArray[1]=1;
if(myArray[1]<0)myArray[1]=0;
return toRgb(myArray[0],myArray[1],myArray[2]);
}
//-------------------//
var form_widget_amount_slider_handle = 'http://www.blueb.co.kr/SRC/javascript/image7/slider_handle.gif';
var slider_handle_image_obj = false;
var sliderObjectArray = new Array();
var slider_counter = 0;
var slideInProgress = false;
var handle_start_x;
var event_start_x;
var currentSliderIndex;
var sliderHandleWidth = 9;
function form_widget_cancel_event()
{
return false;
}
function getImageSliderHeight(){
if(!slider_handle_image_obj){
slider_handle_image_obj = new Image();
slider_handle_image_obj.src = form_widget_amount_slider_handle;
}
if(slider_handle_image_obj.width>0){
return;
}else{
setTimeout('getImageSliderHeight()',50);
}
}
function positionSliderImage(e,theIndex)
{
if(!theIndex)theIndex = this.getAttribute('sliderIndex');
var theValue = sliderObjectArray[theIndex]['formTarget'].value;
if(!theValue.match(/^[0-9]*$/g))theValue=sliderObjectArray[theIndex]['min'] +'';
if(theValue/1>sliderObjectArray[theIndex]['max'])theValue = sliderObjectArray[theIndex]['max'];
if(theValue/1<sliderObjectArray[theIndex]['min'])theValue = sliderObjectArray[theIndex]['min'];
sliderObjectArray[theIndex]['formTarget'].value = theValue;
var handleImg = document.getElementById('slider_handle' + theIndex);
var ratio = sliderObjectArray[theIndex]['width'] / (sliderObjectArray[theIndex]['max']-sliderObjectArray[theIndex]['min']);
var currentValue = sliderObjectArray[theIndex]['formTarget'].value-sliderObjectArray[theIndex]['min'];
handleImg.style.left = Math.round(currentValue * ratio) + 'px';
}
function adjustFormValue(theIndex)
{
var handleImg = document.getElementById('slider_handle' + theIndex);
var ratio = sliderObjectArray[theIndex]['width'] / (sliderObjectArray[theIndex]['max']-sliderObjectArray[theIndex]['min']);
var currentPos = handleImg.style.left.replace('px','');
sliderObjectArray[theIndex]['formTarget'].value = Math.round(currentPos / ratio) + sliderObjectArray[theIndex]['min'];
}
function initMoveSlider(e)
{
if(document.all)e = event;
slideInProgress = true;
event_start_x = e.clientX;
handle_start_x = this.style.left.replace('px','');
currentSliderIndex = this.id.replace(/[^\d]/g,'');
return false;
}
function startMoveSlider(e)
{
if(document.all)e = event;
if(!slideInProgress)return;
var leftPos = handle_start_x/1 + e.clientX/1 - event_start_x;
if(leftPos<0)leftPos = 0;
if(leftPos/1>sliderObjectArray[currentSliderIndex]['width'])leftPos = sliderObjectArray[currentSliderIndex]['width'];
document.getElementById('slider_handle' + currentSliderIndex).style.left = leftPos + 'px';
adjustFormValue(currentSliderIndex);
if(sliderObjectArray[currentSliderIndex]['onchangeAction']){
eval(sliderObjectArray[currentSliderIndex]['onchangeAction']);
}
}
function stopMoveSlider()
{
slideInProgress = false;
}
var sliderPreloadedImages = new Array();
sliderPreloadedImages[0] = new Image();
sliderPreloadedImages[0].src = form_widget_amount_slider_handle;
function form_widget_amount_slider(targetElId,formTarget,width,min,max,onchangeAction)
{
if(!slider_handle_image_obj){
getImageSliderHeight();
}
slider_counter = slider_counter +1;
sliderObjectArray[slider_counter] = new Array();
sliderObjectArray[slider_counter] = {"width":width - sliderHandleWidth,"min":min,"max":max,"formTarget":formTarget,"onchangeAction":onchangeAction};
formTarget.setAttribute('sliderIndex',slider_counter);
formTarget.onchange = positionSliderImage;
var parentObj = document.createElement('DIV');
parentObj.style.height = '12px'; // The height of the image
parentObj.style.position = 'relative';
parentObj.id = 'slider_container' + slider_counter;
document.getElementById(targetElId).appendChild(parentObj);
var obj = document.createElement('DIV');
obj.className = 'form_widget_amount_slider';
obj.innerHTML = '<span></span>';
obj.style.width = width + 'px';
obj.id = 'slider_slider' + slider_counter;
obj.style.position = 'absolute';
obj.style.bottom = '0px';
parentObj.appendChild(obj);
var handleImg = document.createElement('IMG');
handleImg.style.position = 'absolute';
handleImg.style.left = '0px';
handleImg.style.zIndex = 5;
handleImg.src = slider_handle_image_obj.src;
handleImg.id = 'slider_handle' + slider_counter;
handleImg.onmousedown = initMoveSlider;
parentObj.style.width = obj.offsetWidth + 'px';
if(document.body.onmouseup){
if(document.body.onmouseup.toString().indexOf('stopMoveSlider')==-1){
alert('You allready have an onmouseup event assigned to the body tag');
}
}else{
document.body.onmouseup = stopMoveSlider;
document.body.onmousemove = startMoveSlider;
}
handleImg.ondragstart = form_widget_cancel_event;
parentObj.appendChild(handleImg);
positionSliderImage(false,slider_counter);
}
function setColorByHSB()
{
var formObj = document.forms[0];
var hue = formObj.hue.value.replace(/[^\d]/,'');
var saturation = formObj.saturation.value.replace(/[^\d]/,'');
var brightness = formObj.brightness.value.replace(/[^\d]/,'');
if(hue/1>360)hue=360;
if(hue==360)hue=0;
if(saturation/1>100)saturation=100;
if(brightness/1>100)brightness=100;
var rgb = toRgb(hue,saturation/100,brightness/100);
document.getElementById('colorPreview').style.backgroundColor = rgb;
document.getElementById('colorCode1').innerHTML = rgb;
}
function setColorByRGB()
{
var formObj = document.forms[0];
var r = formObj.r.value.replace(/[^\d]/,'');
var g = formObj.g.value.replace(/[^\d]/,'');
var b = formObj.b.value.replace(/[^\d]/,'');
if(r/1>255)r=255;
if(g/1>255)g=255;
if(b/1>255)b=255;
r = baseConverter(r,10,16) + '';
g = baseConverter(g,10,16) + '';
b = baseConverter(b,10,16) + '';
if(r.length==1)r = '0' + r;
if(g.length==1)g = '0' + g;
if(b.length==1)b = '0' + b;
document.getElementById('colorPreview2').style.backgroundColor = '#' + r + g + b;
document.getElementById('colorCode2').innerHTML = '#' + r + g + b;
}
</script>
</head>
<body>
<form>
<table>
<tr>
<td colspan="4"><b>Example 1</td>
</tr>
<tr>
<td width="100">Hue:</td>
<td id="slider_target"></td>
<td><input type="text" name="hue" size="3" value="5" onchange="setColorByHSB()"></td>
<td><sup>o</sup></td>
<td rowspan="3" id="colorPreview" width="100" style="text-align:center;border:1px solid #000"><span id="colorCode1" style="padding:2px;font-size:11px;line-height:60px;vertical-align:middle;background-color:#FFF;border:1px solid #000"></span></td>
</tr>
<tr>
<td width="100">Saturation:</td>
<td id="slider_target2"></td>
<td><input type="text" name="saturation" size="3" value="55" onchange="setColorByHSB()"></td>
<td>%</td>
</tr>
<tr>
<td width="100">Brightness:</td>
<td id="slider_target3"></td>
<td><input type="text" name="brightness" size="3" value="55" onchange="setColorByHSB()"></td>
<td width="10">%</td>
</tr>
</table>
<table>
<tr>
<td colspan="4"><b>Example 2</td>
</tr>
<tr>
<td width="100">Red:</td>
<td id="slider_target4"></td>
<td><input type="text" name="r" size="3" value="5" onchange="setColorByRGB()"></td>
<td width="10"> </td>
<td rowspan="3" id="colorPreview2" width="100" style="text-align:center;border:1px solid #000"><span id="colorCode2" style="padding:2px;font-size:11px;line-height:60px;vertical-align:middle;background-color:#FFF;border:1px solid #000"></span></td>
</tr>
<tr>
<td width="100">Green:</td>
<td id="slider_target5"></td>
<td><input type="text" name="g" size="3" value="55" onchange="setColorByRGB()"></td>
<td width="10"> </td>
</tr>
<tr>
<td width="100">Blue:</td>
<td id="slider_target6"></td>
<td><input type="text" name="b" size="3" value="55" onchange="setColorByRGB()"></td>
<td width="10"> </td>
</tr>
</table>
</form>
<script type="text/javascript">
// Javascript for example 1
form_widget_amount_slider('slider_target',document.forms[0].hue,200,0,360,"setColorByHSB()");
form_widget_amount_slider('slider_target2',document.forms[0].saturation,200,0,100,"setColorByHSB()");
form_widget_amount_slider('slider_target3',document.forms[0].brightness,200,0,100,"setColorByHSB()");
// Javascript for example 2
form_widget_amount_slider('slider_target4',document.forms[0].r,200,0,255,"setColorByRGB()");
form_widget_amount_slider('slider_target5',document.forms[0].g,200,0,255,"setColorByRGB()");
form_widget_amount_slider('slider_target6',document.forms[0].b,200,0,255,"setColorByRGB()");
setColorByRGB();
setColorByHSB();
</script>
</body>
</html>
|
