jquery-palette-color-picker是一款可自定義顏色的jQuery顏色拾取器插件。你可以為調色板設置各種顏色，該插件支持所有的CSS顏色格式，包括十六進制顏色，rgb，rgba，hsl，hsla等格式的顏色。

使用方法

使用該顏色拾取器插件需要在頁面中引入jquery(1.7+)和palette-color-picker.js文件。

HTML結構

該顏色拾取器使用元素作為容器，為它設置一個唯一的name屬性。

name屬性用于為調色板綁定顏色，如果它不是唯一的，那么所有相同name屬性的輸入框都會被綁定顏色。

初始化插件

在頁面DOM元素加載完畢之后，可以通過paletteColorPicker()方法來初始化該顏色拾取器插件。

$(document).ready(function(){

$('[name="UNIQUE_NAME"]').paletteColorPicker();

// You can use something like...

// $('[data-palette]').paletteColorPicker();

});

顏色屬性

顏色拾取器會自動從data-palette屬性中獲取顏色。

data-palette='["#0F8DFC","rgba(135,1,101)","#F00285",

"hsla(190,41%,95%,1)","#94B77E","#4C060A",

"#053F32","#ED8074","#788364"]' value="#053F32">

你也可以使用一個鍵值對來作為顏色，如果通過這組方式來設置顏色，那么key值會被顯示在input中，這可以使用戶看到有意義的顏色名稱。

data-palette='[{"primary": "#E91E63"},{"primary_dark": "#C2185B"},

{"primary_light": "#F8BBD0"},{"accent": "#CDDC39"},

{"primary_text": "#212121"},{"secondary_text": "#727272"},

{"divider": "#B6B6B6"}]' value="primary">

你也可以在初始化插件時通過colors配置參數來設置顏色：

$(document).ready(function(){

$('[name="UNIQUE_NAME"]').paletteColorPicker({

colors: ["#0F8DFC","rgba(135,1,101)","#F00285","hsla(190,41%,95%,1)"]

});

});

配置參數

$(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

});

});

銷毀插件：

$( input_element ).data('paletteColorPickerPlugin').destroy();

總結

以上是生活随笔為你收集整理的html颜色自定义器,可自定义颜色的jQuery颜色拾取器插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。