| [ Index ] |
PHP Cross Reference of vtigercrm-6.1.0 |
[Summary view] [Print] [Text view]
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>
title
Description
Body
title
Description
Body
title
Description
Body
title
Body
| Generated: Fri Nov 28 20:08:37 2014 | Cross-referenced by PHPXref 0.7.1 |