File size: 1.67Kb
# bootstrap-colorpalette
Simple color palette for Bootstrap
#### [Online Demo](http://extremefe.github.io/bootstrap-colorpalette/)
# Requirements
* [Bootstrap](http://twitter.github.com/bootstrap/) 2.3.2+
* [jQuery](http://jquery.com/) 1.8.1+
# Example
#### Basic
```html
<div class="colorpalette"></div>
```
```javascript
$('.colorpalette').colorPalette();
```
***
#### selectColor event
```html
<input class="selected-color">
<div class="colorpalette"></div>
```
```javascript
$('.colorpalette').colorPalette()
.on('selectColor', function(e) {
$('.selected-color').val(e.color);
});
```
***
#### Gmail editor style
```html
<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> font color</div>
<div class="colorpalette1"></div>
</li>
<li style="display:inline-block;">
<div> background color</div>
<div class="colorpalette2"></div>
</li>
</ul>
</div>
```
```javascript
$('.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
```html
<input class="selected-color">
<div class="colorpalette"></div>
```
```javascript
var options = {
colors:[['#000000', '#424242', '#636363', '#9C9C94', '#CEC6CE', '#EFEFEF', '#EFF7F7', '#FFFFFF']]
}
$('.colorpalette').colorPalette(options)
.on('selectColor', function(e) {
$('.selected-color').val(e.color);
});
```