Bootstrap Colorpicker 2.0 fo
Examples
-
- 1) Attached to a field with hex format specified via options:
-
-
-
+ Attached to a field with hex format specified via options:
+
+
+
<input type="text" class="demo1" value="#5367ce" />
<script>
- $(function(){
- $('.demo1').colorpicker();
- });
+$(function(){
+ $('.demo1').colorpicker();
+});
</script>
-
-
+
+
As a component:
-
+
@@ -106,19 +105,28 @@ Examples
</script>
+
Using events to work with the color:
+
+ Transparent color support:
+
+
+
+
Horizonal mode:
+
Inline mode:
+
Enabled / disabled
@@ -215,59 +223,108 @@ Options
false
If true, the hue and alpha channel bars will be rendered horizontally, above the saturation selector.
+
+ inline
+ boolean
+ false
+ If true, forces to show the colorpicker as an inline element.
+
+
+ sliders
+ object
+ [...]
+
+ Vertical sliders configuration (read source code if you really need to tweak this).
+
+
+ slidersHorz
+ object
+ [...]
+
+ Horizontal sliders configuration (read source code if you really need to tweak this).
+
template
string
- [...]
+ [...]
Customizes the default colorpicker HTML template.
-
- (behind this line, docs need to be updated)
-
-
- Methods
+ jQuery API Methods
+ General usage methods
.colorpicker(options)
Initializes an colorpicker.
+
+ .colorpicker('getValue', defaultValue)
+ Gets the value from the input or the data attribute (if has no input), otherwise returns the default value, which defaults to #000000 if not specified.
+
+ .colorpicker('setValue', value)
+ Set a new value for the color picker (also updates everything). Triggers 'changeColor' event.
+
.colorpicker('show')
Show the color picker
- .colorpicker('update')
- Refreshes the widget colors (this is done automatically)
+
.colorpicker('hide')
Hide the color picker
- .colorpicker('disable')
- Disable the color picker.
+
+ .colorpicker('reposition')
+ Updates the color picker's position relative to the element
+
+ .colorpicker('update')
+ Refreshes the widget colors (this is done automatically)
+
.colorpicker('enable')
Enable the color picker.
- .colorpicker('place')
- Updates the color picker's position relative to the element
+
+ .colorpicker('disable')
+ Disable the color picker.
+
.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.
+
+ .data('colorpicker')
+ Access to the colorpicker API directly
+
+ .data('colorpicker').color
+ Access to the colorpicker Color object information
+
+
+
Color object methods
- Each triggered events have a color object used internally by the picker. This object has several useful methods.
+ Each triggered events have a color object (avaliable through event.color, see the example at the bottom) used internally by the picker. This object has several useful methods. These are the more commonly used:
+
.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.
+
+ .setBrightness(value)
+ Set the brightness 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 colorpicker plugin exposes some events (with optional .colorpicker namespace)
+ The colorpicker plugin exposes some events
+
@@ -288,6 +345,10 @@ Events
hidePicker
This event is fired immediately when the color picker is hidden.
+
+ changeColor
+ This event is fired when the color is changed.
+
disable
This event is fired immediately when the color picker is disabled, except if it was initialized as disabled.
@@ -296,10 +357,6 @@ Events
enable
This event is fired immediately when the color picker is enabled, except upon initialization.
-
- changeColor
- This event is fired when the color is changed.
-
destroy
This event fires immediately when the color picker is destroyed.
@@ -307,16 +364,16 @@ Events
-$('.my-colorpicker-control').colorpicker().on('changeColor', function(ev){
- bodyStyle.backgroundColor = ev.color.toHex();
+$('.my-colorpicker').colorpicker().on('changeColor.colorpicker', function(event){
+ bodyStyle.backgroundColor = event.color.toHex();
});
-
-
+
+
Examples
-1) Attached to a field with hex format specified via options:
-+Attached to a field with hex format specified via options:
++ ++<input type="text" class="demo1" value="#5367ce" /> <script> - $(function(){ - $('.demo1').colorpicker(); - }); +$(function(){ + $('.demo1').colorpicker(); +}); </script> --
As a component:
@@ -106,19 +105,28 @@Examples
</script>
Using events to work with the color:
+ +Transparent color support:
+Horizonal mode:
Inline mode:
Enabled / disabled
Options
- (behind this line, docs need to be updated) -
- -Methods
+jQuery API Methods
+General usage methods
.colorpicker(options)
Initializes an colorpicker.
+ +.colorpicker('getValue', defaultValue)
+Gets the value from the input or the data attribute (if has no input), otherwise returns the default value, which defaults to #000000 if not specified.
+ +.colorpicker('setValue', value)
+Set a new value for the color picker (also updates everything). Triggers 'changeColor' event.
+.colorpicker('show')
Show the color picker
-.colorpicker('update')
-Refreshes the widget colors (this is done automatically)
+.colorpicker('hide')
Hide the color picker
-.colorpicker('disable')
-Disable the color picker.
+ +.colorpicker('reposition')
+Updates the color picker's position relative to the element
+ +.colorpicker('update')
+Refreshes the widget colors (this is done automatically)
+.colorpicker('enable')
Enable the color picker.
-.colorpicker('place')
-Updates the color picker's position relative to the element
+ +.colorpicker('disable')
+Disable the color picker.
+.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.
+ +.data('colorpicker')
+Access to the colorpicker API directly
+ +.data('colorpicker').color
+Access to the colorpicker Color object information
+ ++
Color object methods
-Each triggered events have a color object used internally by the picker. This object has several useful methods.
+Each triggered events have a color object (avaliable through event.color, see the example at the bottom) used internally by the picker. This object has several useful methods. These are the more commonly used:
+.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.
+ +.setBrightness(value)
+Set the brightness 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 colorpicker plugin exposes some events (with optional .colorpicker namespace)
+The colorpicker plugin exposes some events
+| hidePicker | This event is fired immediately when the color picker is hidden. | ||
| changeColor | +This event is fired when the color is changed. | +||
| disable | This event is fired immediately when the color picker is disabled, except if it was initialized as disabled. | @@ -296,10 +357,6 @@enable | This event is fired immediately when the color picker is enabled, except upon initialization. |
| changeColor | -This event is fired when the color is changed. | -||
| destroy | This event fires immediately when the color picker is destroyed. | @@ -307,16 +364,16 @@
-$('.my-colorpicker-control').colorpicker().on('changeColor', function(ev){
- bodyStyle.backgroundColor = ev.color.toHex();
+$('.my-colorpicker').colorpicker().on('changeColor.colorpicker', function(event){
+ bodyStyle.backgroundColor = event.color.toHex();
});