Jquery颜色选择器Demo,真的非常好用的
本人比较懒，直接给源码了！
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<script src="http://www.cnblogs.com/Scripts/jquery-1.7.2.min.js" type="text/javascript"></script> ///你的Jquery库
<script type="text/javascript" src="http://www.google.cn/jsapi"></script>
<script src="http://www.cnblogs.com/Plugins/ColorPicker/jquery.colorpicker.js" type="text/javascript"></script> ///你必须加载的jquery文件
<script language="javascript" type="text/javascript">
function getColor() {
var Color = $("#txtcolor").val();
//alert(Color.toString());
$("#Words").css("color", "red");
$("#Words").css("color", Color.toString());
}
</script>
</head>
<body>
<div>
<script type="text/javascript">
$(function () {
$.showcolor('btncolor', 'txtcolor'); //第一参数：按钮ID，第二参数： 文本框ID
$.showcolor('imgcolor', 'txtcolor1');
})
</script>
<input type="text" id="txtcolor" />
<input type="button" id="btncolor" value="选取字体颜色" />
<input type="button" id="getColor" onclick="getColor();" value="给字体加颜色" />
<span id="Words">
选择的文字
</span>
</div>
</body>
</html>
jquery.colorpicker.js 文件内容如下：
/**
* @author 疯狂秀才 (代加工，不算原创，jquery 插件不是很熟，拿此练练！！)
* QQ:1055818239
*/
var ColorHex = new Array('00', '33', '66', '99', 'CC', 'FF');
var SpColorHex = new Array('FF0000', '00FF00', '0000FF', 'FFFF00', '00FFFF', 'FF00FF');
$(function () {
initColor();
$("#colorpanel").hide();
})
function initColor() {
$("body").append('<div id="colorpanel" style="position: absolute; display: none;"></div>');
var colorTable = '';
for (i = 0; i < 2; i++) {
for (j = 0; j < 6; j++) {
colorTable = colorTable + '<tr height=12>'
colorTable = colorTable + '<td width=11 style="background-color:#000000">'
if (i == 0) {
colorTable = colorTable + '<td width=11 style="background-color:#' + ColorHex[j] + ColorHex[j] + ColorHex[j] + '">'
} else {
colorTable = colorTable + '<td width=11 style="background-color:#' + SpColorHex[j] + '">'
}
colorTable = colorTable + '<td width=11 style="background-color:#000000">'
for (k = 0; k < 3; k++) {
for (l = 0; l < 6; l++) {
colorTable = colorTable + '<td width=11 style="background-color:#' + ColorHex[k + i * 3] + ColorHex[l] + ColorHex[j] + '">'
}
}
}
}
colorTable = '<table width=253 border="0" cellspacing="0" cellpadding="0" style="border:1px #000000 solid;border-bottom:none;border-collapse: collapse" bordercolor="000000">'
+ '<tr height=30><td colspan=21 bgcolor=#cccccc>'
+ '<table cellpadding="0" cellspacing="1" border="0" style="border-collapse: collapse">'
+ '<tr><td width="3"><td><input type="text" id="DisColor" size="6" disabled style="border:solid 1px #000000;background-color:#ffff00"></td>'
+ '<td width="3"><td><input type="text" id="HexColor" size="7" style="border:inset 1px;font-family:Arial;" value="#000000"><a href=### id="_cclose">关闭</a></td></tr></table></td></table>'
+ '<table id="CT" border="1" cellspacing="0" cellpadding="0" style="border-collapse: collapse" bordercolor="000000" style="cursor:pointer;">'
+ colorTable + '</table>';
$("#colorpanel").html(colorTable);
}
function showColorPanel(obj, txtobj) {
$('#' + obj).click(function () {
//定位
var ttop = $(this).offset().top; //控件的定位点高
var thei = $(this).height(); //控件本身的高
var tleft = $(this).offset().left; //控件的定位点宽
$("#colorpanel").css({
top: ttop + thei + 5,
left: tleft
})
$("#colorpanel").show();
$("#CT tr td").unbind("click").mouseover(function () {
var aaa = $(this).css("background-color");
$("#DisColor").css("background-color", aaa);
$("#HexColor").val(aaa);
}).click(function () {
var aaa = $(this).css("background-color");
$('#' + txtobj).val(aaa).css("color", aaa);
$("#colorpanel").hide();
})
$("#_cclose").click(function () { $("#colorpanel").hide(); }).css({ "font-size": "12px", "padding-left": "20px" })
})
}
jQuery.extend({
showcolor: function (btnid, txtid) { showColorPanel(btnid, txtid); }
})
完成， 效果如下图所示
