From 51ee3964c0f799fa9786ddd85b54707c43cd3509 Mon Sep 17 00:00:00 2001 From: Christian Vogeley Date: Tue, 25 Mar 2014 19:36:44 +0100 Subject: Well, if you want to add a color picker it is indeed a good idea to include the color picker. --- library/bootstrap-colorpicker/index.html | 296 +++++++++++++++++++++++++++++++ 1 file changed, 296 insertions(+) create mode 100644 library/bootstrap-colorpicker/index.html (limited to 'library/bootstrap-colorpicker/index.html') diff --git a/library/bootstrap-colorpicker/index.html b/library/bootstrap-colorpicker/index.html new file mode 100644 index 000000000..6686b92e4 --- /dev/null +++ b/library/bootstrap-colorpicker/index.html @@ -0,0 +1,296 @@ + + + + + + + + Colorpicker for Twitter Bootstrap + + + + + + + + +
+
+
+

Bootstrap Colorpicker 2.0 for Twitter Bootstrap

+
+
+
+

+ 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. +

+
    +
  • can be used as a component
    • +
  • alpha picker
    • +
  • multiple formats: hex, rgb, rgba, hsl, hsla
    • +
+
+ +
+
+
+
+ +
+

Examples

+
+

1) Attached to a field with hex format specified via options:

+
+ + 
+<input type="text" class="demo1" value="#5367ce" />
+<script>
+    $(function(){
+        $('.demo1').colorpicker();
+    });
+</script>
+
+
+
+

As a component:

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

Using events to work with the color:

+
+ Change background color +
+

Horizonal mode:

+
+ +
+

Inline mode:

+
+
+
+
+

Enabled / disabled

+
+
+ + +
+
+ Enable + Disable +
+ Destroy plugin instances + Create instances again +
+
+

Documentation

+

Call the colopicker via javascript:

+ 
$('.sample-selector').colorpicker({ /*options...*/ });
+

Options

+

+ You can set colorpicker options either as a plugin parameter or data-* attributes +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefaultDescription
formatstringfalseIf not false, forces the color format to be hex, rgb or rgba, otherwise the format is automatically detected.
colorstringfalseIf not false, sets the color to this value.
containerstring or jQuery ElementfalseIf not false, the picker will be contained inside this element, otherwise it will be appended to the document body.
componentstring 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).
inputstring or jQuery Element'input'Children selector for the input that will store the picker selected value.
horizontalbooleanfalseIf true, the hue and alpha channel bars will be rendered horizontally, above the saturation selector.
templatestring[...] + Customizes the default colorpicker HTML template.
+ +

+ (behind this line, docs need to be updated) +

+ +

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('disable')

+

Disable the color picker.

+

.colorpicker('enable')

+

Enable 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 useful 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 colorpicker plugin exposes some events (with optional .colorpicker namespace)

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EventDescription
createThis event fires immediately when the color picker is created.
showPickerThis event fires immediately when the color picker is displayed.
hidePickerThis event is fired immediately when the color picker is hidden.
disableThis event is fired immediately when the color picker is disabled, except if it was initialized as disabled.
enableThis event is fired immediately when the color picker is enabled, except upon initialization.
changeColorThis event is fired when the color is changed.
destroyThis event fires immediately when the color picker is destroyed.
+ 
+$('.my-colorpicker-control').colorpicker().on('changeColor', function(ev){
+  bodyStyle.backgroundColor = ev.color.toHex();
+});
+
+
+
+
+
+ + + + + + + \ No newline at end of file -- cgit v1.2.3