Mercurial > hg > extraction-interface
diff interface/__index.html @ 0:b12c99b7c3f0
commit for previous development
| author | Zoe Hong <zhong@mpiwg-berlin.mpg.de> |
|---|---|
| date | Mon, 19 Jan 2015 17:13:49 +0100 |
| parents | |
| children |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/interface/__index.html Mon Jan 19 17:13:49 2015 +0100 @@ -0,0 +1,184 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> +<head> + <link rel="stylesheet" href="css/colorpicker.css" type="text/css" /> + <link rel="stylesheet" media="screen" type="text/css" href="css/layout.css" /> + <title>ColorPicker - jQuery plugin</title> + <script type="text/javascript" src="js/jquery.js"></script> + <script type="text/javascript" src="js/colorpicker.js"></script> + <script type="text/javascript" src="js/eye.js"></script> + <script type="text/javascript" src="js/utils.js"></script> + <script type="text/javascript" src="js/layout.js?ver=1.0.2"></script> +</head> +<body> + <div class="wrapper"> + <h1>Color Picker - jQuery plugin</h1> + <ul class="navigationTabs"> + <li><a href="#about" rel="about">About</a></li> + <li><a href="#download" rel="download">Download</a></li> + <li><a href="#implement" rel="implement">Implement</a></li> + </ul> + <div class="tabsContent"> + <div class="tab"> + <h2>About</h2> + <p>A simple component to select color in the same way you select color in Adobe Photoshop</p> + <h3>Last update</h3> + <p>23.05.2009 - Check Download tab</p> + <h3>Features</h3> + <ul> + <li>Flat mode - as element in page</li> + <li>Powerful controls for color selection</li> + <li>Easy to customize the look by changing some images</li> + <li>Fits into the viewport</li> + </ul> + <h3>License</h3> + <p>Dual licensed under the MIT and GPL licenses.</p> + <h3>Examples</h3> + <p>Flat mode.</p> + <p id="colorpickerHolder"> + </p> + <pre> +$('#colorpickerHolder').ColorPicker({flat: true}); + </pre> + <p>Custom skin and using flat mode to display the color picker in a custom widget.</p> + <div id="customWidget"> + <div id="colorSelector2"><div style="background-color: #00ff00"></div></div> + <div id="colorpickerHolder2"> + </div> + </div> + + <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> + <p><input type="text" maxlength="6" size="6" id="colorpickerField1" value="00ff00" /></p> + <p><input type="text" maxlength="6" size="6" id="colorpickerField3" value="0000ff" /></p> + <p><input type="text" maxlength="6" size="6" id="colorpickerField2" value="ff0000" /></p> + <pre>$('#colorpickerField1, #colorpickerField2, #colorpickerField3').ColorPicker({ + onSubmit: function(hsb, hex, rgb, el) { + $(el).val(hex); + $(el).ColorPickerHide(); + }, + onBeforeShow: function () { + $(this).ColorPickerSetColor(this.value); + } +}) +.bind('keyup', function(){ + $(this).ColorPickerSetColor(this.value); +}); +</pre> + <p>Attached to DOMElement and using callbacks to live preview the color and adding animation.</p> + <p> + <div id="colorSelector"><div style="background-color: #0000ff"></div></div> + </p> + <pre> +$('#colorSelector').ColorPicker({ + color: '#0000ff', + onShow: function (colpkr) { + $(colpkr).fadeIn(500); + return false; + }, + onHide: function (colpkr) { + $(colpkr).fadeOut(500); + return false; + }, + onChange: function (hsb, hex, rgb) { + $('#colorSelector div').css('backgroundColor', '#' + hex); + } +}); +</pre> + </div> + <div class="tab"> + <h2>Download</h2> + <p><a href="colorpicker.zip">colorpicker.zip (73 kb)</a>: jQuery, Javscript files, CSS files, images, examples and instructions.</p> + <h3>Changelog</h3> + <dl> + <dt>23.05.2009</dt> + <dd>Added: close on color selection example</dd> + <dd>Added: restore original color option</dd> + <dd>Changed: color update on key up event</dd> + <dd>Fixed: colorpicker hide and show methods</dd> + <dd>Fixed: reference to options. Multiple fields with colorpickers is possible now.</dd> + <dd>Fixed: RGB to HSB convertion</dd> + <dt>22.08.2008</dt> + <dd>Fixed bug: where some events were not canceled right on Safari</dd> + <dd>Fixed bug: where teh view port was not detected right on Safari</dd> + <dt>16-07-2008</dt> + <dd>Fixed bug where the letter 'F' could not be typed in the Hex field</dd> + <dd>Fixed bug where the changes on Hex field where not parsed</dd> + <dd>Added new option 'livePreview'</dd> + <dt>08-07-2008</dt> + <dd>Fixed typo in the code, both JavaScript and CSS</dd> + <dd>Changed the cursor for some elements</dd> + <dd>Added new demo explaining how to implement custom skin</dd> + <dt>07.07.2008</dt> + <dd>The first release.</dd> + </dl> + </div> + <div class="tab"> + <h2>Implement</h2> + <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> + <pre> +<link rel="stylesheet" media="screen" type="text/css" href="css/colorpicker.css" /> +<script type="text/javascript" src="js/colorpicker.js"></script> + </pre> + <h3>Invocation code</h3> + <p>All you have to do is to select the elements in a jQuery way and call the plugin.</p> + <pre> + $('input').ColorPicker(options); + </pre> + <h3>Options</h3> + <p>A hash of parameters. All parameters are optional.</p> + <table> + <tr> + <td><strong>eventName</strong></td> + <td>string</td> + <td>The desired event to trigger the colorpicker. Default: 'click'</td> + </tr> + <tr> + <td><strong>color</strong></td> + <td>string or hash</td> + <td>The default color. String for hex color or hash for RGB and HSB ({r:255, r:0, b:0}) . Default: 'ff0000'</td> + </tr> + <tr> + <td><strong>flat</strong></td> + <td>boolean</td> + <td>Whatever if the color picker is appended to the element or triggered by an event. Default false</td> + </tr> + <tr> + <td><strong>livePreview</strong></td> + <td>boolean</td> + <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> + </tr> + <tr> + <td><strong>onShow</strong></td> + <td>function</td> + <td>Callback function triggered when the color picker is shown</td> + </tr> + <tr> + <td><strong>onBeforeShow</strong></td> + <td>function</td> + <td>Callback function triggered before the color picker is shown</td> + </tr> + <tr> + <td><strong>onHide</strong></td> + <td>function</td> + <td>Callback function triggered when the color picker is hidden</td> + </tr> + <tr> + <td><strong>onChange</strong></td> + <td>function</td> + <td>Callback function triggered when the color is changed</td> + </tr> + <tr> + <td><strong>onSubmit</strong></td> + <td>function</td> + <td>Callback function triggered when the color it is chosen</td> + </tr> + </table> + <h3>Set color</h3> + <p>If you want to set a new color.</p> + <pre>$('input').ColorPickerSetColor(color);</pre> + <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> + </div> + </div> + </div> +</body> +</html>