colorpalettepicker.js是一款基于bootstrap4的颜色拾取器插件。该颜色拾取器插件通过bootstrap4的下拉列表组件，创建一组预定义的颜色列表，供用户选择使用。
使用方法
在页面中引入jquery和bootstrap相关文件以及colorpalettepicker.js文件。
<link href="bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/colorpalettepicker.js"></script>
HTML结构
使用一个<div>作为颜色拾取器的容器。
<div id="colorpalettediv"></div>
初始化插件
在页面DOM元素加载完毕之后，通过colorPalettePicker()方法来初始化该颜色拾取器插件。
$('#colorpalettediv').colorPalettePicker();
配置参数
该颜色拾取器插件的可用配置参数有：
| 参数 | data-* | 类型 | 默认值 | 描述 |
| lines | data-lines | int | 1 | 用于分割颜色列表的行数 |
| palette | data-colors | array | ['aqua', 'azure', 'beige', 'brown', 'cyan', 'darkcyan', 'darkgrey', 'darkkhaki', 'darkorange', 'darkorchid', 'darksalmon', 'fuchsia', 'gold', 'green', 'khaki', 'lightblue', 'lightcyan', 'lightgreen', 'lightgrey', 'lightpink', 'lightyellow', 'lime', 'magenta', 'olive', 'orange', 'pink', 'silver', 'yellow'] | 预定义颜色 |
| buttonText | string | Choose color | 显示在按钮上的文字 | |
| buttonClass | string | btn btn-secondary dropdown-toggle | 按钮的class类 | |
| dropdownTitle | string | Available colors | 列表面板的标题 |
方法
该颜色拾取器插件有一个用于获取选择的颜色的值的方法onSelected。
$('#colorpalettediv').colorPalettePicker({
onSelected: function(color){
alert(color);
}
});
该颜色拾取器插件的github地址为：https://github.com/davkhun/color-palette-picker
