前端开发:一款基于bootstrap简洁的颜色选择器(colorpicker)

colorpicker是一款开源的颜色选择插件，中规中矩，其外观简洁明了，通过这款颜色选择插件，可以直接获取颜色值，方便快捷，返回值提供hex、rgb、rgba三中类型。

• 1、下载及初始化

https://github.com/farbelous/bootstrap-colorpicker

colorpicker提供多种下载安装方式

①直接进入上面网站下载插件文件，把文件放到项目任意目录，然后引入js、css文件即可

②NPM安装命令：npm install bootstrap-colorpicker

③Yarn安装命令：yarn add bootstrap-colorpicker

④Composer安装命令：composer require itsjavi/bootstrap-colorpicker

初始化colorpicker插件

<input id="cp1" type="text" class="form-control" value="#5367ce" />

<script>

$(function() {

$('#cp1').colorpicker();

});

</script>

输入以上代码后，效果如下图所示，至此一个简单的颜色选择器就初始化完成了。

2、基本应用演示

①小组件触发选择器（js代码不变）

<div id="cp2" class="input-group colorpicker-component">

<input type="text" value="#00AABB" class="form-control" />

<span class="input-group-addon"><i></i></span>

</div>

②水平排列（HTML代码不变）

$(function() {

$('#cp1').colorpicker({

color: "#88cc33",

horizontal: true

});

});

③页面内联显示

<div id="cp1" class="inl-bl"></div>

<style> .inl-bl { display: inline-block; }</style>

<script>

$(function() {

$('#cp1').colorpicker({

color: '#ffaa00',

container: true,

inline: true

});

});

</script>

colorpicker还有很多配置属性，可以进行简单的操作，还有内置方法如设置/获取值、显示/隐藏、启用/禁用、销毁等，监听事件有创建、显示/隐藏、改变、启用/禁用、销毁事件，都是一些常用的，通过组合使用能够完成简单的颜色选择。

官方网站：

https://farbelous.github.io/bootstrap-colorpicker/