berry51 / bootstrap-colorpalette

Simple color palette for Bootstrap

bootstrap-colorpalette

Simple color palette for Bootstrap

Online Demo

Requirements

• Bootstrap 2.3.2+
• jQuery 1.8.1+

Example

Basic

<div class="colorpalette"></div>

$('.colorpalette').colorPalette();

---

selectColor event

<input class="selected-color">
<div class="colorpalette"></div>

$('.colorpalette').colorPalette()
  .on('selectColor', function(e) {
    $('.selected-color').val(e.color);
  });

---

Gmail editor style

<div class="btn-group">
  <a class="selected-color" class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><i>A</i></a>
  <ul class="dropdown-menu">
    <li style="display:inline-block;">
      <div>&nbsp;font color</div>
      <div class="colorpalette1"></div>
    </li>
    <li style="display:inline-block;">
      <div>&nbsp;background color</div>
      <div class="colorpalette2"></div>
    </li>
  </ul>
</div>

$('.colorpalette1').colorPalette()
  .on('selectColor', function(e) {
    $('.selected-color i').css('color', e.color);
  });
$('.colorpalette2').colorPalette()
  .on('selectColor', function(e) {
    $('.selected-color i').css('background-color', e.color);
  });

---

Custom color option

<input class="selected-color">
<div class="colorpalette"></div>

var options = {
  colors:[['#000000', '#424242', '#636363', '#9C9C94', '#CEC6CE', '#EFEFEF', '#EFF7F7', '#FFFFFF']]
}
$('.colorpalette').colorPalette(options)
  .on('selectColor', function(e) {
    $('.selected-color').val(e.color);
  });