/**
* jQuery颜色面板插件
*
* 使用方法:input框的id默认为inputObj,button框的id默认为btnObj,也可以自定义aaa,bbb
* 1、初始化颜色面板:$.color.initColor();
* 2、绑定颜色面板:$.color.showColor();或者$.color.showColor({inputObj:'aaa',btnObj:'bbb'})
* @author Ivan 2862099249@qq.com
* @date 2014年12月13日 下午3:06:55
* @version V1.0
* @param $
*/
(function($) { $.color = {}; var colorHex = [ '00', '33', '66', '99', 'CC', 'FF' ];
var spColorHex = [ 'FF0000', '00FF00', '0000FF', 'FFFF00', '00FFFF','FF00FF' ]; var colorPanel = '<div id="colorPanel" style="position: absolute; display: none;"></div>'; function initColor() {
$("body").append(colorPanel);
var colorTable = '';
for (var i = 0; i < 2; i++) {
for (var j = 0; j < 6; j++) {
colorTable += '<tr height=12>';
colorTable += '<td width=11 style="background-color:#000000">'; if (i == 0) {
colorTable += '<td width=11 style="background-color:#'+ colorHex[j] + colorHex[j] + colorHex[j] + '">';
} else {
colorTable += '<td width=11 style="background-color:#'+ spColorHex[j] + '">';
} colorTable += '<td width=11 style="background-color:#000000">';
for (var k = 0; k < 3; k++) {
for (var l = 0; l < 6; l++) {
colorTable += '<td width=11 style="background-color:#'+ colorHex[k + i * 3] + colorHex[l]+ colorHex[j] + '">';
}
}
}
} colorTable = '<table width=232 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=#ffffff>'
+ '<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);
} // 插件的defaults
$.color.defaults = {
inputObj : 'inputObj',
btnObj : 'btnObj'
}; // 十六进制颜色值的正则表达式
var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
/* RGB颜色转换为16进制 */
String.prototype.colorHex = function() {
var that = this;
if (/^(rgb|RGB)/.test(that)) {
var aColor = that.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(",");
var strHex = "#";
for (var i = 0; i < aColor.length; i++) {
var hex = Number(aColor[i]).toString(16);
if (hex === "0") {
hex += hex;
}
strHex += hex;
}
if (strHex.length !== 7) {
strHex = that;
}
return strHex;
} else if (reg.test(that)) {
var aNum = that.replace(/#/, "").split("");
if (aNum.length === 6) {
return that;
} else if (aNum.length === 3) {
var numHex = "#";
for (var i = 0; i < aNum.length; i += 1) {
numHex += (aNum[i] + aNum[i]);
}
return numHex;
}
} else {
return that;
}
}; /* 16进制颜色转为RGB格式 */
String.prototype.colorRgb = function() {
var sColor = this.toLowerCase();
if (sColor && reg.test(sColor)) {
if (sColor.length === 4) {
var sColorNew = "#";
for (var i = 1; i < 4; i += 1) {
sColorNew += sColor.slice(i, i + 1).concat(
sColor.slice(i, i + 1));
}
sColor = sColorNew;
}
// 处理六位的颜色值
var sColorChange = [];
for (var i = 1; i < 7; i += 2) {
sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)));
}
return "RGB(" + sColorChange.join(",") + ")";
} else {
return sColor;
}
}; $.color.showColor = function(options){ var opts = $.extend({}, $.color.defaults, options);
$('#' + opts.btnObj).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 rgbColor = $(this).css("background-color");
var hexColor = rgbColor.colorHex(); $("#DisColor").css("background-color", hexColor);
$("#HexColor").val(hexColor);
}).click(function() {
var rgbColor = $(this).css("background-color");
var hexColor = rgbColor.colorHex(); $('#' + opts.inputObj).val(hexColor).css("color", hexColor);
$("#colorPanel").hide();
}); $("#_cclose").click(function() {
$("#colorPanel").hide();
}).css({
"font-size" : "12px",
"padding-left" : "20px"
});
});
}; $.color.initColor = function(){
initColor();
$("#colorPanel").hide();
}; })(jQuery);

