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

bootstrap-colorpicker颜色选择

光年V5中使用的该插件的v3.4.0版本。

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

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

初始化代码在 main.min.js 里面。

// 颜色选取
    jQuery('.js-colorpicker').each(function() {
        var $colorpicker = jQuery(this);
        $colorpicker.colorpicker({
            'format': $colorpicker.data('colorpicker-mode') ? $colorpicker.data('colorpicker-mode') : 'auto',
            'horizontal' : $colorpicker.data('colorpicker-horizontal') ? $colorpicker.data('colorpicker-horizontal') : false
        });
    });

从上面的代码可以看到，在我们使用的时候，只需要给对应的 input 增加一个 js-colorpicker 的 class 即可。

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

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

<div class="input-group js-colorpicker mb-3">
  <input type="text" class="form-control" name="example-color3" data-color="rgb(21, 195, 119)" />
  <span class="input-group-text colorpicker-input-addon"><i></i></span>
</div>

其他具体的其他用法，可以直接去查看官方的文档，或者查看模板页面的介绍：http://lyear.itshubao.com/v5/lyear_js_colorpicker.html

涉及的文件：