Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
css
 
 
js
 
 
 
 
 
 

README.md

bootstrap-colorpalette

Simple color palette for Bootstrap

Online Demo

Requirements

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);
  });

About

Simple color palette for Bootstrap

Resources

Releases

No releases published

Packages

No packages published
You can’t perform that action at this time.