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>
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>
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>
Name | type | default | description |
---|---|---|---|
callback | function | callback(value, color, title); |
Attaches a colorselector to a
<select>
element.
$('#element').colorselector();
Sets a color specified by its hex-value.
$('#element').colorselector('setColor', '#FF0000');
Sets a color specified by its value.
$('#element').colorselector('setId', 4);