插件 jQuery.Vanderlee Colorpicker 中文API文档

🌙
手机阅读
本文目录结构

插件 jQuery.Vanderlee Colorpicker 中文API文档

来自jPicker的大多数图片来自Christopher T. Tillman。源代码由Martijn W. van der Lee从零开始创建。

特征

  • jQueryUI(基于themeroller)的外观和感觉
  • 熟悉的界面布局
  • 高度可配置
    • 控制部件
    • 布局
    • 输入/输出格式
    • 色板
    • 还有很多
  • 准确的颜色模型
  • 支持本地化
    • 英语,荷兰语,法语等
    • 易于翻译(https://www.transifex.com/projects/p/jquery-colorpicker/)
  • 智能窗口对齐
  • 包含事件和方法的完整API
  • 可通过插件轻松扩展
    • 许多示例包括:具有CSS渐变的RGB滑块,用于颜色的每用户cookie存储器。
  • 记录
  • 有限单元测试(基于QUnit)
  • 禁用启用
  • 键盘支持

要求

需要jQuery 1.7.1或更高版本(不适用于v1.6或更高版本)。

需要jQueryUI 1.8.0或更高版本。

对于jQuery 3.0.0或更高版本,您必须使用jQueryUI 1.12.0或更高版本。

IE支持; 确保定义了doctype,否则colorpicker将无法正确显示。

安装

With npm: npm install vanderlee-colorpicker

With yarn: yarn add vanderlee-colorpicker

With bower (deprecated): bower install colorpicker

Zip archive: https://github.com/vanderlee/colorpicker/archive/master.zip

jQueryUI自定义构建

如果您下载jQueryUI的自定义版本,则需要以下组件:

  • 对话框(包括Core,Widget,Mouse,Position,Draggable和Resizable)
  • 淡化效果(仅当您使用该showAnim选项时,包括效果核心)

要使用该parts/jquery.ui.colorpicker-rgbslider.js插件,您必须添加:

  • 滑块(包括核心,小部件和鼠标)

要使用文档中包含的演示页面,您必须添加:

  • 标签(包括Core和Widget)

浏览器支持

使用以下浏览器测试了此插件的各种版本:

  • Chrome 31-54
  • FireFox 25-48
  • Opera 17-39
  • Internet Explorer 10-11
  • Edge 20-25

键盘支持

您可以使用箭头键在地图和条形控件上移动光标。步骤是屏幕上像素的度量。

shift使用箭头键时按住键需要大10倍的步骤。按page down和page up键可以进行垂直移动。

ctrl使用箭头键按住键可以转到边缘。按home和end键可以进行垂直移动。

文档

.colorpicker(options)

将元素转换为颜色选择器。

选项

alpha(false)

是否显示alpha的输入。

altAlpha(true)

根据alpha设置更改altField元素的不透明度。

altField(’’)

更改此元素中指定的元素的背景颜色。

altOnChange(true)

如果为true,则每次更改时都会更新altField元素,否则仅在关闭时更新。

altProperties(背景色)

以逗号分隔的CSS属性列表,用于设置altField中的颜色。允许使用以下属性,忽略所有其他属性。

  • background-color
  • border-color
  • color
  • fill
  • outline-color
  • stroke

autoOpen(false)

如果为true,则在页面加载时会自动打开该对话框。

buttonClass(null)

如果将此选项设置为字符串,则会为该按钮分配指定的类。

buttonColorize(false)

如果buttonImage指定了a ,请在更改颜色时更改图像的背景颜色。

buttonImage(‘images / ui-colorpicker.png’)

与jQueryUI DatePicker相同。

buttonImageOnly(false)

与jQueryUI DatePicker相同。

buttonText(null)

与jQueryUI DatePicker相同。如果为null,则使用语言默认值。

cancelOnExit(false)

如果为true,则在退出时将值恢复为原始值。

closeOnEscape(true)

按键盘上的Escape键关闭窗口。

closeOnOutside(true)

单击颜色选择器显示外部时关闭窗口。

color (’#00FF00’)

初始颜色。认可的格式是:

  • #rrggbb
  • rrggbb (same as previous, but without the #)
  • rgb(rrr,ggg,bbb)
  • rgba(rrr,ggg,bbb,a.a)
  • rgb(rrr%,ggg%,bbb%)
  • rgba(rrr%,ggg%,bbb%,aaa%)
  • w3c-defined color name

colorFormat(‘HEX’)

指定回调中返回的颜色字符串的格式。您可以指定一种预定义格式:

  • #HEX #112233(#RRGGBB)
  • #HEX3 #123(#RGB)如果可能,否则为假。
  • HEX 112233(RRGGBB)
  • HEX3 123(RGB)如果可能,否则为假。
  • #HEXA #11223344(#RRGGBBAA)
  • #HEXA4 #1234(#RGBA)如果可能,否则为假。
  • HEXA 11223344(RRGGBBAA)
  • HEXA4 1234(RGBA)如果可能,否则为假。
  • RGB rgb(123,45,67)如果不透明,否则为假。
  • RGBA RGBA(123,45,67,0.123%)
  • RGB% rgb(12%,34%,56%)如果不透明,否则为假。
  • RGBA% RGBA(12%,34%,56%,0.123%)
  • HSL hsl(123,45,67)如果不透明,否则为假。
  • HSLA HSLA(123,45,67,0.123%)
  • HSL% 如果不透明,则为hsl(12%,34%,56%),否则为假。
  • HSLA% HSLA(12%,34%,56%,0.123%)
  • NAME 最近的颜色名称
  • EXACT 如果可能的确切名称,否则为假。

或指定您自己的格式…每个颜色通道指定为一对两个字符。第一个字符确定颜色通道:

  • a Α
  • r, g, b RGB色彩空间; 红色,绿色和蓝色
  • h, s, v HSV色彩空间; 色调,饱和度和价值
  • c, m, y, k CMYK色彩空间; 青色,洋红色,黄色和黑色
  • L, A, B LAB色彩空间; 亮度,* A和* B.

第二个字符指定数据类型:

  • x 两位十六进制表示法。
  • d 十进制(0-255)表示法。
  • f 浮点(0-1)表示法,不舍入。
  • p 百分比(0-100)表示法,不是四舍五入。

如果使用反斜杠为有效对添加前缀,则不会替换它。所有模式都区分大小写。例如,要创建常见的十六进制颜色格式,请使用“#rxgxbx”。对于rgba()格式,请使用“rgba(rd,gd,bd,af)”

您还可以指定返回第一个非FALSE格式的格式数组。请注意,唯一能够返回FALSE的格式是预定义格式HEX3和EXACT。例如,如果可能,此数组将输出HEX3格式,否则将输出HEX格式:

  • [ ‘HEX3’, ‘HEX’]

禁用 (false)

通过设置此选项禁用或启用颜色选择器及其所有控件。

如果在附加颜色选择器之前禁用input使用disabledHTML属性,则会自动禁用它。

您可以使用option方法调用更改此选项。

可拖动 (true)

如果标题可见且对话框不是内联的,则使对话框可拖动。

遏制(null)

如果对话框是可拖动的,则将拖动限制在指定元素或区域的范围内。与jQueryUI Draggable相同。

持续时间 (‘fast’)

与jQueryUI DatePicker相同。

hideOn(‘button’)

指定如果不内联,哪些用户事件将隐藏颜色选择器。通过用空格分隔来指定多个事件。

  • focus 当元素失焦时(标签或单击)
  • click 单击元素时(对于非输入)
  • alt 单击使用altField指定的元素时
  • button 单击创建的按钮时,如果指定了此事件。
  • all 选择所有可能的触发器
  • both 与all(不推荐使用,保持向后兼容性)相同

hsv(true)

是否显示HSV的输入。

内联(true)

如果设置为false,则附加到非输入仍将使对话框成为弹出而不是内联。确保处理事件以捕捉颜色变化,否则您无法使用颜色。

inlineFrame(true) 如果启用,则在内联时显示边框和背景。禁用可能允许更紧密的集成。

布局({…})

在表格布局中设置元素的位置。您可以通过指定每个部件的单元位置和大小来创建HTML表格的任何布局。

layout选项采用一个map(对象),每个属性名称与一个可用部分(包括任何可能的自定义或插件部分)相匹配。该值是一个数组,其[左侧, 顶部, 宽度, 高度为四个坐标]。

坐标对应于表格中的单元格,因此如果要在左上角放置一个零件并跨越两行和三列,则该值将为 [0, 0, 3, 2]。

应注意确保没有零件重叠(最好只在纸上画出网格)。如果零件重叠,则行为未定义。你不需要覆盖整个矩形区域; 任何空单元格都将保持为空。

默认布局如下:


{
	map:		[0, 0, 1, 5],
	bar:		[1, 0, 1, 5],
	preview:	[2, 0, 1, 1],
	hsv:		[2, 1, 1, 1],
	rgb:		[2, 2, 1, 1],
	alpha:		[2, 3, 1, 1],
	hex:		[2, 4, 1, 1],
	lab:		[3, 1, 1, 1],
	cmyk:		[3, 2, 1, 2],
	swatches:	[4, 0, 1, 5]
}

限制(’’)

将可选颜色限制为任何预定义的限制:

  • ’’ 没有限制,允许所有1600万种颜色的调色板使用8bpp颜色。
  • websafe 由#rrggbb中的00,33,66,99,cc和ff颜色通道值组成的216种颜色。
  • nibble 每种颜色4位,可以很容易地转换为#rgb格式。调色板限制为4096种颜色。
  • binary 仅允许#00或#ff作为原色的颜色通道值; 此限制仅提供8种颜色。
  • name 限制为最接近的颜色名称。

模态 (false)

确保在打开对话框时不能使用屏幕上的其他控件。另请参阅showCancelButton和closeOnEscape以与模态选项结合使用。与模态一起使用时,closeOnOutside是多余的。

模式(‘h’)

确定地图和条形组件的功能。允许的值是; ‘h’,’s’,’l’,‘r’,‘g’,‘b’或’a’,分别用于色调,饱和度,亮度,红色,绿色,蓝色和alpha。

okOnEnter(false)

按键盘上的Enter键关闭窗口,保持所选颜色。

部分

使用part选项指定特定于部件的选项(包括插件部件)。默认情况下,以下部件选项可用:

部分 (’’)

确定要显示的部分。使用任何预设名称(‘完整’,‘弹出’或’内联’)或指定一个零件名称数组(即[‘header’,‘map’,‘bar’,‘hex’,‘hsv’,’ rgb’,‘alpha’,’lab’,‘cmyk’,‘preview’,‘swatches’,‘footer’])。如果给出空字符串,则根据使用颜色选择器的上下文,部件将自动选择为预设“弹出”或“内联”。

位置(null)

将对话框的位置指定为jQueryUI位置对象。有关 如何使用的信息,请参阅jQueryUI .position()API文档。ColorPicker为该of选项添加了一个附加选项; 该值’element’ 将引用ColorPicker附加到的元素,包括它是否不可见)。默认情况下,对话框将附加到元素的左下角,在碰撞时翻转。

区域(’’)

设置要使用的语言。请注意,您必须从i18n目录加载相应的语言文件。‘‘默认包含在内。

还原 (false)

如果启用,则通过任何方式关闭对话框,但“确定”按钮会将颜色恢复为之前的状态,就像按下“取消”按钮一样。当启用任何这些功能时,还原选项会更改标题中的[X]按钮,Escape键盘按钮以及在对话框外部单击的行为。

rgb(true)

是否显示RGB的输入。

showAnim(‘fadeIn’)

与jQueryUI DatePicker相同。

showCancelButton(true)

如果按钮窗口可见,则显示“取消”按钮。

showCloseButton(true)

如果标题可见,则显示“关闭”按钮。如果对话框是内联的,则永远不会显示关闭按钮。

showNoneButton(false)

如果按钮窗板可见,则显示“无”/“恢复”按钮。

showOn(‘焦点点击alt’)

指定哪些用户事件将显示颜色选择器(如果不是内联的)。通过用空格分隔来指定多个事件。

  • focus 当元素聚焦时(选项卡或单击)
  • click 单击元素时(对于非输入)
  • alt 单击使用altField指定的元素时
  • button 单击创建的按钮时,如果指定了此事件。
  • all 选择所有可能的触发器
  • both 与all(不推荐使用,保持向后兼容性)相同

showOptions({})

与jQueryUI DatePicker相同。

色板(null)

’null’显示HTML颜色样本或为您自己的对象提供颜色名称和{r:1,g:1,b:1}数组。例如{‘red’:{r:1,g:0,b:0},‘blue’:{r:0,g:0,b:1}}或者,加载一组预定义的样本并指定名称。例如,对于pantone套装,请指定’pantone’。

色板宽度(84)

样本的宽度以像素显示。

标题(null)

要在标题中显示的标题。如果为null,则使用语言默认值。

活动

每个事件都会收到一个jQuery event对象和一个包含元素’格式化’的对象(颜色根据格式化formatColor),触发事件的Colorpicker元素以及以多种格式表示的颜色:

  • hex: rrggbb
  • css: #rrggbb
  • a: …
  • rgb: {r: …, g: …, b: …}
  • hsv: {h: …, s: …, v: …}
  • cmyk: {c: …, m: …, y: …, k: …}
  • hsl: {h: …, s: …, l: …}
  • lab: {l: …, a: …, b: …}

注意,当在地图或条上拖动鼠标时可以快速连续地触发选择,并且可以在特定用户交互时没有颜色变化的情况下触发选择。

取消(事件,{格式:…,colorPicker:…})

通过取消按钮关闭对话框时触发。

close(event,{formatted:…,colorPicker:…})

弹出窗口关闭时触发。

init(event,{formatted:…,colorPicker:…})

最初设置颜色时触发。只打了一次。回调接收与select事件相同的数据。

ok(event,{formatted:…,colorPicker:…})

通过取消按钮关闭对话框时触发。

open(event,{formatted:…,colorPicker:…})

每次打开对话框时触发。

ready(event,{formatted:…,colorPicker:…})

创建窗口小部件/对话框后触发。

select(event,{formatted:…,colorPicker:…})

每次更改触发,确认(单击确定按钮)和取消(分别单击取消,外窗口或窗口关闭按钮)。

停止(事件,{格式:…,colorPicker:…})

当用户停止更改控件时触发。这仅影响地图和条形部分。当select事件将触发对每个鼠标移动时, stop鼠标按键释放事件时,才会触发。对于其他控件,stop并且select都被触发。

回调在其他方面是相同的select。当两者都被触发时, select之前会被触发stop。

方法

打开

打开对话框

关闭对话框

破坏

销毁小部件

为setColor

将当前颜色设置为指定的颜色。接受任何CSS确认颜色规范。

插件

Colorpicker可以使用多种类型的插件进行扩展。提供了许多插件供使用。插件的构造使得您只需在加载Colorpicker插件后加载javascript文件。

范围

限制允许您限制“限制”选项使用的可能颜色。

没有包含插件。

解析器

解析器采用颜色的文本表示并返回Color对象。如果未找到匹配项,则不返回任何内容并尝试下一个解析器。解析器按照外观顺序进行尝试。

包含的插件:

  • cmyk-parser 解析一种cmyk(c, y, m, k)格式,类似于rgba。
  • cmyk-percentage-parser 解析cmyk(c%, y%, m%, k%)具有百分比的格式。

部分

您可以添加与Colorpicker框架的其余部分交互的其他可视部件(通常是控件)。

包含的插件:

  • memory 基于Cookie的内存节点。
  • rgbsliders 一套三个红色/绿色/蓝色滑块,动态调整渐变。
  • swatchesswitcher 切换所有可用的样本组。

partslists

零件清单是一次选择多个零件的便捷方式,无需单独指定每个零件。

没有包含插件。

区域性

区域(在i18n目录中)插件包含本地化文本(也称为翻译)。提供了许多语言。

包括的地区:

  • de 德语(德语)
  • el 希腊。
  • en 英文(默认)。
  • fr 法语。
  • nl 荷兰人。
  • pt-br 巴西葡萄牙语
  • ru 俄语。

色板

样本是预定义和命名颜色的集合。默认情况下html会加载标准颜色。swatches使用该option方法设置将切换显示的样本。

包含的插件:

crayola Crayola铅笔颜色名字 pantone Pantone颜色代码 ral-classic 经典RAL油漆编号 x11 X11调色板(使用“灰色”,而不是“灰色”)。

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了