简要教程
Bootstrap Colorpicker是一款基于Bootstrap的jquery颜色选择器插件。该jquery颜色选择器插件允许你选取颜色，它提供多种颜色格式：hex， rgb，rgba，hsl，hsla，并提供功能强大的API来控制颜色拾取器。
安装
可以通过npm或Yarn来安装bootstrap-colorpicker.js颜色拾取器插件。
npm install bootstrap-colorpicker
yarn add bootstrap-colorpicker
|
使用方法
在页面中引入bootstrap，jquery和bootstrap-colorpicker.css以及bootstrap-colorpicker.js文件。
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="dist/css/bootstrap-colorpicker.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap-colorpicker.js"></script>
|
HTML结构
使用bootstrap-colorpicker.js颜色拾取器插件最基本的HTML结构如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
<link href="dist/css/bootstrap-colorpicker.css" rel="stylesheet">
</head>
<body>
<div class="container">
<input id="mycp" type="text" class="form-control" />
</div>
<script src="js/jquery.min.js"></script>
<script src="dist/js/bootstrap-colorpicker.js"></script>
<script>
$(function () {
$('#mycp').colorpicker();
});
</script>
</body>
|
配置参数
该Bootstrap颜色选择器插件的默认配置参数如下：
// horizontal mode layout ?
horizontal: false,
// forces to show the colorpicker as an inline element
inline: false,
// forces a color
color: false,
// forces a format
format: false,
// children input selector
input: 'input',
// container selector
container: false,
// children component selector
component: '.add-on, .input-group-addon',
// Vertical sliders configuration
sliders: {
saturation: {
maxLeft: 100,
maxTop: 100,
callLeft: 'setSaturation',
callTop: 'setBrightness'
},
hue: {
maxLeft: 0,
maxTop: 100,
callLeft: false,
callTop: 'setHue'
},
alpha: {
maxLeft: 0,
maxTop: 100,
callLeft: false,
callTop: 'setAlpha'
}
},
// Horizontal sliders configuration
slidersHorz: {
saturation: {
maxLeft: 100,
maxTop: 100,
callLeft: 'setSaturation',
callTop: 'setBrightness'
},
hue: {
maxLeft: 100,
maxTop: 0,
callLeft: 'setHue',
callTop: false
},
alpha: {
maxLeft: 100,
maxTop: 0,
callLeft: 'setAlpha',
callTop: false
}
},
// Customizes the default colorpicker HTML template.
template: '<div class="colorpicker dropdown-menu">' +
'<div class="colorpicker-saturation"><i><b></b></i></div>' +
'<div class="colorpicker-hue"><i></i></div>' +
'<div class="colorpicker-alpha"><i></i></div>' +
'<div class="colorpicker-color"><div /></div>' +
'<div class="colorpicker-selectors"></div>' +
'</div>',
// By default, the colorpicker is aligned to the right of the input.
// If you need to switch it to the left, set align to 'left'.
align: 'right',
// Adds this class to the colorpicker widget.
customClass: null,
colorSelectors: null |
bootstrap-colorpicker.js颜色选择器插件的github地址为：https://github.com/farbelous/bootstrap-colorpicker