jquery的颜色选择插件实例代码


Posted in Javascript onOctober 02, 2008
(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 style="width:11px;background-color:#'+colorH[n]+colorH[n]+colorH[n]+'"></td>'); 
for(var i = 0 ; i < 3; i++) 
{ 
for(var j = 0 ; j < 6 ; j++) 
{ 
_str.push('<td style="width:11px;background-color:#'+colorH[i]+colorH[j]+colorH[n]+'"></td>'); 
} 
} 
_str.push('</tr>'); 
} 
for(var n = 0 ; n < 6 ; n++) 
{ 
_str.push('<tr height="11">'); 
_str.push('<td style="width:11px;background-color:#'+ScolorH[n]+'"></td>') 
for(var i = 3 ; i < 6; i++) 
{ 
for(var j = 0 ; j < 6 ; j++) 
{ 
_str.push('<td style="width:11px;background-color:#'+colorH[i]+colorH[j]+colorH[n]+'"></td>'); 
} 
} 
_str.push('</tr>'); 
} 
var colorStr = '<div id="colorShowDiv_'+_tem+'" style="width:229px;position:absolute;z-index:'+_maxindex+';left:'+(_left+_width)+'px;top:'+(_top+_height)+'px;"><table style="width:100%; height:30px; background-color:#CCCCCC;"><tr><td style="width:40%;"><div id="colorShow_'+_tem+'" style="width:80px; height:18px; border:solid 1px #000000; background-color:#FFFFFF;"></div></td><td style="width:60%;"><input id="color_txt_'+_tem+'" type="text" style="width:100px; height:16px;" value="#FFFFFF" /></td></tr></table><table id="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(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(); 
});

注意:要绑定的对像一定要是文本输入框
Javascript 相关文章推荐
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
Feb 15 Javascript
jQuery $.data()方法使用注意细节
Dec 31 Javascript
JavaScript建立一个语法高亮输入框实现思路
Feb 26 Javascript
鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)
Dec 14 Javascript
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
Apr 10 Javascript
javascript判断是否按回车键并解决浏览器之间的差异
May 13 Javascript
Bootstrap风格的WPF样式
Dec 07 Javascript
微信小程序 开发MAP(地图)实例详解
Jun 27 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
Oct 12 Javascript
深入理解 Koa 框架中间件原理
Oct 18 Javascript
JS监听事件的叠加和移除功能
Nov 19 Javascript
解决微信小程序中的滚动穿透问题
Sep 16 Javascript
初学JavaScript_03(ExtJs Grid的简单使用)
Oct 02 #Javascript
JavaScript下申明对象的几种方法小结
Oct 02 #Javascript
初学JavaScript第二章
Sep 30 #Javascript
select组合框option的捕捉实例代码
Sep 30 #Javascript
javascript优先加载笔记代码
Sep 30 #Javascript
javascript显示隐藏层比较不错的方法分析
Sep 30 #Javascript
javascript不同页面传值的改进版
Sep 30 #Javascript
You might like
一些PHP写的小东西
2006/12/06 PHP
木翼下载系统中说明的PHP安全配置方法
2007/06/16 PHP
php学习之简单计算器实现代码
2011/06/09 PHP
php 读取文件头判断文件类型的实现代码
2013/08/05 PHP
php生成随机密码自定义函数代码(简单快速)
2014/05/10 PHP
浅析PHP编程中10个最常见的错误
2014/08/08 PHP
php中curl使用指南
2015/02/05 PHP
laravel 解决groupBy时出现的错误 isn't in Group By问题
2019/10/17 PHP
如何在centos8自定义目录安装php7.3
2019/11/28 PHP
jQuery对象与DOM对象之间的转换方法
2010/04/15 Javascript
jquery学习笔记 用jquery实现无刷新登录
2011/08/08 Javascript
模拟select的代码
2011/10/19 Javascript
如何使用json在前后台进行数据传输实例介绍
2013/04/11 Javascript
jQuery焦点图切换特效插件封装实例
2013/08/18 Javascript
js实现图片在未加载完成前显示加载中字样
2014/09/03 Javascript
JavaScript观察者模式(经典)
2015/12/09 Javascript
js仿iphone秒表功能 计算平均数
2017/01/11 Javascript
JS实现最简单的冒泡排序算法
2017/02/15 Javascript
解决echarts的多个折现数据出现坐标和值对不上的问题
2018/12/28 Javascript
详解javascript中的Error对象
2019/04/25 Javascript
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
2020/11/03 Javascript
Windows上使用Python增加或删除权限的方法
2018/04/24 Python
对dataframe进行列相加,行相加的实例
2018/06/08 Python
Python识别快递条形码及Tesseract-OCR使用详解
2019/07/15 Python
pytorch::Dataloader中的迭代器和生成器应用详解
2020/01/03 Python
TensorFlow tf.nn.conv2d实现卷积的方式
2020/01/03 Python
详解python爬取弹幕与数据分析
2020/11/14 Python
工商管理专业应届生求职信
2013/11/04 职场文书
涉密人员保密承诺书
2014/05/28 职场文书
罚站检讨书
2015/01/29 职场文书
学习焦裕禄先进事迹心得体会
2016/01/23 职场文书
课改心得体会范文
2016/01/25 职场文书
高中信息技术教学反思
2016/02/16 职场文书
关于感恩的歌曲整理(8首)
2019/08/14 职场文书
python之基数排序的实现
2021/07/26 Python
WINDOWS下安装mysql 8.x 的方法图文教程
2022/04/19 MySQL