Project

General

Profile

Download (8.03 KB) Statistics
| Branch: | Tag: | Revision:
1 5d20692e Andreas Kohlbecker
<!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
				<p>Attached to DOMElement and using callbacks to live preview the color and adding animation.</p>
68
				<p>
69
					<div id="colorSelector"><div style="background-color: #0000ff"></div></div>
70
				</p>
71
				<pre>
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
</pre>
87
            </div>
88
            <div class="tab">
89
                <h2>Download</h2>
90
                <p><a href="colorpicker.zip">colorpicker.zip (73 kb)</a>: jQuery, Javscript files, CSS files, images, examples and instructions.</p>
91
                <h3>Changelog</h3>
92
                <dl>
93
					<dt>23.05.2009</dt>
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>
100
					<dt>22.08.2008</dt>
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>
103
					<dt>16-07-2008</dt>
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>
107
					<dt>08-07-2008</dt>
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>
111
					<dt>07.07.2008</dt>
112
					<dd>The first release.</dd>
113
                </dl>
114
            </div>
115
            <div class="tab">
116
                <h2>Implement</h2>
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>
118
                <pre>
119
&lt;link rel="stylesheet" media="screen" type="text/css" href="css/colorpicker.css" /&gt;
120
&lt;script type="text/javascript" src="js/colorpicker.js"&gt;&lt;/script&gt;
121
                </pre>
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>
124
                <pre>
125
 $('input').ColorPicker(options);
126
                </pre>
127
                <h3>Options</h3>
128
                <p>A hash of parameters. All parameters are optional.</p>
129
                <table>
130
                	<tr>
131
                		<td><strong>eventName</strong></td>
132
                		<td>string</td>
133
                		<td>The desired event to trigger the colorpicker. Default: 'click'</td>
134
                	</tr>
135
                	<tr>
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>
139
                	</tr>
140
                	<tr>
141
                		<td><strong>flat</strong></td>
142
                		<td>boolean</td>
143
                		<td>Whatever if the color picker is appended to the element or triggered by an event. Default false</td>
144
                	</tr>
145
                	<tr>
146
                		<td><strong>livePreview</strong></td>
147
                		<td>boolean</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>
149
                	</tr>
150
                	<tr>
151
                		<td><strong>onShow</strong></td>
152
                		<td>function</td>
153
                		<td>Callback function triggered when the color picker is shown</td>
154
                	</tr>
155
                	<tr>
156
                		<td><strong>onBeforeShow</strong></td>
157
                		<td>function</td>
158
                		<td>Callback function triggered before the color picker is shown</td>
159
                	</tr>
160
                	<tr>
161
                		<td><strong>onHide</strong></td>
162
                		<td>function</td>
163
                		<td>Callback function triggered when the color picker is hidden</td>
164
                	</tr>
165
                	<tr>
166
                		<td><strong>onChange</strong></td>
167
                		<td>function</td>
168
                		<td>Callback function triggered when the color is changed</td>
169
                	</tr>
170
                	<tr>
171
                		<td><strong>onSubmit</strong></td>
172
                		<td>function</td>
173
                		<td>Callback function triggered when the color it is chosen</td>
174
                	</tr>
175
                </table>
176
                <h3>Set color</h3>
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>
180
            </div>
181
        </div>
182
    </div>
183
</body>
184
</html>