wlcxx98 发表于 2013-1-29 07:30:01

jquery的颜色选择插件

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

<div class="highlighter">
[*](function($){
[*]$.fn.extend({
[*]selectColor:function(){
[*]var_d=newDate();
[*]var_tem=_d.getTime();
[*]returnthis.each(function(){
[*]varshowColor=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;
[*]}();
[*]
[*]varcolorH=newArray('00','33','66','99','CC','FF');
[*]varScolorH=newArray('FF0000','00FF00','0000FF','FFFF00','00FFFF','FF00FF');
[*]var_str=newArray();
[*]for(varn=0;n<6;n++)
[*]{
[*]_str.push('<trheight="11">');
[*]_str.push('<tdstyle="width:11px;background-color:#'+colorH+colorH+colorH+'"></td>');
[*]for(vari=0;i<3;i++)
[*]{
[*]for(varj=0;j<6;j++)
[*]{
[*]_str.push('<tdstyle="width:11px;background-color:#'+colorH+colorH+colorH+'"></td>');
[*]}
[*]}
[*]_str.push('</tr>');
[*]}
[*]for(varn=0;n<6;n++)
[*]{
[*]_str.push('<trheight="11">');
[*]_str.push('<tdstyle="width:11px;background-color:#'+ScolorH+'"></td>')
[*]for(vari=3;i<6;i++)
[*]{
[*]for(varj=0;j<6;j++)
[*]{
[*]_str.push('<tdstyle="width:11px;background-color:#'+colorH+colorH+colorH+'"></td>');
[*]}
[*]}
[*]_str.push('</tr>');
[*]}
[*]varcolorStr='<divid="colorShowDiv_'+_tem+'"style="width:229px;position:absolute;z-index:'+_maxindex+';left:'+(_left+_width)+'px;top:'+(_top+_height)+'px;"><tablestyle="width:100%;height:30px;background-color:#CCCCCC;"><tr><tdstyle="width:40%;"><divid="colorShow_'+_tem+'"style="width:80px;height:18px;border:solid1px#000000;background-color:#FFFFFF;"></div></td><tdstyle="width:60%;"><inputid="color_txt_'+_tem+'"type="text"style="width:100px;height:16px;"value="#FFFFFF"/></td></tr></table><tableid="colorShowTable_'+_tem+'"cellpadding="0"cellspacing="1"style="background-color:#000000;">'+_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(newRegExp("","gm"),"");
[*]var_arr=_tmeColor.split(",");
[*]var_tmeColorStr="#";
[*]for(varii=0;ii<_arr.length;ii++)
[*]{
[*]var_temstr=parseInt(_arr).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;
[*]vartag=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);
页: [1]
查看完整版本: jquery的颜色选择插件