ColorPicker 颜色选择器

用于颜色选择,支持多种格式。

基础用法

移动到下拉菜单上,展开更多操作。

有默认值

无默认值

显示代码

选择透明度

显示代码

预定义颜色

显示代码

不同尺寸

       
显示代码

参数

你可以通过修改$.fn.colorPicker.defaults来修改全局默认配置,也可以在初始化时传入指定配置$(el).colorPicker({xx: xx})

参数 说明 类型 可选值 默认值
value 初始值 string - -
disabled 是否禁用 boolean - false
size 尺寸 string medium / small / mini -
showAlpha 是否支持透明度选择 boolean - false
colorFormat 颜色的格式 string hsl / hsv / hex / rgb 'hex'(showAlpha 为 false)或 'rgb'(showAlpha 为 true
popperClass ColorPicker 下拉框的类名 string - -
predefine 预定义颜色 array - -
change 当绑定值变化时触发,回调参数为当前值 function - -
activeChange 面板中当前显示的颜色发生改变时触发,回调参数为当前显示的颜色值 function - -

方法

你可以通过调用$(el).colorPicker('xxx')来调用颜色选择器方法。

方法 说明 举例
disable 禁用选择器 $(el).colorPicker('disable')
enable 取消禁用状态 $(el).colorPicker('enable')
set 设置颜色值 $(el).colorPicker('set', 'rgba(255, 0, 0, 0.5)')
get 获取颜色值 $(el).colorPicker('get')