Bootstrap颜色拾取器插件

bootstrap 颜色拾取器 颜色选择器 2017-11-17

控件介绍
Bootstrap Colorpicker是一款基于Bootstrap的jquery颜色选择器插件。该jquery颜色选择器插件允许你选取颜色,它提供多种颜色格式:hex, rgb,rgba,hsl,hsla,并提供功能强大的API来控制颜色拾取器。
浏览器兼容

支持IE9+

演示下载 3036
使用方法

安装

可以通过npm或Yarn来安装bootstrap-colorpicker.js颜色拾取器插件。

1
2
npm install bootstrap-colorpicker
yarn add bootstrap-colorpicker              

使用方法

在页面中引入bootstrap,jquery和bootstrap-colorpicker.css以及bootstrap-colorpicker.js文件。

1
2
3
4
<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结构如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!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颜色选择器插件的默认配置参数如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
// 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

本文转载请注明出处:http://www.zhuiye.com/detail_49.html