1 <!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2 <html xmlns=
"http://www.w3.org/1999/xhtml" xml:
lang=
"en" lang=
"en">
4 <link rel=
"stylesheet" href=
"css/colorpicker.css" type=
"text/css" />
5 <link rel=
"stylesheet" media=
"screen" type=
"text/css" href=
"css/layout.css" />
6 <title>ColorPicker - jQuery plugin
</title>
7 <script type=
"text/javascript" src=
"js/jquery.js"></script>
8 <script type=
"text/javascript" src=
"js/colorpicker.js"></script>
9 <script type=
"text/javascript" src=
"js/eye.js"></script>
10 <script type=
"text/javascript" src=
"js/utils.js"></script>
11 <script type=
"text/javascript" src=
"js/layout.js?ver=1.0.2"></script>
15 <h1>Color Picker - jQuery plugin
</h1>
16 <ul class=
"navigationTabs">
17 <li><a href=
"#about" rel=
"about">About
</a></li>
18 <li><a href=
"#download" rel=
"download">Download
</a></li>
19 <li><a href=
"#implement" rel=
"implement">Implement
</a></li>
21 <div class=
"tabsContent">
24 <p>A simple component to select color in the same way you select color in Adobe Photoshop
</p>
26 <p>23.05.2009 - Check Download tab
</p>
29 <li>Flat mode - as element in page
</li>
30 <li>Powerful controls for color selection
</li>
31 <li>Easy to customize the look by changing some images
</li>
32 <li>Fits into the viewport
</li>
35 <p>Dual licensed under the MIT and GPL licenses.
</p>
38 <p id=
"colorpickerHolder">
41 $('#colorpickerHolder').ColorPicker({flat: true});
43 <p>Custom skin and using flat mode to display the color picker in a custom widget.
</p>
44 <div id=
"customWidget">
45 <div id=
"colorSelector2"><div style=
"background-color: #00ff00"></div></div>
46 <div id=
"colorpickerHolder2">
50 <p>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.
</p>
51 <p><input type=
"text" maxlength=
"6" size=
"6" id=
"colorpickerField1" value=
"00ff00" /></p>
52 <p><input type=
"text" maxlength=
"6" size=
"6" id=
"colorpickerField3" value=
"0000ff" /></p>
53 <p><input type=
"text" maxlength=
"6" size=
"6" id=
"colorpickerField2" value=
"ff0000" /></p>
54 <pre>$('#colorpickerField1, #colorpickerField2, #colorpickerField3').ColorPicker({
55 onSubmit: function(hsb, hex, rgb, el) {
57 $(el).ColorPickerHide();
59 onBeforeShow: function () {
60 $(this).ColorPickerSetColor(this.value);
63 .bind('keyup', function(){
64 $(this).ColorPickerSetColor(this.value);
67 <p>Attached to DOMElement and using callbacks to live preview the color and adding animation.
</p>
69 <div id=
"colorSelector"><div style=
"background-color: #0000ff"></div></div>
72 $('#colorSelector').ColorPicker({
74 onShow: function (colpkr) {
75 $(colpkr).fadeIn(
500);
78 onHide: function (colpkr) {
79 $(colpkr).fadeOut(
500);
82 onChange: function (hsb, hex, rgb) {
83 $('#colorSelector div').css('backgroundColor', '#' + hex);
90 <p><a href=
"colorpicker.zip">colorpicker.zip (
73 kb)
</a>: jQuery, Javscript files, CSS files, images, examples and instructions.
</p>
94 <dd>Added: close on color selection example
</dd>
95 <dd>Added: restore original color option
</dd>
96 <dd>Changed: color update on key up event
</dd>
97 <dd>Fixed: colorpicker hide and show methods
</dd>
98 <dd>Fixed: reference to options. Multiple fields with colorpickers is possible now.
</dd>
99 <dd>Fixed: RGB to HSB convertion
</dd>
101 <dd>Fixed bug: where some events were not canceled right on Safari
</dd>
102 <dd>Fixed bug: where teh view port was not detected right on Safari
</dd>
104 <dd>Fixed bug where the letter 'F' could not be typed in the Hex field
</dd>
105 <dd>Fixed bug where the changes on Hex field where not parsed
</dd>
106 <dd>Added new option 'livePreview'
</dd>
108 <dd>Fixed typo in the code, both JavaScript and CSS
</dd>
109 <dd>Changed the cursor for some elements
</dd>
110 <dd>Added new demo explaining how to implement custom skin
</dd>
112 <dd>The first release.
</dd>
117 <p>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.
</p>
119 <link
rel=
"stylesheet" media=
"screen" type=
"text/css" href=
"css/colorpicker.css" /
>
120 <script
type=
"text/javascript" src=
"js/colorpicker.js"></script
>
122 <h3>Invocation code
</h3>
123 <p>All you have to do is to select the elements in a jQuery way and call the plugin.
</p>
125 $('input').ColorPicker(options);
128 <p>A hash of parameters. All parameters are optional.
</p>
131 <td><strong>eventName
</strong></td>
133 <td>The desired event to trigger the colorpicker. Default: 'click'
</td>
136 <td><strong>color
</strong></td>
137 <td>string or hash
</td>
138 <td>The default color. String for hex color or hash for RGB and HSB ({r:
255, r:
0, b:
0}) . Default: 'ff0000'
</td>
141 <td><strong>flat
</strong></td>
143 <td>Whatever if the color picker is appended to the element or triggered by an event. Default false
</td>
146 <td><strong>livePreview
</strong></td>
148 <td>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
</td>
151 <td><strong>onShow
</strong></td>
153 <td>Callback function triggered when the color picker is shown
</td>
156 <td><strong>onBeforeShow
</strong></td>
158 <td>Callback function triggered before the color picker is shown
</td>
161 <td><strong>onHide
</strong></td>
163 <td>Callback function triggered when the color picker is hidden
</td>
166 <td><strong>onChange
</strong></td>
168 <td>Callback function triggered when the color is changed
</td>
171 <td><strong>onSubmit
</strong></td>
173 <td>Callback function triggered when the color it is chosen
</td>
177 <p>If you want to set a new color.
</p>
178 <pre>$('input').ColorPickerSetColor(color);
</pre>
179 <p>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}).
</p>