CSS样式设计工具，兼容性很强的颜色控件
http://jmams.github.io/test/201501/test.html
//author zhoubo49@gmail.com
// css生成插件
var JcssPicker = window.JcssPicker || {};
//=========================================
JcssPicker.ui = {
//设置位置
setPoint: function(_x, _y) {
this.x = _x;
this.y = _y;
},
//设置尺寸
setDimension: function(_width, _height) {
this.width = _width;
this.height = _height;
},
//判断是否IE
isIE: function() { return window.ActiveXObject; },
//获取事件
getEvent: function () {
if (this.isIE()) {
return window.event;
}
var func = this.getEvent.caller;
var count = 0;
while (func != null) {
var arg0 = func.arguments[func.arguments.length - 1];
if (arg0) {
if ((arg0.constructor == Event || arg0.constructor == MouseEvent)
|| (typeof (arg0) == "object" && arg0.preventDefault && arg0.stopPropagation)) {
return arg0;
}
}
func = func.caller;
count++;
if (count > 50) {
break;
}
}
return null;
},
//取消默认事件
cancelEvent: function (returnValue) {
var ev = this.getEvent();
if (ev != null) {
ev.cancelBubble = true;
if (ev.originalEvent) {
ev.stopPropagation();
}
if (!returnValue) {
ev.returnValue = false;
if (ev.originalEvent) {
ev.preventDefault();
}
}
}
},
getMousePoint: function(div){
var ev = this.getEvent();
if(div){
var da = this.getMousePoint();
var db = this.getDivPoint(div);
return new this.setPoint(da.x-db.x,da.y-db.y);
}
if(this.isIE()){
var p = this.getDivPoint(ev.srcElement);
return new this.setPoint(p.x+ ev.offsetX,p.y + ev.offsetY);
}else{
return new this.setPoint(ev.clientX + document.body.scrollLeft,ev.clientY + document.body.scrollTop);
}
},
//设置div坐标
setDivPoint: function(div, x, y) {
div.style.top = y + "px";
div.style.left = x + "px";
},
//获得div坐标
getDivPoint: function(div) {
if (div.style
&& (div.style.position == "absolute" || div.style.position == "relative")) {
return new setPoint(div.offsetLeft + 1, div.offsetTop + 1);
} else if (div.offsetParent) {
var d = this.getDivPoint(div.offsetParent);
return new this.setPoint(d.x + div.offsetLeft-div.scrollLeft, d.y + div.offsetTop-div.scrollTop);
} else {
return new this.setPoint(0, 0);
}
}
};
var el = JcssPicker.el = function (element) {
if (typeof element == 'string') {
return document.getElementById(element);
}else { return element; }
};
//===============颜色插件=======================================================================================================
/*用法: JcssPicker.pickColor(control, function(colorVal){...});
*/
JcssPicker.ColorPicker = function (container, currentHEX) {
this.__typeName = "JcssPicker.ColorPicker";
this.container = container == null ? document.body : container;
this.onchange = function () { };
this.colorSelected = null;
this.currentHEX = currentHEX == null ? '#000000' : (currentHEX.match(/^#([0-9a-fA-F]{6}|[0-9a-fA-f]{3})$/) == null ? '#000000': currentHEX.toUpperCase());
this.currentGRAY = '120';
this.lastHEX = '';
this.hexch = new Array('0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F');
};
JcssPicker.ColorPicker.prototype.create = function (doc) {
doc = doc == null ? document : doc;
var control = doc.getElementById('jcss-control-colorpicker');
if (control != null)
return control;
var cnum = new Array(1, 0, 0, 1, 1, 0, 0, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 1, 1, 0, 0);
var owner = this;
control = doc.createElement("div");
control.id = 'jcss-control-colorpicker';
control.style.width = "250px";
control.style.backgroundColor = "#eee";
control.style.display = "block";
control.style.position = "absolute";
control.style.zIndex = 60000;
control.className = "title";
var containertable = doc.createElement("table");
containertable.cellSpacing = 5;
var containerbody = doc.createElement("tbody");
containertable.appendChild(containerbody);
var containertr = doc.createElement("tr");
containertr.style.height = "auto";
containerbody.appendChild(containertr);
var colortd = doc.createElement("td");
var graytd = doc.createElement("td");
containertr.appendChild(colortd);
containertr.appendChild(graytd);
var colortable = doc.createElement("table");
colortable.id = "colorpicker-colortable";
colortable.cellSpacing = 0;
colortable.cellPadding = 0;
colortable.style.cursor = "pointer";
colortd.appendChild(colortable);
colortable.onclick = function () {
owner.currentHEX = JcssPicker.ui.getEvent().srcElement.bgColor;
owner.endColor();
JcssPicker.ui.cancelEvent();
};
colortable.onmouseover = function () {
el('colorpicker-hex').innerText = JcssPicker.ui.getEvent().srcElement.bgColor.toUpperCase();
owner.endColor();
JcssPicker.ui.cancelEvent();
};
colortable.onmouseout = function () {
el('colorpicker-hex').innerText = owner.currentHEX;
owner.endColor();
JcssPicker.ui.cancelEvent();
};
var colortablebody = doc.createElement("tbody");
colortable.appendChild(colortablebody);
for (var i = 0; i < 16; i++) {
var tr = doc.createElement("tr");
tr.style.height = "auto";
colortablebody.appendChild(tr);
for (var j = 0; j < 30; j++) {
n1 = j % 5;
n2 = Math.floor(j / 5) * 3;
n3 = n2 + 3;
var td = doc.createElement("td");
td.style.width = "8px";
td.style.height = "8px";
td.bgColor = this.toColor((cnum[n3] * n1 + cnum[n2] * (5 - n1)),
(cnum[n3 + 1] * n1 + cnum[n2 + 1] * (5 - n1)),
(cnum[n3 + 2] * n1 + cnum[n2 + 2] * (5 - n1)), i);
tr.appendChild(td);
}
}
var graytable = doc.createElement("table");
graytable.cellSpacing = 0;
graytable.cellPadding = 0;
graytable.id = "colorpicker-graytable";
graytable.style.cursor = "pointer";
graytd.appendChild(graytable);
var graytablebody = doc.createElement("tbody");
graytable.appendChild(graytablebody);
for (i = 255; i >= 0; i -= 8.5) {
var tr = doc.createElement("tr");
tr.style.height = "auto";
graytablebody.appendChild(tr);
var td = doc.createElement("td");
td.style.width = "20px";
td.style.height = "4px";
td.title = Math.floor(i * 16 / 17);
tr.bgColor = '#' + this.toHex(i) + this.toHex(i) + this.toHex(i);
tr.appendChild(td);
}
graytable.onclick = function () {
owner.currentGRAY = JcssPicker.ui.getEvent().srcElement.title;
owner.endColor();
JcssPicker.ui.cancelEvent();
return false;
};
graytable.onmouseover = function () {
el('colorpicker-gray').innerText = JcssPicker.ui.getEvent().srcElement.title;
owner.endColor();
JcssPicker.ui.cancelEvent();
return false;
};
graytable.onmouseout = function () {
el('colorpicker-gray').innerText = owner.currentGRAY;
owner.endColor();
JcssPicker.ui.cancelEvent();
return false;
};
control.appendChild(containertable);
var notecontrol = doc.createElement("div");
var notetable = doc.createElement("table");
notetable.cellSpacing = 0;
notetable.cellPadding = 0;
notetable.style.width = "100%";
notecontrol.appendChild(notetable);
var notetablebody = doc.createElement("tbody");
notetable.appendChild(notetablebody);
var notetr = doc.createElement("tr");
notetablebody.appendChild(notetr);
var td = doc.createElement("td");
td.innerHTML = "<table ID=\"colorpicker-showcolor\" style=\"background-color: "+this.currentHEX+";\" bgcolor=\""+this.currentHEX+"\" border=\"1\" width=\"25\" height=\"25\" cellspacing=\"0\" cellpadding=\"0\"><tr><td></td></tr></table><br/><span id=\"colorpicker-selcolor\">"+this.currentHEX+"</span>";
td.align = "center";
td.style.width = "80px";
notetr.appendChild(td);
td = doc.createElement("td");
td.innerHTML = "基色 :<span id=\"colorpicker-hex\">"+this.currentHEX+"</SPAN><BR>亮度 :<span id=\"colorpicker-gray\">120</span>";
notetr.appendChild(td);
td = doc.createElement("td");
td.align = "center";
td.style.width = "60px";
var okbutton = doc.createElement("input");
okbutton.type = "button";
okbutton.className = "button";
okbutton.value = "确定";
okbutton.onclick = function () {
if (owner.colorSelected)
owner.colorSelected(el('colorpicker-selcolor').innerHTML);
};
td.appendChild(okbutton);
notetr.appendChild(td);
notecontrol.onclick = function () { JcssPicker.ui.cancelEvent(); };
control.appendChild(notecontrol);
return control;
};
JcssPicker.ColorPicker.prototype.toColor = function (r, g, b, n) {
r = ((r * 16 + r) * 3 * (15 - n) + 0x80 * n) / 15;
g = ((g * 16 + g) * 3 * (15 - n) + 0x80 * n) / 15;
b = ((b * 16 + b) * 3 * (15 - n) + 0x80 * n) / 15;
return '#' + this.toHex(r) + this.toHex(g) + this.toHex(b);
};
JcssPicker.ColorPicker.prototype.toHex = function (n) {
var h, l;
n = Math.round(n);
l = n % 16;
h = Math.floor((n / 16)) % 16;
return (this.hexch[h] + this.hexch[l]);
};
JcssPicker.ColorPicker.prototype.doColor = function (c, l) {
var r, g, b;
r = '0x' + c.substring(1, 3);
g = '0x' + c.substring(3, 5);
b = '0x' + c.substring(5, 7);
if (l > 120) {
l = l - 120;
r = (r * (120 - l) + 255 * l) / 120;
g = (g * (120 - l) + 255 * l) / 120;
b = (b * (120 - l) + 255 * l) / 120;
}
else {
r = (r * l) / 120;
g = (g * l) / 120;
b = (b * l) / 120;
}
return '#' + this.toHex(r) + this.toHex(g) + this.toHex(b);
};
//
JcssPicker.ColorPicker.prototype.endColor = function () {
if (this.lastHEX != this.currentHEX) {
var i;
this.lastHEX = this.currentHEX;
for (i = 0; i <= 30; i++) {
el('colorpicker-graytable').rows[i].bgColor = this.doColor(this.currentHEX, 240 - i * 8);
}
}
el('colorpicker-selcolor').innerHTML = this.doColor(el('colorpicker-hex').innerText, el('colorpicker-gray').innerText);
el('colorpicker-showcolor').bgColor = el('colorpicker-selcolor').innerHTML;
el('colorpicker-showcolor').style.backgroundColor = el('colorpicker-selcolor').innerHTML;
};
//渲染颜色
JcssPicker.ColorPicker.prototype.renderByColor = function (defaultHEX) {
this.currentHEX = defaultHEX == null ? '#000000' : (defaultHEX.match(/^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/) == null ? '#000000': defaultHEX.toUpperCase());
this.currentHEX = this.currentHEX.substring(1);
if(this.currentHEX.length === 3){ this.currentHEX += this.currentHEX; }
this.currentHEX = "#"+this.currentHEX;
el('colorpicker-hex').innerText = this.currentHEX;
this.endColor();
};
JcssPicker.pickColor = function (control, callBack, defaultHEX) {
JcssPicker.ui.cancelEvent();
var controlColorPicker = document.getElementById('jcss-control-colorpicker');
if (controlColorPicker == null) {
var cp = new JcssPicker.ColorPicker();
controlColorPicker = cp.create();
document.body.appendChild(controlColorPicker);
controlColorPicker.colorPicker = cp;
controlColorPicker.style.display = "none";
document.body.onclick = function(event) {
if(controlColorPicker.style.display == "")
controlColorPicker.style.display = "none";
};
}
if(defaultHEX != null) { controlColorPicker.colorPicker.renderByColor(defaultHEX);}
var p = JcssPicker.ui.getDivPoint(control);
JcssPicker.ui.setDivPoint(controlColorPicker, p.x, p.y+20);
controlColorPicker.style.display = "";
controlColorPicker.colorPicker.colorSelected = function (val) {
if (val != null) {
if (callBack != null) {
callBack(val);
}
else {
if (control != null) {
control.value = val;
}
}
}
controlColorPicker.style.display = "none";
$(control).trigger("change");
};
return false;
};
//收录了140多个具有英文颜色名的的16进制和RGB的颜色对照表
//[颜色中文名, 16进制颜色, RGB整数颜色, RGB百分比颜色]
JcssPicker.ColorRefTable = [
['aliceblue','#f0f8ff','rgb(240,248,255)','rgb(94.1%,96.9%,100%)'],
['antiquewhite','#faebd7','rgb(250,235,215)','rgb(98%,92.2%,84.3%)'],
['aqua','#00ffff','rgb(0,255,255)','rgb(0%,100%,100%)'],
['aquamarine','#7fffd4','rgb(127,255,212)','rgb(49.8%,100%,83.1%)'],
['azure','#f0ffff','rgb(240,255,255)','rgb(94.1%,100%,100%)'],
['beige','#f5f5dc','rgb(245,245,220)','rgb(96.1%,96.1%,86.3%)'],
['bisque','#ffe4c4','rgb(255,228,196)','rgb(100%,89.4%,76.9%)'],
['black','#000000','rgb(0,0,0)','rgb(0%,0%,0%)'],
['blanchedalmond','#ffebcd','rgb(255,235,205)','rgb(100%,92.2%,80.4%)'],
['blue','#0000ff','rgb(0,0,255)','rgb(0%,0%,100%)'],
['blueviolet','#8a2be2','rgb(138,43,226)','rgb(54.1%,16.9%,88.6%)'],
['brown','#a52a2a','rgb(165,42,42)','rgb(64.7%,16.5%,16.5%)'],
['burlywood','#deb887','rgb(222,184,135)','rgb(87.1%,72.2%,52.9%)'],
['cadetblue','#5f9ea0','rgb(95,158,160)','rgb(37.3%,62%,62.7%)'],
['chartreuse','#7fff00','rgb(127,255,0)','rgb(49.8%,100%,0%)'],
['chocolate','#d2691e','rgb(210,105,30)','rgb(82.4%,41.1%,11.8%)'],
['coral','#ff7f50','rgb(255,127,80)','rgb(100%,49.8%,31.4%)'],
['cornflowerblue','#6495ed','rgb(100,149,237)','rgb(39.2%,58.4%,92.9%)'],
['cornsilk','#fff8dc','rgb(255,248,220)','rgb(100%,97.3%,86.3%)'],
['crimson','#dc143c','rgb(220,20,60)','rgb(86.3%,7.8%,23.5%)'],
['cyan','#00ffff','rgb(0,255,255)','rgb(0%,100%,100%)'],
['darkblue','#00008b','rgb(0,0,139)','rgb(0%,0%,54.5%)'],
['darkcyan','#008b8b','rgb(0,139,139)','rgb(0%,54.5%,54.5%)'],
['darkgoldenrod','#b8860b','rgb(184,134,11)','rgb(72.2%,52.5%,4.3%)'],
['darkgray','#a9a9a9','rgb(169,169,169)','rgb(66.3%,66.3%,66.3%)'],
['darkgreen','#006400','rgb(0,100,0)','rgb(0%,39.2%,0%)'],
['darkgrey','#a9a9a9','rgb(169,169,169)','rgb(66.3%,66.3%,66.3%)'],
['darkkhaki','#bdb76b','rgb(189,183,107)','rgb(74.1%,71.8%,42%)'],
['darkmagenta','#8b008b','rgb(139,0,139)','rgb(54.5%,0%,54.5%)'],
['darkolivegreen','#556b2f','rgb(85,107,47)','rgb(33.3%,42%,18.4%)'],
['darkorange','#ff8c00','rgb(255,140,0)','rgb(100%,54.9%,0%)'],
['darkorchid','#9932cc','rgb(153,50,204)','rgb(60%,19.6%,80%)'],
['darkred','#8b0000','rgb(139,0,0)','rgb(54.5%,0%,0%)'],
['darksalmon','#e9967a','rgb(233,150,122)','rgb(91.4%,58.8%,47.8%)'],
['darkseagreen','#8fbc8f','rgb(143,188,143)','rgb(56.1%,73.7%,56.1%)'],
['darkslateblue','#483d8b','rgb(72,61,139)','rgb(28.2%,23.9%,54.5%)'],
['darkslategray','#2f4f4f','rgb(47,79,79)','rgb(18.4%,31%,31%)'],
['darkslategrey','#2f4f4f','rgb(47,79,79)','rgb(18.4%,31%,31%)'],
['darkturquoise','#00ced1','rgb(0,206,209)','rgb(0%,80.8%,82%)'],
['darkviolet','#9400d3','rgb(148,0,211)','rgb(58%,0%,82.7%)'],
['deeppink','#ff1493','rgb(255,20,147)','rgb(100%,7.8%,57.6%)'],
['deepskyblue','#00bfff','rgb(0,191,255)','rgb(0%,74.9%,100%)'],
['dimgray','#696969','rgb(105,105,105)','rgb(41.1%,41.1%,41.1%)'],
['dimgrey','#696969','rgb(105,105,105)','rgb(41.1%,41.1%,41.1%)'],
['dodgerblue','#1e90ff','rgb(30,144,255)','rgb(11.8%,56.5%,100%)'],
['firebrick','#b22222','rgb(178,34,34)','rgb(69.8%,13.3%,13.3%)'],
['floralwhite','#fffaf0','rgb(255,250,240)','rgb(100%,98%,94.1%)'],
['forestgreen','#228b22','rgb(34,139,34)','rgb(13.3%,54.5%,13.3%)'],
['fuchsia','#ff00ff','rgb(255,0,255)','rgb(100%,0%,100%)'],
['gainsboro','#dcdcdc','rgb(220,220,220)','rgb(86.3%,86.3%,86.3%)'],
['ghostwhite','#f8f8ff','rgb(248,248,255)','rgb(97.3%,97.3%,100%)'],
['gold','#ffd700','rgb(255,215,0)','rgb(100%,84.3%,0%)'],
['goldenrod','#daa520','rgb(218,165,32)','rgb(85.5%,64.7%,12.5%)'],
['gray','#808080','rgb(128,128,128)','rgb(50.2%,50.2%,50.2%)'],
['green','#008000','rgb(0,128,0)','rgb(0%,50.2%,0%)'],
['greenyellow','#adff2f','rgb(173,255,47)','rgb(67.8%,100%,18.4%)'],
['grey','#808080','rgb(128,128,128)','rgb(50.2%,50.2%,50.2%)'],
['honeydew','#f0fff0','rgb(240,255,240)','rgb(94.1%,100%,94.1%)'],
['hotpink','#ff69b4','rgb(255,105,180)','rgb(100%,41.1%,70.6%)'],
['indianred','#cd5c5c','rgb(205,92,92)','rgb(80.4%,36%,36%)'],
['indigo','#4b0082','rgb(75,0,130)','rgb(29.4%,0%,51%)'],
['ivory','#fffff0','rgb(255,255,240)','rgb(100%,100%,94.1%)'],
['khaki','#f0e68c','rgb(240,230,140)','rgb(94.1%,90.2%,54.9%)'],
['lavender','#e6e6fa','rgb(230,230,250)','rgb(90.2%,90.2%,98%)'],
['lavenderblush','#fff0f5','rgb(255,240,245)','rgb(100%,94.1%,96.1%)'],
['lawngreen','#7cfc00','rgb(124,252,0)','rgb(48.6%,98.8%,0%)'],
['lemonchiffon','#fffacd','rgb(255,250,205)','rgb(100%,98%,80.4%)'],
['lightblue','#add8e6','rgb(173,216,230)','rgb(67.8%,84.7%,90.2%)'],
['lightcoral','#f08080','rgb(240,128,128)','rgb(94.1%,50.2%,50.2%)'],
['lightcyan','#e0ffff','rgb(224,255,255)','rgb(87.8%,100%,100%)'],
['lightgoldenrodyellow','#fafad2','rgb(250,250,210)','rgb(98%,98%,82.4%)'],
['lightgray','#d3d3d3','rgb(211,211,211)','rgb(82.7%,82.7%,82.7%)'],
['lightgreen','#90ee90','rgb(144,238,144)','rgb(56.5%,93.3%,56.5%)'],
['lightgrey','#d3d3d3','rgb(211,211,211)','rgb(82.7%,82.7%,82.7%)'],
['lightpink','#ffb6c1','rgb(255,182,193)','rgb(100%,71.4%,75.7%)'],
['lightsalmon','#ffa07a','rgb(255,160,122)','rgb(100%,62.7%,47.8%)'],
['lightseagreen','#20b2aa','rgb(32,178,170)','rgb(12.5%,69.8%,66.7%)'],
['lightskyblue','#87cefa','rgb(135,206,250)','rgb(52.9%,80.8%,98%)'],
['lightslategray','#778899','rgb(119,136,153)','rgb(46.7%,53.3%,60%)'],
['lightslategrey','#778899','rgb(119,136,153)','rgb(46.7%,53.3%,60%)'],
['lightsteelblue','#b0c4de','rgb(176,196,222)','rgb(69%,76.9%,87.1%)'],
['lightyellow','#ffffe0','rgb(255,255,224)','rgb(100%,100%,87.8%)'],
['lime','#00ff00','rgb(0,255,0)','rgb(0%,100%,0%)'],
['limegreen','#32cd32','rgb(50,205,50)','rgb(19.6%,80.4%,19.6%)'],
['linen','#faf0e6','rgb(250,240,230)','rgb(98%,94.1%,90.2%)'],
['magenta','#ff00ff','rgb(255,0,255)','rgb(100%,0%,100%)'],
['maroon','#800000','rgb(128,0,0)','rgb(50.2%,0%,0%)'],
['mediumaquamarine','#66cdaa','rgb(102,205,170)','rgb(40%,80.4%,66.7%)'],
['mediumblue','#0000cd','rgb(0,0,205)','rgb(0%,0%,80.4%)'],
['mediumorchid','#ba55d3','rgb(186,85,211)','rgb(72.9%,33.3%,82.7%)'],
['mediumpurple','#9370db','rgb(147,112,219)','rgb(57.6%,43.9%,85.9%)'],
['mediumseagreen','#3cb371','rgb(60,179,113)','rgb(23.5%,70.2%,44.3%)'],
['mediumslateblue','#7b68ee','rgb(123,104,238)','rgb(48.2%,40.8%,93.3%)'],
['mediumspringgreen','#00fa9a','rgb(0,250,154)','rgb(0%,98%,60.4%)'],
['mediumturquoise','#48d1cc','rgb(72,209,204)','rgb(28.2%,82%,80%)'],
['mediumvioletred','#c71585','rgb(199,21,133)','rgb(78%,8.2%,52.2%)'],
['midnightblue','#191970','rgb(25,25,112)','rgb(9.8%,9.8%,43.9%)'],
['mintcream','#f5fffa','rgb(245,255,250)','rgb(96.1%,100%,98%)'],
['mistyrose','#ffe4e1','rgb(255,228,225)','rgb(100%,89.4%,88.2%)'],
['moccasin','#ffe4b5','rgb(255,228,181)','rgb(100%,89.4%,71%)'],
['navajowhite','#ffdead','rgb(255,222,173)','rgb(100%,87.1%,67.8%)'],
['navy','#000080','rgb(0,0,128)','rgb(0%,0%,50.2%)'],
['oldlace','#fdf5e6','rgb(253,245,230)','rgb(99.2%,96.1%,90.2%)'],
['olive','#808000','rgb(128,128,0)','rgb(50.2%,50.2%,0%)'],
['olivedrab','#6b8e23','rgb(107,142,35)','rgb(42%,55.7%,13.7%)'],
['orange','#ffa500','rgb(255,165,0)','rgb(100%,64.7%,0%)'],
['orangered','#ff4500','rgb(255,69,0)','rgb(100%,27.1%,0%)'],
['orchid','#da70d6','rgb(218,112,214)','rgb(85.5%,43.9%,83.9%)'],
['palegoldenrod','#eee8aa','rgb(238,232,170)','rgb(93.3%,91%,66.7%)'],
['palegreen','#98fb98','rgb(152,251,152)','rgb(59.6%,98.4%,59.6%)'],
['paleturquoise','#afeeee','rgb(175,238,238)','rgb(68.6%,93.3%,93.3%)'],
['palevioletred','#db7093','rgb(219,112,147)','rgb(85.9%,43.9%,57.6%)'],
['papayawhip','#ffefd5','rgb(255,239,213)','rgb(100%,93.7%,83.5%)'],
['peachpuff','#ffdab9','rgb(255,218,185)','rgb(100%,85.5%,72.5%)'],
['peru','#cd853f','rgb(205,133,63)','rgb(80.4%,52.2%,24.7%)'],
['pink','#ffc0cb','rgb(255,192,203)','rgb(100%,75.3%,79.6%)'],
['plum','#dda0dd','rgb(221,160,221)','rgb(86.7%,62.7%,86.7%)'],
['powderblue','#b0e0e6','rgb(176,224,230)','rgb(69%,87.8%,90.2%)'],
['purple','#800080','rgb(128,0,128)','rgb(50.2%,0%,50.2%)'],
['red','#ff0000','rgb(255,0,0)','rgb(100%,0%,0%)'],
['rosybrown','#bc8f8f','rgb(188,143,143)','rgb(73.7%,56.1%,56.1%)'],
['royalblue','#4169e1','rgb(65,105,225)','rgb(25.5%,41.1%,100%)'],
['saddlebrown','#8b4513','rgb(139,69,19)','rgb(54.5%,27.1%,7.5%)'],
['salmon','#fa8072','rgb(250,128,114)','rgb(98%,50.2%,44.7%)'],
['sandybrown','#f4a460','rgb(244,164,96)','rgb(95.7%,64.3%,37.6%)'],
['seagreen','#2e8b57','rgb(46,139,87)','rgb(18%,54.5%,34.1%)'],
['seashell','#fff5ee','rgb(255,245,238)','rgb(100%,96.1%,93.3%)'],
['sienna','#a0522d','rgb(160,82,45)','rgb(62.7%,32.2%,17.6%)'],
['silver','#c0c0c0','rgb(192,192,192)','rgb(75.3%,75.3%,75.3%)'],
['skyblue','#87ceeb','rgb(135,206,235)','rgb(52.9%,80.8%,92.2%)'],
['slateblue','#6a5acd','rgb(106,90,205)','rgb(41.6%,35.3%,80.4%)'],
['slategray','#708090','rgb(112,128,144)','rgb(43.9%,50.2%,56.5%)'],
['slategrey','#708090','rgb(112,128,144)','rgb(43.9%,50.2%,56.5%)'],
['snow','#fffafa','rgb(255,250,250)','rgb(100%,98%,98%)'],
['springgreen','#00ff7f','rgb(0,255,127)','rgb(0%,100%,49.8%)'],
['steelblue','#4682b4','rgb(70,130,180)','rgb(27.5%,51%,70.6%)'],
['tan','#d2b48c','rgb(210,180,140)','rgb(82.4%,70.6%,54.9%)'],
['teal','#008080','rgb(0,128,128)','rgb(0%,50.2%,50.2%)'],
['thistle','#d8bfd8','rgb(216,191,216)','rgb(84.7%,74.9%,84.7%)'],
['tomato','#ff6347','rgb(255,99,71)','rgb(100%,38.8%%,27.8%)'],
['turquoise','#40e0d0','rgb(64,224,208)','rgb(25.1%,87.7%,81.6%)'],
['violet','#ee82ee','rgb(238,130,238)','rgb(93.3%,51%,93.3%)'],
['wheat','#f5deb3','rgb(245,222,179)','rgb(96.1%,87.1%,70.2%)'],
['white','#ffffff','rgb(255,255,255)','rgb(100%,100%,100%)'],
['whitesmoke','#f5f5f5','rgb(245,245,245)','rgb(96.1%,96.1%,96.1%)'],
['yellow','#ffff00','rgb(255,255,0)','rgb(100%,100%,0%)'],
['yellowgreen','#9acd32','rgb(154,205,50)','rgb(60.4%,80.4%,19.6%)']
];
//RGB颜色转化为16进制颜色
JcssPicker.rgb2hex = function (rgb) {
//十进制转化为16进制方法
function dec2hex(x) { return ("0" + parseInt(x).toString(16)).slice(-2); };
//RGB颜色转为十六进制颜色
rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
return "#" + dec2hex(rgb[1]) + dec2hex(rgb[2]) + dec2hex(rgb[3]);
};
//16进制颜色转化为RGB颜色
JcssPicker.hex2rgb = function (hex) {
//16进制转化为10进制
function hex2dec(x) {return parseInt(hex,16).toString(); };
hex = hex.substring(1);
if(hex.length === 3){ hex += hex; }
return "rgb("+hex2dec(hex.substring(0,2))+","+hex2dec(hex.substring(2,4))+","+hex2dec(hex.substring(4))+")";
};
//颜色名转化为RGB颜色
JcssPicker.name2rgb = function (name) {
for(var i=0; i< JcssPicker.ColorRefTable.length; i++)
{
if(JcssPicker.ColorRefTable[i][0] == name.toLowerCase()){
return JcssPicker.ColorRefTable[i][2];
}
}
return null;
};
//颜色名转化为16进制颜色
JcssPicker.name2hex = function (name) {
for(var i=0; i< JcssPicker.ColorRefTable.length; i++)
{
if(JcssPicker.ColorRefTable[i][0] == name.toLowerCase()){
return JcssPicker.ColorRefTable[i][1];
}
}
return null;
};
//把所以颜色标记统一转为16进制
JcssPicker.color2hex = function (color) {
color = color.toLowerCase();
//如果是16进制（3位或6位）转6位;
if(/^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/.test(color)) {
color = color.substring(1);
if(color.length === 3){ color += color; }
color = "#"+color;
return color;
}
//如果是rgb则转6位16进制;
if(/^(rgb)/.test(color)) {
color = JcssPicker.rgb2hex(color);
return color;
}
if("transparent" == color) { return "#ffffff"; };
//如果是rgb则转6位16进制;
if(/^(?!rgb)[a-z]+/.test(color)) {
color = JcssPicker.name2hex(color);
return color;
}
return color;
}
//=========================css配置==============================================================
JcssPicker.cssMap = {};
//字体
JcssPicker.cssMap["font"] = {name: "字体", style: "font"};
//字体族
JcssPicker.cssMap["font-family"] = {name: "字体族", style: "fontFamily", opts: [
{ name: '宋体', val: '宋体,SimSun'},
{ name: '雅黑', val: '微软雅黑,Microsoft YaHei'},
{ name: '楷体', val: '楷体,楷体_GB2312, SimKai'},
{ name: '黑体', val: '黑体, SimHei'},
{ name: '隶书', val: '隶书, SimLi'},
{ name: 'andaleMono', val: 'andale mono'},
{ name: 'arial', val: 'arial, helvetica,sans-serif'},
{ name: 'arialBlack', val: 'arial black,avant garde'},
{ name: 'comicSansMs', val: 'comic sans ms'},
{ name: 'impact', val: 'impact,chicago'},
{ name: 'timesNewRoman', val: 'times new roman'}]};
//字体大小
JcssPicker.cssMap["font-size"] = {name: "字体大小", style: "fontSize", opts: [
{ name: '10px', val: '10px'},
{ name: '11px', val: '11px'},
{ name: '12px', val: '12px'},
{ name: '14px', val: '14px'},
{ name: '16px', val: '16px'},
{ name: '18px', val: '18px'},
{ name: '20px', val: '20px'},
{ name: '24px', val: '24px'},
{ name: '36px', val: '36px'}
]};
//字体粗细
JcssPicker.cssMap["font-weight"] = {name: "字体粗细", style: "fontWeight", opts: [
{ name: '标准', val: 'normal'},
{ name: '粗体', val: 'bold'}
]};
//字体倾斜
JcssPicker.cssMap["font-style"] = {name: "字体倾斜", style: "fontStyle", opts: [
{ name: '标准', val: 'normal'},
{ name: '斜体', val: 'italic'}
]};
//文字颜色
JcssPicker.cssMap["color"] = {name: "文字颜色", style: "color"};
//文字对齐
JcssPicker.cssMap["text-align"] = {name: "文字对齐", style: "fontStyle", opts: [
{ name: '左对齐', val: 'left'},
{ name: '右对齐', val: 'right'},
{ name: '居中', val: 'center'}
]};
//文字穿线
JcssPicker.cssMap["text-decoration"] = {name: "文字穿线", style: "textDecoration", opts: [
{ name: '上划线', val: 'overline'},
{ name: '下划线', val: 'underline'},
{ name: '删除线', val: 'line-through'}
]};
//文字行高
JcssPicker.cssMap["line-height"] = {name: "文字行高", style: "lineHeight"};
//垂直对齐
JcssPicker.cssMap["vertical-align"] = {name: "垂直对齐", style: "verticalAlign", opts: [
{ name: '默认', val: 'baseline'},
{ name: '顶端对齐', val: 'top'},
{ name: '中部对齐', val: 'middle'},
{ name: '底部对齐', val: 'bottom'},
{ name: '字体顶端对齐', val: 'text-top'},
{ name: '总统底端对齐', val: 'text-bottom'}
]};
//文字间距
JcssPicker.cssMap["letter-spacing"] = {name: "文字间距", style: "letterSpacing"};
//背景色
JcssPicker.cssMap["background-color"] = {name: "背景色", style: "backgroundColor"};
//宽度
JcssPicker.cssMap["width"] = {name: "宽度", style: "width"};
//高度
JcssPicker.cssMap["height"] = {name: "高度", style: "height"};
//外边距
JcssPicker.cssMap["margin"] = {name: "外边距", style: "margin"};
//内边距
JcssPicker.cssMap["padding"] = {name: "内边距", style: "padding"};
//边框
JcssPicker.cssMap["border"] = {name: "边框", style: "border"};
//边框宽度
JcssPicker.cssMap["border-width"] = {name: "边框宽度", style: "borderWidth"};
//边框风格
JcssPicker.cssMap["border-style"] = {name: "边框风格", style: "borderStyle", opts: [
{ name: '无边框', val: 'none'},
{ name: '虚线', val: 'solid'},
{ name: '虚线', val: 'dashed'}
]};
//边框颜色
JcssPicker.cssMap["border-color"] = {name: "边框颜色", style: "borderColor"};
//======================测试示例,可以注释掉==================================================================
$(document).ready(function() {
initHtml(el("divCssPicker"));
$("#divCssPicker").find("[jsstyle]").on("change", function(){
$("#divTest").css($(this).attr("cssstyle"), $(this).val());
document.getElementById('txtTest').value = el("divTest").style.cssText;
});
document.getElementById('txtTest').value = el("divTest").style.cssText;
});
function initHtml(elm) {
var divList = $(elm).addClass("JcssPicker-list");
divList.empty();
for(var cssStyle in JcssPicker.cssMap)
{
if (JcssPicker.cssMap.hasOwnProperty(cssStyle))
{
var styleMap = JcssPicker.cssMap[cssStyle];
var divItem = $("<div>").addClass("JcssPicker-item").appendTo(divList);
var divDesc = $("<div>").attr("title", cssStyle).addClass("Jcss-desc").appendTo(divItem);
var divDisp = $("<div>").attr("title", cssStyle).addClass("Jcss-disp").appendTo(divItem);
divDesc.html(styleMap["name"]+":");
if( styleMap["opts"] && styleMap["opts"].length > 0) {
var sel = $("<select>").addClass("Jcss-select").appendTo(divDisp);
sel.attr("cssstyle",cssStyle);
sel.attr("jsstyle",styleMap["style"]);
sel.append("<option>");
for(var i = 0; i< styleMap["opts"].length; i++) {
sel.append("<option value='"+styleMap["opts"][i]["val"]+"'>"+styleMap["opts"][i]["name"]+"</option>");
}
}
else {
var input = $("<input>").addClass("Jcss-input").appendTo(divDisp);
input.attr("cssstyle",cssStyle);
input.attr("jsstyle",styleMap["style"]);
}
}
}
divList.find("[jsstyle='color'],[jsstyle='borderColor'],[jsstyle='backgroundColor']").click(function(){
JcssPicker.pickColor(this, null, this.value);
});
}
