22 |
23 |
About
24 |
A simple component to select color in the same way you select color in Adobe Photoshop
25 |
Last update
26 |
23.05.2009 - Check Download tab
27 |
Features
28 |
29 | Flat mode - as element in page
30 | Powerful controls for color selection
31 | Easy to customize the look by changing some images
32 | Fits into the viewport
33 |
34 |
License
35 |
Dual licensed under the MIT and GPL licenses.
36 |
Examples
37 |
Flat mode.
38 |
39 |
40 |
41 | $('#colorpickerHolder').ColorPicker({flat: true});
42 |
43 |
Custom skin and using flat mode to display the color picker in a custom widget.
44 |
49 |
50 |
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.
51 |
52 |
53 |
54 |
$('#colorpickerField1, #colorpickerField2, #colorpickerField3').ColorPicker({
55 | onSubmit: function(hsb, hex, rgb, el) {
56 | $(el).val(hex);
57 | $(el).ColorPickerHide();
58 | },
59 | onBeforeShow: function () {
60 | $(this).ColorPickerSetColor(this.value);
61 | }
62 | })
63 | .bind('keyup', function(){
64 | $(this).ColorPickerSetColor(this.value);
65 | });
66 |
67 |
Attached to DOMElement and using callbacks to live preview the color and adding animation.
68 |
69 |
70 |
71 |
72 | $('#colorSelector').ColorPicker({
73 | color: '#0000ff',
74 | onShow: function (colpkr) {
75 | $(colpkr).fadeIn(500);
76 | return false;
77 | },
78 | onHide: function (colpkr) {
79 | $(colpkr).fadeOut(500);
80 | return false;
81 | },
82 | onChange: function (hsb, hex, rgb) {
83 | $('#colorSelector div').css('backgroundColor', '#' + hex);
84 | }
85 | });
86 |
87 |
88 |
89 |
Download
90 |
colorpicker.zip (73 kb) : jQuery, Javscript files, CSS files, images, examples and instructions.
91 |
Changelog
92 |
93 | 23.05.2009
94 | Added: close on color selection example
95 | Added: restore original color option
96 | Changed: color update on key up event
97 | Fixed: colorpicker hide and show methods
98 | Fixed: reference to options. Multiple fields with colorpickers is possible now.
99 | Fixed: RGB to HSB convertion
100 | 22.08.2008
101 | Fixed bug: where some events were not canceled right on Safari
102 | Fixed bug: where teh view port was not detected right on Safari
103 | 16-07-2008
104 | Fixed bug where the letter 'F' could not be typed in the Hex field
105 | Fixed bug where the changes on Hex field where not parsed
106 | Added new option 'livePreview'
107 | 08-07-2008
108 | Fixed typo in the code, both JavaScript and CSS
109 | Changed the cursor for some elements
110 | Added new demo explaining how to implement custom skin
111 | 07.07.2008
112 | The first release.
113 |
114 |
115 |
116 |
Implement
117 |
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.
118 |
119 | <link rel="stylesheet" media="screen" type="text/css" href="css/colorpicker.css" />
120 | <script type="text/javascript" src="js/colorpicker.js"></script>
121 |
122 |
Invocation code
123 |
All you have to do is to select the elements in a jQuery way and call the plugin.
124 |
125 | $('input').ColorPicker(options);
126 |
127 |
Options
128 |
A hash of parameters. All parameters are optional.
129 |
130 |
131 | eventName
132 | string
133 | The desired event to trigger the colorpicker. Default: 'click'
134 |
135 |
136 | color
137 | string or hash
138 | The default color. String for hex color or hash for RGB and HSB ({r:255, r:0, b:0}) . Default: 'ff0000'
139 |
140 |
141 | flat
142 | boolean
143 | Whatever if the color picker is appended to the element or triggered by an event. Default false
144 |
145 |
146 | livePreview
147 | boolean
148 | 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
149 |
150 |
151 | onShow
152 | function
153 | Callback function triggered when the color picker is shown
154 |
155 |
156 | onBeforeShow
157 | function
158 | Callback function triggered before the color picker is shown
159 |
160 |
161 | onHide
162 | function
163 | Callback function triggered when the color picker is hidden
164 |
165 |
166 | onChange
167 | function
168 | Callback function triggered when the color is changed
169 |
170 |
171 | onSubmit
172 | function
173 | Callback function triggered when the color it is chosen
174 |
175 |
176 |
Set color
177 |
If you want to set a new color.
178 |
$('input').ColorPickerSetColor(color);
179 |
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}).
180 |
181 |