Revision 5d20692e
Added by Andreas Kohlbecker over 8 years ago
themes/zen_dataportal/js/index.html | ||
---|---|---|
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 |
<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 |
<link rel="stylesheet" media="screen" type="text/css" href="css/colorpicker.css" /> |
|
120 |
<script type="text/javascript" src="js/colorpicker.js"></script> |
|
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> |
|
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 |
<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 |
<link rel="stylesheet" media="screen" type="text/css" href="css/colorpicker.css" /> |
|
120 |
<script type="text/javascript" src="js/colorpicker.js"></script> |
|
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> |
Also available in: Unified diff
Normalize all the line endings