<!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>
