A simple component to select color in the same way you select color in Adobe Photoshop
+23.05.2009 - Check Download tab
+Dual licensed under the MIT and GPL licenses.
+Flat mode.
++
+
+$('#colorpickerHolder').ColorPicker({flat: true});
+
+ Custom skin and using flat mode to display the color picker in a custom widget.
+Attached to an text field and using callback functions to update the color with field's value and set the value back in the field by submiting the color.
+ + + +$('#colorpickerField1, #colorpickerField2, #colorpickerField3').ColorPicker({
+ onSubmit: function(hsb, hex, rgb, el) {
+ $(el).val(hex);
+ $(el).ColorPickerHide();
+ },
+ onBeforeShow: function () {
+ $(this).ColorPickerSetColor(this.value);
+ }
+})
+.bind('keyup', function(){
+ $(this).ColorPickerSetColor(this.value);
+});
+
+ Attached to DOMElement and using callbacks to live preview the color and adding animation.
++
+$('#colorSelector').ColorPicker({
+ color: '#0000ff',
+ onShow: function (colpkr) {
+ $(colpkr).fadeIn(500);
+ return false;
+ },
+ onHide: function (colpkr) {
+ $(colpkr).fadeOut(500);
+ return false;
+ },
+ onChange: function (hsb, hex, rgb) {
+ $('#colorSelector div').css('backgroundColor', '#' + hex);
+ }
+});
+
+ colorpicker.zip (73 kb): jQuery, Javscript files, CSS files, images, examples and instructions.
+Attach the Javascript and CSS files to your document. Edit CSS file and fix the paths to images and change colors to fit your site theme.
++<link rel="stylesheet" media="screen" type="text/css" href="css/colorpicker.css" /> +<script type="text/javascript" src="js/colorpicker.js"></script> ++
All you have to do is to select the elements in a jQuery way and call the plugin.
+
+ $('input').ColorPicker(options);
+
+ A hash of parameters. All parameters are optional.
+| eventName | +string | +The desired event to trigger the colorpicker. Default: 'click' | +
| color | +string or hash | +The default color. String for hex color or hash for RGB and HSB ({r:255, r:0, b:0}) . Default: 'ff0000' | +
| flat | +boolean | +Whatever if the color picker is appended to the element or triggered by an event. Default false | +
| livePreview | +boolean | +Whatever if the color values are filled in the fields while changing values on selector or a field. If false it may improve speed. Default true | +
| onShow | +function | +Callback function triggered when the color picker is shown | +
| onBeforeShow | +function | +Callback function triggered before the color picker is shown | +
| onHide | +function | +Callback function triggered when the color picker is hidden | +
| onChange | +function | +Callback function triggered when the color is changed | +
| onSubmit | +function | +Callback function triggered when the color it is chosen | +
If you want to set a new color.
+$('input').ColorPickerSetColor(color);
+ The 'color' argument is the same format as the option color, string for hex color or hash for RGB and HSB ({r:255, r:0, b:0}).
+