JavaScript DHTML/GUI Components/Color Chooser
Содержание
Color chooser in JavaScript
<source lang="html4strict">
<HTML> <HEAD> <TITLE>Welcome</TITLE> </HEAD> <body>
Color chooser
<FORM name=colc>
|
<SCRIPT LANGUAGE="JavaScript"> function color() { document.bgColor=(""+ colc.cc.value +"");
document.body.text=(""+ colc.tc.value +"");
} </SCRIPT>
<b>Background:</td> | <select name="cc" size="1">
| <option value="black">Black <option value="blue">Blue <option value="green">Green <option value="skyblue">Light Blue <option value="orange">Orange <option value="purple">Purple <option value="red">Red <option value="silver">Silver <option value="Yellow">Yellow <option selected value="white">White</select></td>
Text:</td> |
| <select name="tc" size="1">
<option selected value="black">Black
<option value="blue">Blue
<option value="green">Green
<option value="skyblue">Light Blue
<option value="orange">Orange
<option value="purple">Purple
<option value="red">Red
<option value="silver">Silver
<option value="Yellow">Yellow
<option value="white">White
</select>
</td>
| </td> </table> </FORM> By Greg Marut
</body> </HTML>
</source>
Color picker (IE only)<source lang="html4strict"> <html> <head> <style> </style> <script type="text/javascript"> </script> </head> <body>
</source>
Color Picker (Windows style)<source lang="html4strict"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <TITLE>Select Color</TITLE> </HEAD> <BODY> <SCRIPT language="JavaScript" type="text/javascript"> //------------------------------------------------------- function _GetElByID_ ( _ID_ ) { return document.getElementById ? document.getElementById ( _ID_ ) : document.all [ _ID_ ]; } //------------------------------------------------------- function _RGB2Hex_ ( _RGBColor_ ) { var _r_, _g_, _b_;
var _i_, _j_, _len_;
var _HexColor_;
_RGBColor_ = _RGBColor_.toLowerCase ( );
if ( _RGBColor_.substring ( 0, 3 ) != "rgb" )
return "";
_i_ = _RGBColor_.indexOf ( "(" );
if ( _i_ == -1 )
return "";
_j_ = _RGBColor_.indexOf ( ",", _i_ + 1 );
if ( _j_ == -1 )
return "";
_r_ = parseInt ( _RGBColor_.substring ( _i_ + 1, _j_ ) );
_i_ = _j_;
_j_ = _RGBColor_.indexOf ( ",", _j_ + 1 );
if ( _j_ == -1 )
return "";
_g_ = parseInt ( _RGBColor_.substring ( _i_ + 1, _j_ ) );
_i_ = _j_;
_j_ = _RGBColor_.indexOf ( ")", _j_ + 1 );
if ( _j_ == -1 )
return "";
_b_ = parseInt ( _RGBColor_.substring ( _i_ + 1, _j_ ) );
_rs_ = _r_.toString ( 16 );
_rs_ = _r_ < 10 ? "0" + _rs_ : _rs_;
_gs_ = _g_.toString ( 16 );
_gs_ = _g_ < 10 ? "0" + _gs_ : _gs_;
_bs_ = _b_.toString ( 16 );
_bs_ = _b_ < 10 ? "0" + _bs_ : _bs_;
_HexColor_ = "#" + _rs_ + _gs_ + _bs_;
return _HexColor_.toUpperCase ( );
} //--------------------------------------------- function SetPalette ( palette ) { var tbl = document.getElementById ( "colortbl" );
var color, sR, sG, sB;
var r, g, b;
var i, j;
var bNoMore;
bNoMore = false;
switch ( palette )
{
case 0:
r = 0xFF; g = 0xFF; b = 0xFF;
for ( i = 0; i < tbl.rows.length; i++ )
{
for ( j = 0; j < tbl.rows [i].cells.length; j++ )
{
if ( !bNoMore )
{
sR = r.toString ( 16 );
if ( sR.length == 1 )
sR = "0" + sR;
sG = g.toString ( 16 );
if ( sG.length == 1 )
sG = "0" + sG;
sB = b.toString ( 16 );
if ( sB.length == 1 )
sB = "0" + sB;
color = "#" + sR + sG + sB;
tbl.rows [i].cells [j].__c = true;
}
tbl.rows [i].cells [j].style.backgroundColor = color;
if ( bNoMore )
continue;
if ( b > 0 )
b -= 0x33;
else
{
if ( g > 0 )
g -= 0x33;
else
{
if ( r > 0 )
r -= 0x33;
else
{
color = "";
bNoMore = true;
continue;
}
g = 0xFF;
}
b = 0xFF;
}
}
}
break;
case 1:
r = 0xFF;
for ( i = 0; i < tbl.rows.length; i++ )
{
for ( j = 0; j < tbl.rows [i].cells.length; j++ )
{
g = b = Math.round ( ( r / 15 ) * ( 15 - j ) );
sR = r.toString ( 16 );
if ( sR.length == 1 )
sR = "0" + sR;
sG = g.toString ( 16 );
if ( sG.length == 1 )
sG = "0" + sG;
sB = b.toString ( 16 );
if ( sB.length == 1 )
sB = "0" + sB;
color = "#" + sR + sG + sB;
tbl.rows [i].cells [j].__c = true;
tbl.rows [i].cells [j].style.backgroundColor = color;
}
r -= 16;
}
break;
case 2:
g = 0xFF;
for ( i = 0; i < tbl.rows.length; i++ )
{
for ( j = 0; j < tbl.rows [i].cells.length; j++ )
{
r = b = Math.round ( ( g / 15 ) * ( 15 - j ) );
sR = r.toString ( 16 );
if ( sR.length == 1 )
sR = "0" + sR;
sG = g.toString ( 16 );
if ( sG.length == 1 )
sG = "0" + sG;
sB = b.toString ( 16 );
if ( sB.length == 1 )
sB = "0" + sB;
color = "#" + sR + sG + sB;
tbl.rows [i].cells [j].__c = true;
tbl.rows [i].cells [j].style.backgroundColor = color;
}
g -= 16;
}
break;
case 3:
b = 0xFF;
for ( i = 0; i < tbl.rows.length; i++ )
{
for ( j = 0; j < tbl.rows [i].cells.length; j++ )
{
r = g = Math.round ( ( b / 15 ) * ( 15 - j ) );
sR = r.toString ( 16 );
if ( sR.length == 1 )
sR = "0" + sR;
sG = g.toString ( 16 );
if ( sG.length == 1 )
sG = "0" + sG;
sB = b.toString ( 16 );
if ( sB.length == 1 )
sB = "0" + sB;
color = "#" + sR + sG + sB;
tbl.rows [i].cells [j].__c = true;
tbl.rows [i].cells [j].style.backgroundColor = color;
}
b -= 16;
}
}
} //------------------------------------------------------- function FindCookie ( sCookieName ) { var iNameLen = sCookieName.length;
var sCookieData = document.cookie;
var iCLen = sCookieData.length;
var i, j;
var CEnd;
i = 0;
while ( i < iCLen )
{
j = i + iNameLen;
if ( sCookieData.substring ( i, j ) == sCookieName )
{
iCEnd = sCookieData.indexOf ( ";", j );
if ( iCEnd == -1 )
iCEnd = sCookieData.length;
return unescape ( sCookieData.substring ( j + 1, iCEnd ) );
}
i++;
}
return null;
} //------------------------------------------------------- function DownColor ( _evt_ ) { _evt_ = _evt_ ? _evt_ : window.event;
if ( !_evt_ )
return;
_target_el_ = _evt_.target ? _evt_.target : _evt_.srcElement;
if ( _target_el_.__c )
{
_color_ = _target_el_.style.backgroundColor.toUpperCase ( );
if ( _color_.charAt ( 0 ) == "R" )
_color_ = _RGB2Hex_ ( _color_ );
SetColor ( _color_ );
}
} //------------------------------------------------------- function SetColor ( color ) { document.getElementById ( "new_col" ).style.backgroundColor = color;
document.forms [0].r_col.value = parseInt ( color.substring ( 1, 3 ), 16 );
document.forms [0].g_col.value = parseInt ( color.substring ( 3, 5 ), 16 );
document.forms [0].b_col.value = parseInt ( color.substring ( 5, 7 ), 16 );
document.forms [0].html_col.value = color;
var tbl = document.getElementById ( "recentcolortbl" );
var color;
for ( i = 0; i < tbl.rows [0].cells.length; i++ )
if ( tbl.rows [0].cells [i].style.backgroundColor == "" ||
tbl.rows [0].cells [i].style.backgroundColor == "transparent" )
{
tbl.rows [0].cells [i].style.backgroundColor = color;
tbl.rows [0].cells [i].__c = true;
return;
}
for ( i = 0; i < tbl.rows [0].cells.length - 1; i++ )
tbl.rows [0].cells [i].style.backgroundColor = tbl.rows [0].cells [i + 1].style.backgroundColor;
tbl.rows [0].cells [7].style.backgroundColor = color;
tbl.rows [0].cells [7].cells [i].__c = true;
} //------------------------------------------------------- function LoadRecentColors ( ) { var tbl = document.getElementById ( "recentcolortbl" );
var color;
for ( i = 0; i < tbl.rows [0].cells.length; i++ )
{
if ( color = FindCookie ( "__CPRC" + i ) )
tbl.rows [0].cells [i].__c = true;
else
color = "";
tbl.rows [0].cells [i].style.backgroundColor = color;
}
} //------------------------------------------------------- function PlaceCookie ( name, value ) { var exp = new Date ( ); var iExpT = exp.getTime ( ) + 31536000000; exp.setTime ( iExpT ); document.cookie = name + "=" + value + "; expires=" + exp.toGMTString(); } //------------------------------------------------------- function SaveRecentColors ( ) { var tbl = document.getElementById ( "recentcolortbl" );
var color;
for ( i = 0; i < tbl.rows [0].cells.length; i++ )
{
color = tbl.rows [0].cells [i].currentStyle.backgroundColor;
if ( color == "" )
break;
PlaceCookie ( "__CPRC" + i, color )
}
} //------------------------------------------------------- function SetColorOnExit ( ) { opener.c_colorpick_callback ( _GetElByID_ ( "new_col" ).style.backgroundColor ); } //------------------------------------------------------- document.write ( "<FORM style="font-family: MS Sans Serif, sans-serif; font-size: 10pt">" ); document.write ( "
| |||||||||||||||||||||||||||||||||
