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

可自定义颜色的jQuery颜色拾取器插件

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

简介

jquery-palette-color-picker是一款可自定义颜色的jQuery颜色拾取器插件。你可以为调色板设置各种颜色，该插件支持所有的CSS颜色格式，包括十六进制颜色，rgb，rgba，hsl，hsla等格式的颜色。

####  使用方法
使用该颜色拾取器插件需要在页面中引入jquery(1.7+)和palette-color-picker.js文件。

```html
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="src/palette-color-picker.js"></script>   
```               
 HTML结构
该颜色拾取器使用input元素作为容器，为它设置一个唯一的name属性。

```html
<input type="text" name="UNIQUE_NAME">   
```              
name属性用于为调色板绑定颜色，如果它不是唯一的，那么所有相同name属性的输入框都会被绑定颜色。
 
#### 初始化插件
在页面DOM元素加载完毕之后，可以通过paletteColorPicker()方法来初始化该颜色拾取器插件。

```html
$(document).ready(function(){
  $('[name="UNIQUE_NAME"]').paletteColorPicker();
  // You can use something like...
  // $('[data-palette]').paletteColorPicker();
});
```
####  颜色属性
颜色拾取器会自动从data-palette属性中获取颜色。

```html
<input type="text" name="unique-name-2"
    data-palette='["#0F8DFC","rgba(135,1,101)","#F00285",
            "hsla(190,41%,95%,1)","#94B77E","#4C060A",
            "#053F32","#ED8074","#788364"]' value="#053F32">   
```              
你也可以使用一个键值对来作为颜色，如果通过这组方式来设置颜色，那么key值会被显示在input中，这可以使用户看到有意义的颜色名称。

```html
<input type="text" name="unique-name-1" data-palette='[{"primary": "#E91E63"},{"primary_dark": "#C2185B"},
 {"primary_light": "#F8BBD0"},{"accent": "#CDDC39"},
{"primary_text": "#212121"},{"secondary_text": "#727272"},
{"divider": "#B6B6B6"}]' value="primary">     
```            
你也可以在初始化插件时通过colors配置参数来设置颜色：

```html
$(document).ready(function(){
  $('[name="UNIQUE_NAME"]').paletteColorPicker({
    colors: ["#0F8DFC","rgba(135,1,101)","#F00285","hsla(190,41%,95%,1)"]
  });
});    
```              
 配置参数
```html
$(document).ready(function(){
  // Advanced exacmple
  $('[name="UNIQUE_NAME"]').paletteColorPicker({
    // Color in { key: value } format
    colors: [
      {"primary": "#E91E63"},
      {"primary_dark": "#C2185B"},
      {"primary_light": "#F8BBD0"},
      {"accent": "#CDDC39"},
      {"primary_text": "#212121"},
      {"secondary_text": "#727272"},
      {"divider": "#B6B6B6"}
    ],
    // Add custom class to the picker
    custom_class: 'double',
    // Force the position of picker's bubble
    position: 'downside', // default -> 'upside'
    // Where is inserted the color picker's button, related to the input
    insert: 'after', // default -> 'before'
    // Clear button on last position
    clear_btn: 'last' // default -> 'first'
    // Timeout for the picker's fade out in ms
    timeout: 2000 // default -> 2000
  });
});                  
```
销毁插件：

```html
$( input_element ).data('paletteColorPickerPlugin').destroy();   
```               
jquery-palette-color-picker颜色拾取器插件的github地址为：https://github.com/carloscabo/jquery-palette-color-picker

web299.com

可自定义颜色的jQuery颜色拾取器插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

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

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

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