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('');
_str.push('');
for(var i = 0 ; i < 3; i++)
{
for(var j = 0 ; j < 6 ; j++)
{
_str.push('');
}
}
_str.push('');
}
for(var n = 0 ; n < 6 ; n++)
{
_str.push('');
_str.push('')
for(var i = 3 ; i < 6; i++)
{
for(var j = 0 ; j < 6 ; j++)
{
_str.push('');
}
}
_str.push('');
}
var colorStr = '

'+_str.join('')+'

'
$("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();
});

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