光年模板说明文档
主题
字号
18px

bootstrap-colorpicker颜色选择

v3模板中使用Bootstrap Colorpicker v2.3.3，v4中使用v3.2.0版本。

github地址：https://github.com/itsjavi/bootstrap-colorpicker/

文档地址：https://itsjavi.com/bootstrap-colorpicker/

v3和v4的初始化代码没有太大的差别，这里分别列一下：

// v3
jQuery('.js-colorpicker').each(function() {
    var $colorpicker = jQuery(this);
    var $colorpickerMode = $colorpicker.data('colorpicker-mode') ? $colorpicker.data('colorpicker-mode') : 'hex';
    var $colorpickerinline = $colorpicker.data('colorpicker-inline') ? true: false;
    $colorpicker.colorpicker({
        'format': $colorpickerMode,
        'inline': $colorpickerinline
    });
});
// v4
jQuery('.js-colorpicker').each(function() {
    var $colorpicker = jQuery(this);
    var $colorpickerMode = $colorpicker.data('colorpicker-mode') ? $colorpicker.data('colorpicker-mode') : 'auto';
    $colorpicker.colorpicker({
        'format': $colorpickerMode,
    });
});

从上面的代码可以看到，在我们使用的时候，只需要给对应的 input 增加一个 js-colorpicker 的 class 即可，而v3相比较v4多了一个 inline 的设置参数，如果你需要的话，也可以在v4中增加。 

<input type="text" class="form-control js-colorpicker" name="example-color1" placeholder="点击选择颜色" value="" />

可以使用 input-group 的布局，将选择器的点击操作绑定到后面。 

<div class="input-group js-colorpicker">
  <input type="text" class="form-control" name="example-color2" value="#33cabb" />
  <div class="input-group-append">
    <span class="input-group-text colorpicker-input-addon"><i></i></span>
  </div>
</div>

设置属性 data-colorpicker-mode='rgb'，可以看到，在选择颜色后的值是 rgb 或者 rgba 格式的。 

<input type="text" class="form-control js-colorpicker" name="example-color3" placeholder="点击选择颜色" value="" data-colorpicker-mode='rgb'>

涉及的文件：