This project is maintained by b3nj4m
really-simple-bootstrap-color-picker
is a fork of really-simple-color-picker
, thus the long name.
Improvements over really-simple-color-picker
include:
btn
, input-small
, input-prepend
, add-on
and dropdown-menu
.localStorage
and JSON.stringify
are available, custom swatches will be stored in localStorage
.really-simple-bootstrap-color-picker
on the page<form class="form-horizontal">
<div class="control-group">
<label class="control-label">Pick a Color</label>
<div class="controls input-prepend">
<input type="text" name="color" class="color input-small" />
</div>
</div>
<div class="control-group">
<label class="control-label">Pick a Color</label>
<div class="controls input-prepend">
<input type="text" name="color" class="color input-small" />
</div>
</div>
</form>
$(function() {
var $inputs = $('input.color');
$inputs.colorPicker({pickerDefault: '#99CCFF'});
$inputs.each(function(idx, item) {
var $input = $(item);
var $target = $input.parents('.control-group:first').find('label:first');
$target.css('color', $input.val());
$input.on('colorPicker:preview colorPicker:change', function(e, value) {
$target.css('color', value);
});
$input.on('colorPicker:addSwatch', function(e, value) {
//do something with custom color (e.g. persist on the server-side)
});
});
});
If you need to destroy your color pickers for any reason, there is a handy destroy function.
$('input.color').colorPicker('destroy');