阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 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调色板(使用“灰色”,而不是“灰色”)。

      目录
      目录