可能大家还对颜色的选取还很烦恼.
可是,圣诞节期间.一个新的颜色选择控件已经出场,
它,包含了仿window默认取色器,PS的条型选色器,PS的拾色器,CorelDraw的色环选色器,和很多图像编辑软件通用的基本颜色选色器于一身的,Shake_JS选色器.
下载地址: http://inshake.ik8.com/inshake/shake_js.rar
压缩包包括2个文件(test.htm 和 Color.htm)：
test.htm 代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>测试 </title>
</head>
<script language="javascript">
function ChangeColor(){
var myColor = window.showModalDialog('Color.htm',"ColorWin",'dialogWidth:508px;dialogHeight:412px;status:no');
//变量名自己改myColor 等号后面的就是调用语句.
document.getElementById('Ctextabcdefg').style.color = myColor;
}
</script>
<body>
<p><span id="Ctextabcdefg">改变我的颜色吧,看看效果,<br/>PowerBy:动感Shake<br/>基本原则嫪人侃</span></p>
<p><input name="m" onClick="ChangeColor()" value="选色器" type="button"></p>
</body>
</html>
Color.htm 代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="author" content="动感Shake;QQ:6090900">
<meta name="keyword" content="Shake-JS取色控件">
<meta name="description" content="Shake-JS取色控件,用JS取得颜色">
<meta http-equiv="window-target" content="_top">
<title>Shake-JS取色控件</title>
<style type="text/css">
<!--
.TitleSelect {
cursor:default;
font-size: 12px;
color: #000000;
text-decoration: none;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #666666;
border-right-color: #666666;
border-bottom-color: #EFEBDE;
border-left-color: #666666;
}
.TitleNoSelect {
cursor:default;
font-size: 12px;
color: #999999;
text-decoration: none;
border: 1px solid #666666;
}
.ColorFoot {
cursor:default;
font-size: 12px;
text-decoration: none;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #666666;
border-bottom-color: #666666;
border-left-color: #666666;
border-top-color: #EFEBDE;
}
.ColorBody {
font-size: 12px;
text-decoration: none;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #EFEBDE;
border-right-color: #666666;
border-bottom-color: #EFEBDE;
border-left-color: #666666;
}
.CustomerText {
font-size: 12px;
color: #000000;
text-decoration: none;
}
.TCBox {
font-size: 12px;
text-decoration: none;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #666666;
border-right-color: #EFEBDE;
border-bottom-color: #EFEBDE;
border-left-color: #666666;
}
.Img1px {
font-size: 1px;
text-decoration: none;
}
.Buttons {
width:90%;
height:30px;
font-size: 12px;
text-decoration: none;
background-color: #EFEBDE;
border: 1px solid #666666;
}
.TCBoxSelect {
font-size: 12px;
text-decoration: none;
border: 1px groove #333333;
}
-->
</style>
</head>
<Script language="javascript" type="text/javascript">
var cMode = 1; //当前模式
function TitleOnChange(){
document.getElementById('ColorTitle_'+cMode).className = 'TitleNoSelect';
document.getElementById('Title'+cMode).style.display = 'none';
var CurSelect = event.srcElement;
cMode = CurSelect.id.substring(CurSelect.id.length - 1);
CurSelect.className = 'TitleSelect';
document.getElementById('Title'+cMode).style.display = 'block';
if(cMode != 6){
eval('WinReturnValue.value = Color'+cMode+'HTML.value;');
addButton.disabled = false;
}else{
WinReturnValue.value = "";
addButton.disabled = true;
}
delete CurSelect;
}
