选色器

插件使用Bootstrap-colorpicker 3.4.0,文档地址:https://itsjavi.com/bootstrap-colorpicker/

简单使用

初始颜色可以通过 3 种方式指定:输入值、data-color 属性或者以编程方式使用 color 构造函数选项。

这里使用输入框组来显示颜色。

使用输入值:

使用 data-color

使用构造函数(这里单独初始化):

$('#example-color5').colorpicker({"color": "#48b0f7"});

format 选项为 'auto' 时,将检测第一个解析的颜色格式并将其用作默认值,但当该选项等于 null (默认值)时,每次都会重新计算格式。您可以在此处看到差异,其中之一允许您调整 Alpha 通道:

这里使用 data-colorpicker-mode 设置。

如果已定义,格式选项会强制使用特定格式,而忽略原始格式。

使用 data-colorpicker-horizontal 设置为 true,色调和 alpha 条是水平的而不是垂直的。

在模态框上使用:

还有一些其他的功能,感觉并不常用,这里就不做演示了,具体请查看官方的文档示例。