diff options
Diffstat (limited to 'library/bootstrap-colorpicker/index.html')
| -rw-r--r-- | library/bootstrap-colorpicker/index.html | 296 |
1 files changed, 296 insertions, 0 deletions
diff --git a/library/bootstrap-colorpicker/index.html b/library/bootstrap-colorpicker/index.html new file mode 100644 index 000000000..6686b92e4 --- /dev/null +++ b/library/bootstrap-colorpicker/index.html @@ -0,0 +1,296 @@ +<!DOCTYPE html> +<html lang="en"> + +<head> + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> + <meta charset="utf-8"> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <title>Colorpicker for Twitter Bootstrap</title> + <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet"> + <link href="dist/css/bootstrap-colorpicker.min.css" rel="stylesheet"> + <link href="src/css/docs.css" rel="stylesheet"> + <!-- Le HTML5 shim, for IE6-8 support of HTML elements --> + <!--[if lt IE 9]> + <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> + <![endif]--> +</head> + +<body> + <div class="container"> + <section id="typeahead"> + <div class="page-header"> + <h1><i class="glyphicon glyphicon-tint"></i> Bootstrap Colorpicker 2.0 <small>for Twitter Bootstrap</small></h1> + </div> + <div class="row"> + <article class="col-md-12"> + <p> + Colorpicker plugin for the Twitter Bootstrap toolkit. Originally written by <a href="https://twitter.com/stefanpetre/" target="_blank">@eyecon</a> + and maintained in Github by <a href="http://twitter.com/mjolnic/" target="_blank">@mjolnic</a> and the community + <br> + <br>It basically adds a color picker to a field or any other element. + </p> + <ul> + <li>can be used as a component</li> + <li>alpha picker</li> + <li>multiple formats: hex, rgb, rgba, hsl, hsla</li> + </ul> + <hr> + <div class="social"> + <a href="https://github.com/mjolnic/bootstrap-colorpicker/" target="_blank" class="btn btn-default btn-md"><i class="glyphicon glyphicon-random"></i> Fork me on Github</a> + <a href="https://github.com/mjolnic/bootstrap-colorpicker/archive/master.zip" target="_blank" class="btn btn-success btn-md"><i class="glyphicon glyphicon-download-alt"></i> Download</a> + + <!-- Place this tag where you want the +1 button to render. --> + <div class="g-plusone" data-size="medium"></div> + + <!-- Place this tag after the last +1 button tag. --> + <script type="text/javascript"> + (function() { + var po = document.createElement('script'); + po.type = 'text/javascript'; + po.async = true; + po.src = 'https://apis.google.com/js/plusone.js'; + var s = document.getElementsByTagName('script')[0]; + s.parentNode.insertBefore(po, s); + })(); + </script> + + <a href="https://twitter.com/share" class="twitter-share-button" data-via="mjolnic" data-related="mjolnic" data-hashtags="bootstrap">Tweet</a> + <script> + ! function(d, s, id) { + var js, fjs = d.getElementsByTagName(s)[0], + p = /^http:/.test(d.location) ? 'http' : 'https'; + if (!d.getElementById(id)) { + js = d.createElement(s); + js.id = id; + js.src = p + '://platform.twitter.com/widgets.js'; + fjs.parentNode.insertBefore(js, fjs); + } + }(document, 'script', 'twitter-wjs'); + </script> + </div> + <br> + </article> + </div> + <div class="row"> + + <div class="col-md-6"> + <h2>Examples</h2> + <div class="demo-wrapper"> + <p>1) Attached to a field with hex format specified via options:</p> + <div class="well"> + <input type="text" class="form-control demo demo-1 demo-auto" value="#5367ce" /> + <pre class="markup"> +<input type="text" class="demo1" value="#5367ce" /> +<script> + $(function(){ + $('.demo1').colorpicker(); + }); +</script> + </pre> + </div> + </div> + <p>As a component:</p> + <div class="well"> + <div class="input-group colorpicker-component demo demo-auto"> + <input type="text" value="" class="form-control" /> + <span class="input-group-addon"><i></i></span> + </div> + <pre class="markup"> +<div class="input-group demo2"> + <input type="text" value="" class="form-control" /> + <span class="input-group-addon"><i></i></span> +</div> +<script> + $(function(){ + $('.demo2').colorpicker(); + }); +</script> + </pre> + </div> + <p>Using events to work with the color:</p> + <div class="well"> + <a href="#" class="btn small demo" id="demo_apidemo" data-color="rgb(255, 255, 255)">Change background color</a> + </div> + <p>Horizonal mode:</p> + <div class="well"> + <input type="text" class="form-control demo" data-horizontal="true" id="demo_forceformat" value="#8fff00"> + </div> + <p>Inline mode:</p> + <div class="well"> + <div id="demo_cont" class="demo demo-auto inl-bl" data-container="#demo_cont" data-color="rgba(150,216,62,0.55)" data-inline="true"></div> + <div class="demo demo-auto inl-bl" data-container="true" data-color="rgb(50,216,62)" data-inline="true"></div> + </div> + <p>Enabled / disabled</p> + <div class="well"> + <div id="demo_endis" class="input-group demo demo-auto colorpicker-component"> + <input disabled type="text" value="" class="form-control" /> + <span class="input-group-addon"><i></i></span> + </div> + <br> + <a class="btn btn-sm btn-default enable-button" href="#">Enable</a> + <a class="btn btn-sm btn-default disable-button" href="#">Disable</a> + </div> + <a class="btn btn-default demo-destroy" href="#"><i class="glyphicon glyphicon-remove"></i> Destroy plugin instances</a> + <a class="btn btn-default demo-create" href="#"><i class="glyphicon glyphicon-plus"></i> Create instances again</a> + </div> + <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> + </div> + </section> + </div> + <script src="//code.jquery.com/jquery-1.10.2.min.js"></script> + <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script> + <script src="dist/js/bootstrap-colorpicker.js"></script> + <script src="src/js/docs.js"></script> +</body> + +</html>
\ No newline at end of file |