Bootstrap的Color Palette颜色选择器

Color Palette是一个颜色选择器，基于Bootstrap前端开发框架，适用于Bootstrap 2.3.2+以上的版本，依赖于jQuery插件库，支持自定义配置预设的颜色，轻量级的颜色选择jQuery插件。

依赖关系
Bootstrap 2.3.2+
jQuery 1.8.1+
安装方法
如果你习惯使用Git，你可以使用下面的命令获取到插件的文件：

git https://github.com/extremeFE/bootstrap-colorpalette.git
如果你不知道Git是个什么鬼，那么你可以到插件的Github地址下载得到插件的源文件。

使用方法
接下来我们为大家介绍如何使用这个插件。

1、引入插件

css" media="all" href="bootstrap.min.css" />




2、编写一点HTML代码，用于用户选择和操作Color Palette颜色选择插件。

$('#colorpalette1').colorPalette()
  .on('selectColor', function(e) {
    $('#selected-color1').val(e.color);
});
编辑器文字背景和颜色按钮
上面的代码中，我们介绍了基本的使用方法，但是可能有的用户有更多的需求，比如实现类似编辑的中的文字样式编辑按钮的样子，使用Color Palette一样能达到这个效果，请看下面的代码。

$('#colorpalette2').colorPalette()
  .on('selectColor', function(e) {
    $('#selected-color2 i').css('color', e.color);
});
$('#colorpalette3').colorPalette()
  .on('selectColor', function(e) {
    $('#selected-color2 i').css('background-color', e.color);
});
原理就是创建两个颜色选择控件，然后一个定义为文字的显示颜色，一个定义为文字的背景颜色，当用户选的颜色以后，使用jQuery给对应文字设置样式。

自定义预设颜色
我们还可以预设几种颜色，让我们只能选择我们预设的颜色值，这样就能更好的控制用户的行为。

编写颜色选择HTML代码

var options = {
  colors:[['#000000', '#424242', '#636363', '#9C9C94', '#CEC6CE', '#EFEFEF', '#EFF7F7', '#FFFFFF']]
}
最后在初始化插件的时候，调用这个变量

$('#colorpalette4').colorPalette(options)
  .on('selectColor', function(e) {
    $('#selected-color3').val(e.color);
});