当前位置：首页 > 网页特效 > 颜色拾取器

bootstrap4颜色拾取器插件

分类：颜色拾取器日期：2024-05-14 点击(11) 评论(0)

bootstrap4颜色拾取器插件

简介

colorpalettepicker.js是一款基于bootstrap4的颜色拾取器插件。该颜色拾取器插件通过bootstrap4的下拉列表组件，创建一组预定义的颜色列表，供用户选择使用。
####  使用方法

------------

在页面中引入jquery和bootstrap相关文件以及colorpalettepicker.js文件
 ```html
<link href="bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/colorpalettepicker.js"></script>
```
#### HTML结构
```html
使用一个<div>作为颜色拾取器的容器。
```
#### 初始化插件
在页面DOM元素加载完毕之后，通过colorPalettePicker()方法来初始化该颜色拾取器插件。
```html
$('#colorpalettediv').colorPalettePicker();    
```
####  配置参数

------------
该颜色拾取器插件的可用配置参数有：

|  参数 | 	data-*  | 类型  | 默认值  |  描述 |
| ------------ | ------------ | ------------ | ------------ | ------------ |
|  lines |  data-lines | int  | 1  |  用于分割颜色列表的行数 |
| palette  |  data-colors | array  |['aqua', 'azure', 'beige', 'brown', 'cyan', 'darkcyan', 'darkgrey', 'darkkhaki', 'darkorange', 'darkorchid', 'darksalmon', 'fuchsia', 'gold', 'green', 'khaki', 'lightblue', 'lightcyan', 'lightgreen', 'lightgrey', 'lightpink', 'lightyellow', 'lime', 'magenta', 'olive', 'orange', 'pink', 'silver', 'yellow']   |   预定义颜色|
| buttonText  |   |  string |  	Choose color | 显示在按钮上的文字  |
| buttonClass  |   | string  |  btn btn-secondary dropdown-toggle | 按钮的class类  |
| dropdownTitle  |   | string  | 	Available colors  | 列表面板的标题  |

####  方法

------------

该颜色拾取器插件有一个用于获取选择的颜色的值的方法onSelected。
```html
$('#colorpalettediv').colorPalettePicker({
  onSelected: function(color){
        alert(color);
    }
});
```

该颜色拾取器插件的github地址为：[https://github.com/davkhun/color-palette-picker]( 该颜色拾取器插件的github地址为：https://github.com/davkhun/color-palette-picker "https://github.com/davkhun/color-palette-picker")

web299.com

bootstrap4颜色拾取器插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果