忙了一夜,终于把jquery的颜色选择插件写完了,不多说了,看看代码吧。

(function($){ 
$.fn.extend({ 
selectColor:function(){ 
var _d = new Date(); 
var _tem = _d.getTime(); 
return this.each(function(){ 
var showColor = function(_obj){ 
var _left = parseInt($(_obj).offset().left); 
var _top = parseInt($(_obj).offset().top); 
var _width = parseInt($(_obj).width()); 
var _height = parseInt($(_obj).height()); 
var _maxindex = function(){ 
var ___index = 0; 
$.each($("*"),function(i,n){ 
var __tem = $(n).css("z-index"); 
if(__tem>0) 
{ 
if(__tem > ___index) 
{ 
___index = __tem + 1; 
} 
} 
}); 
return ___index; 
}(); 
var colorH = new Array('00','33','66','99','CC','FF'); 
var ScolorH = new Array('FF0000','00FF00','0000FF','FFFF00','00FFFF','FF00FF'); 
var _str = new Array(); 
for(var n = 0 ; n < 6 ; n++) 
{ 
_str.push('<tr height="11">'); 
_str.push('<td></td>'); 
for(var i = 0 ; i < 3; i++) 
{ 
for(var j = 0 ; j < 6 ; j++) 
{ 
_str.push('<td></td>'); 
} 
} 
_str.push('</tr>'); 
} 
for(var n = 0 ; n < 6 ; n++) 
{ 
_str.push('<tr height="11">'); 
_str.push('<td></td>') 
for(var i = 3 ; i < 6; i++) 
{ 
for(var j = 0 ; j < 6 ; j++) 
{ 
_str.push('<td></td>'); 
} 
} 
_str.push('</tr>'); 
} 
var colorStr = '<div id="colorShowDiv_'+_tem+'"><table><tr><td><div id="colorShow_'+_tem+'"></div></td><td><input id="color_txt_'+_tem+'" type="text" value="#FFFFFF" /></td></tr></table><table id="colorShowTable_'+_tem+'" cellpadding="0" cellspacing="1">'+_str.join('')+'</table></div>' 
$("body").append(colorStr); 
var _currColor; 
var _currColor2; 
$("#colorShowTable_"+_tem+" td").mouseover(function(){ 
var _color = $(this).css("background-color"); 
if(_color.indexOf("rgb")>=0) 
{ 
var _tmeColor = _color; 
_tmeColor = _color.replace("rgb",""); 
_tmeColor = _tmeColor.replace("(",""); 
_tmeColor = _tmeColor.replace(")",""); 
_tmeColor = _tmeColor.replace(new RegExp(" ","gm"),""); 
var _arr = _tmeColor.split(","); 
var _tmeColorStr = "#"; 
for(var ii = 0 ; ii < _arr.length ; ii++) 
{ 
var _temstr = parseInt(_arr[ii]).toString(16); 
_temstr = _temstr.length < 2 ? "0"+_temstr : _temstr; 
_tmeColorStr += _temstr; 
} 
} 
$("#color_txt_"+_tem).val(_tmeColorStr); 
$("#colorShow_"+_tem).css("background-color",_color); 
_currColor = _color; 
_currColor2 = _tmeColorStr; 
$(this).css("background-color","#FFFFFF"); 
}); 
$("#colorShowTable_"+_tem+" td").mouseout(function(){ 
$(this).css("background-color",_currColor); 
}); 
$("#colorShowTable_"+_tem+" td").click(function(){ 
$(_obj).val(_currColor2); 
}); 
} 
$(this).click(function(){ 
showColor(this); 
}); 
var _sobj = this; 
$(document).click(function(e){ 
e = e ? e : window.event; 
var tag = e.srcElement || e.target; 
if(_sobj.id==tag.id)return; 
var _temObj = tag; 
while(_temObj) 
{ 
if(_temObj.id=="colorShowDiv_"+_tem)return; 
_temObj = _temObj.parentNode; 
} 
$("#colorShowDiv_"+_tem).remove(); 
}); 
}); 
} 
}); 
})(jQuery);

使用方法:

$(document).ready(function(){ 
$("#要绑定的ID").selectColor(); 
});

注意:要绑定的对像一定要是文本输入框