- Colorpicker plugin for the Twitter Bootstrap toolkit. Originally written by @eyecon and maintained in Github by @mjolnic and the community
-
-
It basically adds a color picker to a field or any other element.
-
+ Colorpicker plugin for the Twitter Bootstrap toolkit. Originally written by @eyecon and maintained in Github by
+ @mjolnic and the community
+
+
It basically adds a color picker to a field or any other element.
+
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> @@ -85,14 +90,15 @@-Examples
}); </script>
As a component:
-As a component:
+ +
<div class="input-group demo2">
<input type="text" value="" class="form-control" />
@@ -104,49 +110,59 @@ Examples
});
</script>
- Using events to work with the color:
- - -Transparent color support:
-Horizonal mode:
-Inline mode:
-Custom widget size:
-Using events to work with the color:
+ + + +Transparent color support:
+ +Horizonal mode:
+ +Inline mode:
+ +Custom widget size:
+ +<input type="text" id="demo_size" value="#ffaa00" /> @@ -186,266 +202,314 @@-Examples
}); </script>
Enabled / disabled
- - -Bootstrap Modal
-Enabled / disabled
+ + + +Bootstrap Modal
+ +Call the colopicker via javascript:
+$('.sample-selector').colorpicker({ /*options...*/ });
+ + You can set colorpicker options either as a plugin parameter or data-* attributes +
+| Name | +Type | +Default | +Description | +
|---|---|---|---|
| format | +string | +false | +If not false, forces the color format to be hex, rgb or rgba, otherwise the format is + automatically detected. + | +
| color | +string | +false | +If not false, sets the color to this value. | +
| container | +string or jQuery Element | +false | +If not false, the picker will be contained inside this element, otherwise it will be + appended to the document body. + | +
| component | +string or jQuery Element | +'.add-on, .input-group-addon' | +Children selector for the component or element that trigger the colorpicker and which + background color will change (needs an inner <i> element). + | +
| input | +string or jQuery Element | +'input' | +Children selector for the input that will store the picker selected value. | +
| horizontal | +boolean | +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. | +
| align | +string | +'right' | +By default, the colorpicker is aligned to the right of the input. If you need to switch it + to the left, set align to 'left'. + | +
| customClass | +string | +null | +Adds this class to the colorpicker widget. | +
General usage methods
+Initializes an colorpicker.
+ +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.
+ +Set a new value for the color picker (also updates everything). Triggers 'changeColor' event.
+ +Show the color picker
+ +Hide the color picker
+ +Updates the color picker's position relative to the element
+ +Refreshes the widget colors (this is done automatically)
+ +Enable the color picker.
+ +Disable the color picker.
+ +Destroys the colorpicker widget and unbind all .colorpicker events from the element and component
+ +Access to the colorpicker API directly
+ +Access to the colorpicker Color object information
+ +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:
+ +Set a new color. The value is parsed and tries to do a quess on the format.
+ +Set the HUE with a value between 0 and 1.
+ +Set the saturation with a value between 0 and 1.
+ +Set the brightness with a value between 0 and 1.
+ +Set the transparency with a value between 0 and 1.
+ +Returns a hash with red, green, blue and alpha.
+ +Returns a string with HEX format for the current color.
+ +Returns a hash with HSLA values.
+ +The colorpicker plugin exposes some events
+ +| 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. | +
| disable | +This event is fired immediately when the color picker is disabled, except if it was + initialized as disabled. + | +
| enable | +This event is fired immediately when the color picker is enabled, except upon + initialization. + | +
| destroy | +This event fires immediately when the color picker is destroyed. | +
$('.my-colorpicker').colorpicker().on('changeColor.colorpicker', function(event){
bodyStyle.backgroundColor = event.color.toHex();
});
-