前一段时间需要一个颜色面板,在Google找了很久没有合适的,最后自己花了半天时间写了一个自己的颜色面板,现在把代码贴出来,呵呵
yecol--颜色面板
<style type="text/css">
<!--
.tbcolorinput {
color: #FFF;
background-color: #000;
clear: both;
float: left;
height: 20px;
width: 100px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 14px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#tbimg {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#yecolcolordiv {
background-color: #FFF;
clear: both;
float: left;
width: auto;
overflow: visible;
z-index: 777;
width:260px;
height:154px;
visibility:hidden;
}
#yecolcolordiv #yecolcolortitle {
background-color: #999;
clear: both;
float: left;
height: 20px;
width: 260px;
overflow: hidden;
position: absolute;
z-index: auto;
cursor: auto;
margin-left:-260px;
margin-top:0px;
}
#yecolcolordiv #yecolcolortitle #yecolcorclose {
background-color: #FFF;
padding: 0px;
clear: both;
float: right;
height: 13px;
width: 13px;
margin-top: -18px;
margin-right: 2px;
margin-bottom: 0px;
margin-left: 210px;
text-align:center;
}
#yecolcolordiv #yecolcolorcontext {
background-color: #FFF;
padding: 0px;
clear: both;
float: left;
height: 274px;
width: 260px;
margin-top: 13px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 1px;
z-index: 777;
text-align:left;
cursor:pointer;
}
#yecolcolordiv #yecolcolorbutton {
clear: both;
float: left;
height: 15px;
width: 260px;
margin-left:1px;
z-index: 777;
overflow: hidden;
background-color: #CCC;
}
#yecolcolordiv .item
{
width:15px;
height:15px;
padding:0px;
border:0px;
margin-left:
border-bottom-color:#000;
display:block;
clear:both;
border:2px solid #FFF;
}
-->
</style>
<script language="javascript1.5" type="text/javascript">
var isvisble = true;
var theContorlObj = null;
function openyecol(event,id)
{
//alert(isvisble);
theContorlObj = id;
if(isvisble)
{
var dd = document.getElementById("yecolcolordiv" );
//mouse(event);
event = event || window.event;
var mousepos = mouseCoords(event);
//alert(mousepos.x);
if(!dd.style.left||!dd.style.top)
{
dd.style.left = 20;
dd.style.top = 10;
}
var leftedge = document.body.clientWidth;
var bottomedge = document.body.clientHeight;
//alert(leftedge);
//alert(bottomedge);
//if(leftedge<mousepos.x)
//{
dd.style.left=mousepos.x+'px';
//}
//else
//{
// dd.style.left = leftedge-mousepos.x+'px';
//}
//if(bottomedge<mousepos.y)
//{
dd.style.top= mousepos.y;
//}
//else
//{
// dd.style.top =bottomedge+mousepos.y +'px';
//}
dd.style.visibility = "visible";
isvisble= false;
//alert(isvisble+"1");
}
else
{
var dd = document.getElementById("yecolcolordiv" );
dd.style.visibility = "hidden"
isvisble= true;
//alert(isvisble+"2");
}
//alert(isvisble);
//var theselectcolor = document.getElementById("theselectcolor");
//id.style.backgroundColor=theselectcolor.value;
//if(
}
function mouse(evt)
{
evt = evt|| window.event;
var mousepos = mouseCoords(evt);
var dd = document.getElementById("yecol");
dd.value = mousepos.x+":";
dd.value += mousepos.y;
}
function mouseCoords(ev){
if(ev.pageX||ev.pageY){return {x:ev.pageX, y:ev.pageY};}
return {x:ev.clientX + document.body.scrollLeft-document.body.clientLeft,y:ev.clientY + document.body.scrollTop-document.body.clientTop}
}
function closeyecol()
{
if(!isvisble)
{
var dd = document.getElementById("yecolcolordiv" );
dd.style.visibility = "hidden"
isvisble= true;
}
}
function m(evt)
{
}
function addcoloritem(pid)
{
var R = G = B = ["3","C","9","6","F","0"];
var coloritems= "<div id='ss' style='margin-left:7px;margin-top:30px;'>";
var i = 0;
var k = 0;
for(r in R)
{
var _R = R[r]+R[r];
for(g in G)
{
var _G = G[g]+G[g];
for(b in B)
{
var _B = B[b]+B[b];
var color = _R+_G+_B;
if(i==13)
{
coloritems +="<br/>";
i= 0;
}
var j = i*19;
//if(i==0)
//{
// k = 0;
//}
//else
//{
// k = -12;
//}
if(i ==0)
{
k=-20;
}
else
{
k=-19;
}
coloritems +="<div class='item' id='"+color+"' οnclick=selectcolor(/'"+color+"/') style='background-color:#"+color+";margin-left:"+j+"px;margin-top:"+k+"px;'></div> "
i++;
}
}
}
coloritems +="<div style='width:30px;heigth:21px;margin-left:153px;margin-top:-17px;font-size:12px;background-color:#FFFFFF'>颜色</div><input id='theselectcolor' type='text' style='width:55px;heigth:15px;margin-left:183px;margin-top:-17px;font-size:12px;' /></div>"
var dd = document.getElementById("yecolcolorcontext");
dd.innerHTML = coloritems;
}
function selectcolor(id)
{
//alert(id);
var textbox = document.getElementById("theselectcolor");
textbox.style.backgroundColor="#"+id;
textbox.value = "#"+id;
closeyecol();
theContorlObj.value="#"+id;
alert("#"+id);
}
</script>
</head>
<body οnlοad="addcoloritem('yecolcolorcontext')">
<div style="width:400px; height:400px; background-color:#960" οnclick="openyecol(event,this)"></div>
<!-- οnlοad="addcoloritem()" -->
<div id='yecolcolordiv' style='position:absolute'>
<div id="yecolcolortitle">yecol颜色板
<div id="yecolcorclose" οnclick="closeyecol()">X</div>
</div>
<div id='yecolcolorcontext'></div>
</div>
<input id='yecol' type="text" value='#FFFFFF' οnclick="openyecol(event,this)" />