npm 包 bootstrap-colorpicker 使用教程-JavaScript中文网-JavaScript教程资源分享门户

bootstrap-colorpicker 是一个基于 Bootstrap 框架的颜色选择器插件，它支持对颜色进行选择、调整和输入等操作。在前端开发中，经常需要使用到颜色选择器，而 bootstrap-colorpicker 是一个简单易用且功能强大的选择。

安装

bootstrap-colorpicker 可以通过 npm 进行安装：

npm install bootstrap-colorpicker

同时，还需要引入 bootstrap 和 jquery 的相关文件，可以通过 CDN 或者本地方式进行引入。

基本使用

HTML

在 HTML 文件中，我们需要添加一个颜色选择器的输入框：

<input id="color-picker" type="text" class="form-control input-lg">

JavaScript

然后，在 JavaScript 中，我们需要对 bootstrap-colorpicker 进行初始化，并绑定 changeColor 事件：

$(document).ready(function() {
  $('#color-picker').colorpicker().on('changeColor', function(e) {
    // do something with the selected color
    console.log(e.color.toHex());
  });
});

这样，当用户选择了一个新的颜色时，就会触发 changeColor 事件，并将选择的颜色作为参数传递给回调函数。

高级使用

配置选项

bootstrap-colorpicker 提供了许多配置选项，可以根据实际需求进行设置。以下是一些常见的选项：

format: 颜色值的格式，可选值为 hex、rgb、rgba、hsl 和 hsla。
color: 初始颜色，可以是一个字符串或者一个函数。
horizontal: 是否采用水平布局。
container: 放置选择器的容器，可以是一个选择器字符串或者一个 DOM 元素。

$('#color-picker').colorpicker({
  format: 'rgba',
  color: '#ff0000',
  horizontal: true,
  container: '.my-container'
});

方法和事件

除了绑定 changeColor 事件之外，bootstrap-colorpicker 还提供了许多其他的方法和事件：

getValue(): 获取当前选择的颜色值。
setValue(value): 设置当前选择的颜色值。
show(): 显示颜色选择器。
hide(): 隐藏颜色选择器。
disable(): 禁用颜色选择器。
enable(): 启用颜色选择器。
destroy(): 销毁颜色选择器。

// javascriptcn.com 代码示例
// 获取当前选择的颜色值
var color = $('#color-picker').colorpicker('getValue');

// 设置当前选择的颜色值
$('#color-picker').colorpicker('setValue', '#00ff00');

// 显示颜色选择器
$('#color-picker').colorpicker('show');

// 绑定 show 事件
$('#color-picker').colorpicker().on('show', function(e) {
  console.log('color picker is shown');
});

示例代码

下面是一个完整的示例代码，演示了 bootstrap-colorpicker 的基本使用和一些高级用法：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Bootstrap Colorpicker Demo</title>
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap/3.4.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap-colorpicker/2.5.3/css/bootstrap-colorpicker.min.css">
</head>
<body>
  <div class="container">
    <h1>Bootstrap Colorpicker Demo</h1>
    <div class="form-group">
      <label for="color-picker">Pick a color:</label>
      <input id="color-picker" type="text" class="form-control input-lg">
    </div>
  </div>

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap

> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/35384) ，转载请注明来源
本文地址：[https://www.javascriptcn.com/post/35384](https://www.javascriptcn.com/post/35384)