@ -14,7 +14,7 @@
This < strong > 4.4KB< / strong > small HSB color picker is based on a subset of < a href = "https://github.com/PitPik/colorPicker/blob/master/colors.js" > colors.js< / a > from it's big brother < a href = "http://dematte.at/colorPicker/" > colorPicker< / a > , supports all modern features like touch and MS pointer, GPU accelerated rendering, battery friendly requestAnimationFrame and provides a lot of hooks for developers to write plugins (See demo plugins below in < a href = "#demo" > Demo< / a > ).< / p >
This < strong > 4.4KB< / strong > small HSB color picker is based on a subset of < a href = "https://github.com/PitPik/colorPicker/blob/master/colors.js" > colors.js< / a > from it's big brother < a href = "http://dematte.at/colorPicker/" > colorPicker< / a > , supports all modern features like touch and MS pointer, GPU accelerated rendering, battery friendly requestAnimationFrame and provides a lot of hooks for developers to write plugins (See demo plugins below in < a href = "#demo" > Demo< / a > ).< / p >
< a name = "demo" id = "demo" > < / a >
< a name = "demo" id = "demo" > < / a >
< h2 > Demo< / h2 >
< h2 > Demo< / h2 >
On all inputs with ca lssName 'color': < pre > $('input.color').colorPicker();< / pre >
On all inputs with cla ssName 'color': < pre > $('input.color').colorPicker();< / pre >
< p > Switch between plugins:
< p > Switch between plugins:
< select id = "pluginSelect" >
< select id = "pluginSelect" >
< option value = "desktop" > Desktop (no plugin)< / option >
< option value = "desktop" > Desktop (no plugin)< / option >
@ -66,9 +66,9 @@ window.myColorPicker = $('input.color').colorPicker({
< p > Will follow... See < a href = "https://github.com/PitPik/tinyColorPicker" > tinyColorPicke on GitHub< / a > for now.< / p >
< p > Will follow... See < a href = "https://github.com/PitPik/tinyColorPicker" > tinyColorPicke on GitHub< / a > for now.< / p >
<!-- <script type="text/javascript" src="jquery - 1.11.2.js"></script> -->
<!-- <script type="text/javascript" src="jquery - 1.11.2.js"></script> -->
< script src = "http://code.jquery.com/jquery-1.11.2.min.js" > < / script >
< script src = "http://code.jquery.com/jquery-1.11.2.min.js" > < / script >
< script type = "text/javascript" src = "colors.js" > < / script >
<!-- <script type="text/javascript" src="colors.js"></script> -- >
< script type = "text/javascript" src = "jqColorPicker.js" > < / script >
<!-- <script type="text/javascript" src="jqColorPicker.js"></script> -- >
<!-- <script type="text/javascript" src="jqColorPicker.min.js"></script> -- >
< script type = "text/javascript" src = "jqColorPicker.min.js" > < / script >
< script type = "text/javascript" >
< script type = "text/javascript" >
(function(window, undefined){
(function(window, undefined){
'use strict';
'use strict';
@ -135,7 +135,8 @@ window.myColorPicker = $('input.color').colorPicker({
'B < input type = "text" class = "cp-b" / > < hr > ' +
'B < input type = "text" class = "cp-b" / > < hr > ' +
'H < input type = "text" class = "cp-h" / > < br > ' +
'H < input type = "text" class = "cp-h" / > < br > ' +
'S < input type = "text" class = "cp-s" / > < br > ' +
'S < input type = "text" class = "cp-s" / > < br > ' +
'B < input type = "text" class = "cp-v" / > ' +
'B < input type = "text" class = "cp-v" / > < hr > ' +
'< input type = "text" class = "cp-HEX" / > ' +
'< / div > ').on('change', 'input', function(e) {
'< / div > ').on('change', 'input', function(e) {
var value = this.value,
var value = this.value,
className = this.className,
className = this.className,
@ -143,31 +144,36 @@ window.myColorPicker = $('input.color').colorPicker({
color = {};
color = {};
color[type] = value;
color[type] = value;
colorInstance.setColor(color, /(?:r|g|b)/.test(type) ? 'rgb' : 'hsv');
colorInstance.setColor(type === 'HEX' ? value : color,
type === 'HEX' ? 'HEX' : /(?:r|g|b)/.test(type) ? 'rgb' : 'hsv');
colorPicker.render();
colorPicker.render();
this.blur();
this.blur();
});
});
},
},
cssAddon: // could also be in a css file instead
cssAddon: // could also be in a css file instead
'.cp-panel {float:right; padding:0 1px 0 8px; margin-top:-1px;}' +
'.cp-color-picker .cp-panel {line-height: 21px; float:right;' +
'padding:0 1px 0 8px; margin-top:-1px; overflow:visible}' +
'.cp-panel, .cp-panel input {color:#bbb; font-family:monospace,' +
'.cp-panel, .cp-panel input {color:#bbb; font-family:monospace,' +
'"Courier New",Courier,mono; font-size:12px; font-weight:bold;}' +
'"Courier New",Courier,mono; font-size:12px; font-weight:bold;}' +
'.cp-panel input {width:25 px; height:12px; padding:2px 3px 1px;' +
'.cp-panel input {width:28 px; height:12px; padding:2px 3px 1px;' +
'text-align:right; line-height:12px; background:transparent;' +
'text-align:right; line-height:12px; background:transparent;' +
'border:1px solid; border-color:#222 #666 #666 #222;}' +
'border:1px solid; border-color:#222 #666 #666 #222;}' +
'.cp-panel hr {margin:0 -2px 2px; height:1px; border:0;' +
'.cp-panel hr {margin:0 -2px 2px; height:1px; border:0;' +
'background:#666; border-top:1px solid #222;}',
'background:#666; border-top:1px solid #222;}' +
'.cp-panel .cp-HEX {width:44px; position:absolute; margin:1px -3px 0 -2px;}' +
'.cp-alpha {width:154px;}',
renderCallback: function($elm, toggled) {
renderCallback: function($elm, toggled) {
var colors = this.color.colors.RND,
var colors = this.color.colors.RND,
modes = {
modes = {
r: colors.rgb.r, g: colors.rgb.g, b: colors.rgb.b,
r: colors.rgb.r, g: colors.rgb.g, b: colors.rgb.b,
h: colors.hsv.h, s: colors.hsv.s, v: colors.hsv.v
h: colors.hsv.h, s: colors.hsv.s, v: colors.hsv.v,
HEX: this.color.colors.HEX
};
};
$('input', '.cp-panel').each(function() {
$('input', '.cp-panel').each(function() {
this.value = modes[this.className.substr(3, 1 )];
this.value = modes[this.className.substr(3)];
});
});
}
}
};
};
@ -209,9 +215,8 @@ window.myColorPicker = $('input.color').colorPicker({
'.cp-memory {margin-bottom:6px; clear:both;}' +
'.cp-memory {margin-bottom:6px; clear:both;}' +
'.cp-memory div {float:left; width:17px; height:17px; margin-right:2px;' +
'.cp-memory div {float:left; width:17px; height:17px; margin-right:2px;' +
'background:rgba(0,0,0,1); text-align:center; line-height:17px;}' +
'background:rgba(0,0,0,1); text-align:center; line-height:17px;}' +
'.cp-memory .cp-store {width:21px; margin:0; background:none;' +
'.cp-memory .cp-store {width:21px; margin:0; background:none; font-weight:bold;' +
'border: 1px solid; border-color:#666 #222 #222 #666;' +
'box-sizing:border-box; border: 1px solid; border-color: #666 #222 #222 #666;}'
'box-sizing:border-box; font-weight:bold;}'
};
};
// the default; no extra stuff
// the default; no extra stuff
@ -232,8 +237,10 @@ window.myColorPicker = $('input.color').colorPicker({
customBG: '#222',
customBG: '#222',
margin: '4px -2px',
margin: '4px -2px',
cssAddon: // could also be in a css file instead
cssAddon: // could also be in a css file instead
'.cp-xy-slider{width:100px; height:100px;}' +
'.cp-color-picker{padding:5px 5px 0;}' +
'.cp-z-slider{height:100px;}'
'.cp-xy-slider{width:100px; height:100px; margin-bottom:3px;}' +
'.cp-z-slider{height:100px; margin-left:4px;}' +
'.cp-alpha{margin:4px 0;}'
};
};