WEB插件-网页小功能

jquery colorpicker插件网页颜色选择器: 转载输入/验证  2019-01-28 10:51:54  浏览：2146  下载：1147  点赞：186; 颜色选择器

 Chrome ;  Firefox ;  Safari ;  Opera 
 IE 11  10  9  8  7  6 

### 使用步骤
##### 1、引入以下的js和css文件
```javascript
<link rel="stylesheet" media="screen" type="text/css"href="css/colorpicker.css">
<script type="text/javascript" src="js/colorpicker.js"></script>
```
##### 2、在head标签中加入以下js代码
```javascript
$(function() {
    $('#colorSelector').ColorPicker({
        onChange: function(hsb, hex, rgb) {
            $('#colorSelector').css('backgroundColor', '#' + hex);
        }
    });
});
```
##### 3、在body标签中加入以下格式的html代码
```javascript
<div id="colorSelector">
</div>
```
### 参数配置
| 参数名  | 参数说明 | 可选值 | 默认值 |
| ------------ | ------------ | ------------ | ------------ |
| eventName | 触发颜色选择器显示的事件  | 字符串 | ‘click’ |
|  color |  默认的颜色 | 字符串或HSB ({r:255, r:0, b:0})  |‘ff0000′   |
|flat|颜色选择器的显示模式，如果为true的话整个选择器直接显示出来|布尔值|false|
|onShow|当颜色变选择器显示的时候的回掉函数|函数|function(){}|
|onBeforeShow|当颜色选择器显示之前的回掉函数|函数|function(){}|
|onHide|当颜色选择器隐藏的时候的回掉函数|函数|function(){}|
|onChange|当颜色变得时候的回掉函数|函数|function(){}|
|onSubmit|当颜当选择好颜色后的回掉函数|函数|function(){}|
###样例代码

```javascript
<meta charset="utf-8">
<title>
</title>
<link rel="stylesheet" media="screen" type="text/css"href="css/colorpicker.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/colorpicker.js"></script>
<script type="text/javascript">
        $(function () {
            $('#color').ColorPicker({
                onChange: function (hsb, hex, rgb) {
                    $('#color').val("#" + hex);//设置文本框的值为选定的RGB颜色
                    //$('#color').css('backgroundColor', '#' + hex);//设置文本框的背景颜色为选定的RGB颜色
                }
            });
        });
    </script>
<input type="text" id="color">
```