jQuery颜色面板插件
/**
* 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颜色面板插件的更多相关文章
- 11个JavaScript颜色选择器插件
几年前,很难找到一个合适的颜色选择器.正好看到很多不错的JavaScript颜色选择器插件,故而把这些编译汇总.在本文,Web设计师和开发人员 Kevin Liew 选取了11个相应插件,有些会比较复 ...
- 提升用户体验的最佳免费 jQuery 表单插件
网页表单是一个老生常谈的话题.出于这样或那样的目的,一些示例中都会包括用户注册,电子商务结算,用户设置甚至联系人表格.而输入栏是非常容易用现代的CSS3技术来应用样式.但是到底什么决定整体用户体验? ...
- 【精心挑选】15款最好的 jQuery 网格布局插件(Grid Plugins)
如今,大多数网站设计要靠网格系统和布局,这能够提供给设计人员一个方便的途径来组织网页上的内容.网格的设计最常见于报纸和杂志的版面,由文字和图像构成的列组成. 这篇文章给大家分享精心挑选的15款最佳的 ...
- Adaptive Backgrounds – jQuery 自适应背景插件
Adaptive Backgrounds 是一款很特别的 jQuery 插件,可以从图像中提取主导颜色并将它应用到它的父元素.这个插件利用 Canvas 元素和 ImageData 对象.需要注意的是 ...
- 三、jQuery--jQuery基础--jQuery基础课程--第10章 jQuery UI型插件
1.拖曳插件——draggable 拖曳插件draggable的功能是拖动被绑定的元素,当这个jQuery UI插件与元素绑定后,可以通过调用draggable()方法,实现各种拖曳元素的效果,调用格 ...
- jQuery 图片剪裁插件初探之 Jcrop
主页:http://deepliquid.com/content/Jcrop.html 官方下载地址:http://deepliquid.com/content/Jcrop_Download.html ...
- 5个最顶级jQuery图表类库插件-Charting plugin
转载: http://www.cnblogs.com/chu888chu888/archive/2012/12/22/2828962.html 作者:Leonel Hilario翻译:Terry li ...
- jquery的常用插件
jquery的常用插件jquery的常用插件jquery的常用插件jquery的常用插件jquery的常用插件 放大镜: cloud-zoom(这个效果很炫) 图片查看: fancybox(灯箱) t ...
- 提示用户体验的最佳免费 Jquery 表单插件
网页表单是一个老生常谈的话题.出于这样或那样的目的,一些示例中都会包括用户注册,电子商务结算,用户设置甚至联系人表格.而输入栏是非常容易用现代的CSS3技术来应用样式.但是到底什么决定整体用户体验? ...
随机推荐
- http://www.haolizi.net/example/view_2380.html
null
- Linq与扩展方法
使用数据集 /// <summary> /// 库房信息类 /// </summary> public class Kfxx { /// <summary> /// ...
- using 关键字的使用
using 关键字的使用主要分为两种类型:using declaration(using 声明)和using directive(using 命令): using 声明:引入特定名称空间中的一个成员. ...
- httpclient设置proxy与proxyselector
If single proxy for all targets is enough for you: HttpComponentsClientHttpRequestFactory clientHttp ...
- 【转】NAS、DAS和SAN存储的特点及主要区别
接触过存储设备的朋友应该对NAS.DAS和SAN存储不陌生,作为目前三种常见的存储方式,被广泛应用于企业存储设备中,那么NAS.DAS和SAN这三种存储分别有什么特点,又有何区别呢? 一.NAS存储特 ...
- Security Report: Stop using relative path to import CSS files
Detecting and exploiting path-relative stylesheet import (PRSSI) vulnerabilities Early last year G ...
- 22个所见即所得在线Web编辑器
这些 Web 编辑器可以在线编辑和处理富 Web 内容,包括格式文本,表格,图片,媒体,链接等等,非常适合集成到 CMS网站内容管理系统中使用.本文又搜集了 22 个 Web 在线编辑器,它们基本代表 ...
- java integer String之equals vs ==
Integer a = new Integer(123); Integer b = new Integer(123); System.out.println(a == b); System.out.p ...
- jQuery实现复选框全选、全不选、反选问题解析
今天打算用jQuery实现一下复选框的全选.全不选和反选问题,刚开始用的是attr("checked",true/false)方法,发现只能在最开始实现一次全选,可以实现全不选,无 ...
- Java关键字this
Java关键字this只能用于方法方法体内.当一个对象创建后,Java虚拟机(JVM)就会给这个对象分配一个引用自身的指针,这个指针的名字就是 this.因此,this只能在类中的非静态方法中使用,静 ...