13 | ColorPicker
18 | 19 |This is yet another colorpicker plugin for jQuery since most of them are not on GitHub nor being mantained at the moment.
20 | 21 |The plugin is a fork of the one developed by Stefan Petre who seems not to be interested in it anymore. I needed a powerfull colorpicker for one of my projects so I updated it and then thought it would be nice if it would were freely available.
22 | 23 |Features
24 | 25 |-
26 |
- Flat model - as element in page, attached to an input and custom widget. 27 |
- Powerful controls for color selection 28 |
- Easy to customize the look by changing some images 29 |
- Fits into the viewport 30 |
- Powerful callback system to totally control the way it works 31 |
License
34 | 35 |The plugin is currently dual licensed under the MIT and GPL licenses.
36 | 37 |Implement
38 | 39 |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.
40 | 41 |42 | <link rel="stylesheet" media="screen" type="text/css" href="css/colorpicker.css" /> 43 | <script src="js/colorpicker.js"></script> 44 |45 | 46 |
How to use
47 | 48 |All you have to do, is to select the elements in a jQuery way and call the plugin over them.
49 | 50 | $('input').ColorPicker(options);
51 |
52 | Options
53 | 54 |An object containing parameters. Please, note that all parameters are optional.
55 | 56 |57 |75 | 76 |eventName (string): This is the desired event to trigger the colorpicker. Default: 'click'
58 | 59 |color (string or object): The default color. String for hex color or hash for RGB and HSB ({r:255, r:0, b:0}) . Default: 'ff0000'
60 | 61 |flat (boolean): Whether if the color picker is appended to the element or triggered by an event. Default false
62 | 63 |livePreview (boolean): Whether 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
64 | 65 |onShow (function): Callback function triggered when the colorpicker is shown
66 | 67 |onBeforeShow (function) Callback function triggered before the colorpicker is shown
68 | 69 |onHide (function): Callback function triggered when the colorpicker is hidden
70 | 71 |onChange (function): Callback function triggered when the color is changed
72 | 73 |onSubmit (function): Callback function triggered when the color is chosen
74 |
Methods
77 | 78 |If you want to set a new color.
79 | 80 | $('input').ColorPickerSetColor(color);
81 |
82 |
83 | The 'color' argument is the same format as the option color, string for hex color or object for RGB and HSB ({r:255, r:0, b:0}). 84 |
85 |Examples
86 | 87 |Flat mode
88 | 89 | $('#colorpickerholder').ColorPicker({flat: true});
90 |
91 | Custom skin and using flat mode to display the color picker in a custom widget.
92 | 93 |
94 | $('#colorpickerholder2').ColorPicker({
95 | flat: true,
96 | color: '#EFEFEF',
97 | onSubmit: function(hsb, hex, rgb) {
98 | $('#colorselector div').css('backgroundColor', '#' + hex);
99 | }
100 | });
101 |
102 | Attached to a 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.
108 | 109 |
110 | $('#colorpickerfield').ColorPicker({
111 | onSubmit: function(hsb, hex, rgb, el, parent) {
112 | $(el).val(hex);
113 | $(el).ColorPickerHide();
114 | },
115 | onBeforeShow: function () {
116 | $(this).ColorPickerSetColor(this.value);
117 | }
118 | })
119 | .bind('keyup', function(){
120 | $(this).ColorPickerSetColor(this.value);
121 | });
122 |
123 |
124 | Attached to DOM and using callbacks to live preview the color and adding animation.
125 | 126 |
127 | $('#colorselector2').ColorPicker({
128 | color: '#EFEFEF',
129 | onShow: function (colpkr) {
130 | $(colpkr).fadeIn(500);
131 | return false;
132 | },
133 | onHide: function (colpkr) {
134 | $(colpkr).fadeOut(500);
135 | return false;
136 | },
137 | onChange: function (hsb, hex, rgb) {
138 | $('#colorSelector div').css('backgroundColor', '#' + hex);
139 | }
140 | });
141 |
142 |