diff options
Diffstat (limited to 'library/bootstrap-colorpicker/src/docs.html')
| -rw-r--r-- | library/bootstrap-colorpicker/src/docs.html | 153 |
1 files changed, 153 insertions, 0 deletions
diff --git a/library/bootstrap-colorpicker/src/docs.html b/library/bootstrap-colorpicker/src/docs.html new file mode 100644 index 000000000..8cb150f23 --- /dev/null +++ b/library/bootstrap-colorpicker/src/docs.html @@ -0,0 +1,153 @@ +<!--(bake header.html)--> +<!--(bake examples.html)--> +<article class="col-md-6"> + <h2>Documentation</h2> + <p>Call the colopicker via javascript:</p> + <pre class="well">$('.sample-selector').colorpicker({ /*options...*/ });</pre> + <h3>Options</h3> + <p> + You can set colorpicker options either as a plugin parameter or data-* attributes + </p> + <table class="table table-bordered table-striped"> + <thead> + <tr> + <th style="width: 100px;">Name</th> + <th style="width: 50px;">Type</th> + <th style="width: 100px;">Default</th> + <th>Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>format</td> + <td>string</td> + <td>false</td> + <td>If not false, forces the color format to be hex, rgb or rgba, otherwise the format is automatically detected.</td> + </tr> + <tr> + <td>color</td> + <td>string</td> + <td>false</td> + <td>If not false, sets the color to this value.</td> + </tr> + <tr> + <td>container</td> + <td>string or jQuery Element</td> + <td>false</td> + <td>If not false, the picker will be contained inside this element, otherwise it will be appended to the document body.</td> + </tr> + <tr> + <td>component</td> + <td>string or jQuery Element</td> + <td>'.add-on, .input-group-addon'</td> + <td>Children selector for the component or element that trigger the colorpicker and which background color will change (needs an inner <i> element).</td> + </tr> + <tr> + <td>input</td> + <td>string or jQuery Element</td> + <td>'input'</td> + <td>Children selector for the input that will store the picker selected value.</td> + </tr> + <tr> + <td>horizontal</td> + <td>boolean</td> + <td>false</td> + <td>If true, the hue and alpha channel bars will be rendered horizontally, above the saturation selector.</td> + </tr> + <tr> + <td>template</td> + <td>string</td> + <td><abbr title='please, read the source code for this value'>[...]</abbr></td> + <td>Customizes the default colorpicker HTML template.</td> + </tr> + </tbody> + </table> + + <p class='alert alert-warning'> + (behind this line, docs need to be updated) + </p> + + <h3>Methods</h3> + <h4>.colorpicker(options)</h4> + <p>Initializes an colorpicker.</p> + <h4>.colorpicker('show')</h4> + <p>Show the color picker</p> + <h4>.colorpicker('update')</h4> + <p>Refreshes the widget colors (this is done automatically)</p> + <h4>.colorpicker('hide')</h4> + <p>Hide the color picker</p> + <h4>.colorpicker('disable')</h4> + <p>Disable the color picker.</p> + <h4>.colorpicker('enable')</h4> + <p>Enable the color picker.</p> + <h4>.colorpicker('place')</h4> + <p>Updates the color picker's position relative to the element</p> + <h4>.colorpicker('destroy')</h4> + <p>Destroys the colorpicker widget and unbind all .colorpicker events from the element and component</p> + <h4>.colorpicker('setValue', value)</h4> + <p>Set a new value for the color picker (also for the input or component value). Triggers 'changeColor' event.</p> + <h3>Color object methods</h3> + <p>Each triggered events have a color object used internally by the picker. This object has several useful methods.</p> + <h4>.setColor(value)</h4> + <p>Set a new color. The value is parsed and tries to do a quess on the format.</p> + <h4>.setHue(value)</h4> + <p>Set the HUE with a value between 0 and 1.</p> + <h4>.setSaturation(value)</h4> + <p>Set the saturation with a value between 0 and 1.</p> + <h4>.setLightness(value)</h4> + <p>Set the lightness with a value between 0 and 1.</p> + <h4>.setAlpha(value)</h4> + <p>Set the transparency with a value between 0 and 1.</p> + <h4>.toRGB()</h4> + <p>Returns a hash with red, green, blue and alpha.</p> + <h4>.toHex()</h4> + <p>Returns a string with HEX format for the current color.</p> + <h4>.toHSL()</h4> + <p>Returns a hash with HSLA values.</p> + <h3>Events</h3> + <p>The colorpicker plugin exposes some events (with optional .colorpicker namespace)</p> + <table class="table table-bordered table-striped"> + <thead> + <tr> + <th style="width: 150px;">Event</th> + <th>Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>create</td> + <td>This event fires immediately when the color picker is created.</td> + </tr> + <tr> + <td>showPicker</td> + <td>This event fires immediately when the color picker is displayed.</td> + </tr> + <tr> + <td>hidePicker</td> + <td>This event is fired immediately when the color picker is hidden.</td> + </tr> + <tr> + <td>disable</td> + <td>This event is fired immediately when the color picker is disabled, except if it was initialized as disabled.</td> + </tr> + <tr> + <td>enable</td> + <td>This event is fired immediately when the color picker is enabled, except upon initialization.</td> + </tr> + <tr> + <td>changeColor</td> + <td>This event is fired when the color is changed.</td> + </tr> + <tr> + <td>destroy</td> + <td>This event fires immediately when the color picker is destroyed.</td> + </tr> + </tbody> + </table> + <pre class="well"> +$('.my-colorpicker-control').colorpicker().on('changeColor', function(ev){ + bodyStyle.backgroundColor = ev.color.toHex(); +}); + </pre> +</article> +<!--(bake footer.html)-->
\ No newline at end of file |