Examples
Attached to a field with hex format specified via options.
Attached to a field with the rgba format specified via data tag.
As a component.
Using events to work with the color.
Destroy plugin instances
Create instances again
Using bootstrap-colorpicker.js
Call the colopicker via javascript:
$('.my-colorpicker-control').colorpicker()
Options
Name |
type |
default |
description |
format |
string |
'hex' |
the color format - hex | rgb | rgba. |
Markup
Component mode
<div class="input-group colorpicker-component my-colorpicker-control" data-color="rgb(255, 146, 180)" data-color-format="rgb" id="cp3">
<input type="text" value="" readonly class="form-control" />
<span class="input-group-addon"><i style="background-color: rgb(255, 146, 180)"></i></span>
</div>
Methods
.colorpicker(options)
Initializes an colorpicker.
.colorpicker('show')
Show the color picker
.colorpicker('update')
Refreshes the widget colors (this is done automatically)
.colorpicker('hide')
Hide the color picker
.colorpicker('place')
Updates the color picker's position relative to the element
.colorpicker('destroy')
Destroys the colorpicker widget and unbind all .colorpicker events from the element and component
.colorpicker('setValue', value)
Set a new value for the color picker (also for the input or component value). Triggers 'changeColor' event.
Color object methods
Each triggered events have a color object used internally by the picker. This object has several usefull methods.
.setColor(value)
Set a new color. The value is parsed and tries to do a quess on the format.
.setHue(value)
Set the HUE with a value between 0 and 1.
.setSaturation(value)
Set the saturation with a value between 0 and 1.
.setLightness(value)
Set the lightness with a value between 0 and 1.
.setAlpha(value)
Set the transparency with a value between 0 and 1.
.toRGB()
Returns a hash with red, green, blue and alpha.
.toHex()
Returns a string with HEX format for the current color.
.toHSL()
Returns a hash with HSLA values.
Events
The colopicker plugin exposes some events (with optional .colorpicker namespace)
Event |
Description |
create |
This event fires immediately when the color picker is created. |
showPicker |
This event fires immediately when the color picker is displayed. |
hidePicker |
This event is fired immediately when the color picker is hidden. |
changeColor |
This event is fired when the color is changed. |
destroy |
This event fires immediately when the color picker is destroyed. |
$('.my-colorpicker-control').colorpicker().on('changeColor', function(ev){
bodyStyle.backgroundColor = ev.color.toHex();
});