jQuery颜色面板插件的更多相关文章

  1. 11个JavaScript颜色选择器插件

    几年前,很难找到一个合适的颜色选择器.正好看到很多不错的JavaScript颜色选择器插件,故而把这些编译汇总.在本文,Web设计师和开发人员 Kevin Liew 选取了11个相应插件,有些会比较复 ...

  2. 提升用户体验的最佳免费 jQuery 表单插件

    网页表单是一个老生常谈的话题.出于这样或那样的目的,一些示例中都会包括用户注册,电子商务结算,用户设置甚至联系人表格.而输入栏是非常容易用现代的CSS3技术来应用样式.但是到底什么决定整体用户体验? ...

  3. 【精心挑选】15款最好的 jQuery 网格布局插件(Grid Plugins)

    如今,大多数网站设计要靠网格系统和布局,这能够提供给设计人员一个方便的途径来组织网页上的内容.网格的设计最常见于报纸和杂志的版面,由文字和图像构成的列组成. 这篇文章给大家分享精心挑选的15款最佳的 ...

  4. Adaptive Backgrounds – jQuery 自适应背景插件

    Adaptive Backgrounds 是一款很特别的 jQuery 插件,可以从图像中提取主导颜色并将它应用到它的父元素.这个插件利用 Canvas 元素和 ImageData 对象.需要注意的是 ...

  5. 三、jQuery--jQuery基础--jQuery基础课程--第10章 jQuery UI型插件

    1.拖曳插件——draggable 拖曳插件draggable的功能是拖动被绑定的元素,当这个jQuery UI插件与元素绑定后,可以通过调用draggable()方法,实现各种拖曳元素的效果,调用格 ...

  6. jQuery 图片剪裁插件初探之 Jcrop

    主页:http://deepliquid.com/content/Jcrop.html 官方下载地址:http://deepliquid.com/content/Jcrop_Download.html ...

  7. 5个最顶级jQuery图表类库插件-Charting plugin

    转载: http://www.cnblogs.com/chu888chu888/archive/2012/12/22/2828962.html 作者:Leonel Hilario翻译:Terry li ...

  8. jquery的常用插件

    jquery的常用插件jquery的常用插件jquery的常用插件jquery的常用插件jquery的常用插件 放大镜: cloud-zoom(这个效果很炫) 图片查看: fancybox(灯箱) t ...

  9. 提示用户体验的最佳免费 Jquery 表单插件

    网页表单是一个老生常谈的话题.出于这样或那样的目的,一些示例中都会包括用户注册,电子商务结算,用户设置甚至联系人表格.而输入栏是非常容易用现代的CSS3技术来应用样式.但是到底什么决定整体用户体验? ...

随机推荐

  1. timus1716(概率dp)

    题意无比诡异. http://acm.timus.ru/problem.aspx?space=1&num=1716 俄罗斯的英文简直把我吓尿. 题意是对于输入:X1X2X3X4(Xi为YES或 ...

  2. FastExcel遇到的问题

    第一次使用FastExcel发现在创建excel文件的时候不成功,一直报这个问题: org.apache.poi.EmptyFileException: The supplied file was e ...

  3. 《从零开始学Swift》学习笔记(Day 14)——字符串的插入、删除和替换

    原创文章,欢迎转载.转载请注明:关东升的博客 对应可变字符串可以插入.删除和替换,String提供了几个方法可以帮助实现这些操作.这些方法如下: splice(_:atIndex:).在索引位置插入字 ...

  4. jwPlayer读取本地视频及相关配置(Tomcat配置虚拟目录)

    最近做项目,发现好多知识点都是以前做过的或用过的,但最后要用到的时候,要么就记不牢了,要么就还是得重新整理一遍,所以以后有用的东东,尽量整理一下或Market下了. 项目要求:读取服务器多个视频到本地 ...

  5. PLSQL 用的让自己更舒心点!

    每天开发时候  ,有时候会疲劳! 改下你的PLSQL 字体吧!

  6. SpringBoot-------实现多数据源Demo

    之前SpringBoot出来时候就看了下Springboot,感觉的确精简掉了配置文件! 还是很方便的!没办法,我只是个菜鸟! 什么怎么启动Springboot什么的就不说了, 具体的Demo地址我都 ...

  7. 简单的 ajax demo

    2.最重要也是最核心的是要自己改下bootstrap-paginator.js源文件,如下: [javascript] view plain copy      function oneferRepo ...

  8. MySQL中的索引提示Index Hint

    MySQL数据库支持索引提示(INDEX HINT)显式的高速优化器使用了哪个索引.以下是可能需要用到INDEX HINT的情况 a)MySQL数据库的优化器错误的选择了某个索引,导致SQL运行很慢. ...

  9. python实现复制整个目录的方法

    import shutil #复制文件 shutil.copyfile('listfile.py', 'd:/test.py') #复制目录 shutil.copytree('d:/temp', 'c ...

  10. LeNet5

    Lecun Y, Bottou L, Bengio Y, et al. Gradient-based learning applied to document recognition[J]. Proc ...