ColorSelector for Bootstrap bootstrap-colorselector.js

Examples

First Example

The simplest way to use the ColorSelector.

<select id="colorselector">
    <option value="106" data-color="#A0522D">sienna</option>
    <option value="47" data-color="#CD5C5C" selected="selected">indianred</option>
    <option value="87" data-color="#FF4500">orangered</option>
    ...
    <option value="15" data-color="#DC143C">crimson</option>
    <option value="24" data-color="#FF8C00">darkorange</option>
    <option value="78" data-color="#C71585">mediumvioletred</option>
</select>

<script>
    $('#colorselector').colorselector();
</script>

Second Example

Set a color by its hex-value or value and define a callback-function.

<select id="colorselector">
    <option value="106" data-color="#A0522D">sienna</option>
    <option value="47" data-color="#CD5C5C" selected="selected">indianred</option>
    <option value="87" data-color="#FF4500">orangered</option>
    ...
    <option value="15" data-color="#DC143C">crimson</option>
    <option value="24" data-color="#FF8C00">darkorange</option>
    <option value="78" data-color="#C71585">mediumvioletred</option>
</select>

<button class="btn" type="button" id="setColor">set by color (#008B8B)</button>
<button class="btn" type="button" id="setValue">set by value (18)</button>

<input type="text" id="colorValue" />
<input type="text" id="colorColor" />
<input type="text" id="colorTitle" />

<script>
    $('#colorselector').colorselector({
          callback: function (value, color, title) {
              $("#colorValue").val(value);
              $("#colorColor").val(color);
              $("#colorTitle").val(title);
          }
    });

    $("#setColor").click(function(e) {
      $("#colorselector").colorselector("setColor", "#008B8B");
    });

    $("#setValue").click(function(e) {
      $("#colorselector").colorselector("setValue", 18);
    });
</script>

Usage

Include all the libs needed to use bootstrap, jquery and of course bootstrap-colorselector.

<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="bootstrap-colorselector.css" />

<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-colorselector.js"></script>

Options

Methods

$().colorselector(options)

Attaches a colorselector to a <select> element.

$('#element').colorselector();

.colorselector('setColor', 'color')

Sets a color specified by its hex-value.

$('#element').colorselector('setColor', '#FF0000');

.colorselector('setValue', value)

Sets a color specified by its value.

$('#element').colorselector('setId', 4);