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