bootstrap4顏色選擇器插件套用方法!-教學撰寫:徐嘉裕Neil hsu

最近剛好要做到一個可以讓客戶自訂背景顏色的功能，發現這個bootstrap4顏色選擇器插件還真不錯用，基本色都能鍵入，這裡分享套用方法。

1、先去下載bootstrap4套件包 https://github.com/davkhun/color-palette-picker

2、引入套件包裡面的css跟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>

3、在input上方丟一個div區塊<div id='colorpalettediv'></div> 

結構

<div id='colorpalettediv'></div> 

<input type='text' id='color' class=' form-control' name='color' value='rgb(0, 0, 255)' placeholder='背景顏色'>

4、在頁面最下方呼叫colorPalettePicker函式，並吧color值傳入input中

<script type='text/javascript'>

$('#colorpalettediv').colorPalettePicker({
lines:2,
buttonText:'選擇顏色',
palette:['black','blue','gray','green','maroon','navy','olive','purple','red','teal','brown','darkcyan'],

onSelected: function(color){
$('#color').val(color);  //吧color值傳送到input中
}
});

</script>

這樣就ok了喔，如果是用bootstrap3也可以用，但不要引入bootstrap4的bootstrap.min.css就好，否則版面會變形，bootstrap3需在CSS裡面加一段設定調整顏色框位置。

.dropdown-menu{
margin: -90px 0px 0px 15px;
}

另外colorPalettePicker還有一些自訂參數

lines ->用於分割顏色列表的行數
palette->預定義顏色

['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->顯示在按鈕上的文字
buttonClass->按鈕的class類
dropdownTitle->列表面板的標題

有需要的朋友參考看

工作心的教學撰寫：徐嘉裕：Neil hsu