js2/mwEmbed/libClipEdit/colorpicker/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 &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>