tinyColorPicker是一款适合移动设备的小巧jQuery颜色拾取器。该jQuery颜色拾取器以移动手机为优先对象,它具有速度快、可扩展、高度灵活和可插拔等特点。该jQuery颜色拾取器大小仅4.7K,纯js,不需要图片和css代码。它基于colors.js制作而成,支持所有现代特性,如触摸屏和MS pointer。它使用GPU加速,使用requestanimationframe函数时电池工作时间更长(现代的桌面浏览器提供了requestanimationframe这一函数,基于性能和电池工作时间原因,这是一个更好的选择。),还为开发者提供了大量的hooks用于开发。
该jQuery颜色拾取器支持rgb, hsv(b), hsl, HEX几种颜色模式。
使用方法
只需在页面中引入jqColorPicker.js
,然后即可调用该颜色拾取器插件:
colors.js
Colors({ // all options have a default value... color: 'rgba(204, 82, 37, 0.8)', // initial color (#RGB, RGB, #RRGGBB, RRGGBB, rgb(r, g, b), ...) grey: {r: 0.298954, g: 0.586434, b: 0.114612}, // CIE-XYZ 1931 luminance: {r: 0.2126, g: 0.7152, b: 0.0722}, // W3C 2.0 valueRanges: {rgb: {r: [0, 255], g: [0, 255], b: [0, 255]}, hsv:...}, // skip ranges if no conversion required customBG: '#808080' // the solid bgColor behind the chosen bgColor (saved color) convertCallback: function(colors, type){}, // callback function after color convertion for further calculations... });
配置参数
$('.color').colorPicker({ color: ..., // see Colors... customBG: '#FFF' // see Colors... animationSpeed: 150, // toggle animation speed GPU: true, // use transform: translate3d doRender: true, // manipulate color ans bgColor of input field opacity: true, // enable / disable alpha slider renderCallback: function($elm, toggled) {}, // this === instance; $elm: the input field;toggle === true -> just appeared; false -> opposite; else -> is rendering on pointer move buidCallback: function($elm) {}, // this === instance; $elm: the UI css: '', // replaces existing css cssAddon: '', // adds css to existing margin: '', // positioning margin (can also be set in cssAddon) scrollResize: true // toggle for reposition colorPicker on window.resize/scroll gap: 4 // gap to right and bottom edge of view port if repositioned to fit preventFocus: false // prevents default on focus of input fields, body: document.body // the element where the events are attached to (touchstart, mousedown, pointerdown, focus, click, change) });
颜色模式和方法
在初始化颜色拾取器之后你将获得一个干净的对象实例:
myColors: { colors: { all kinds of color values... see later}, options: { all the options you set or that are set as default... }, __proto__: { // all methods Color uses setColor: function(newCol, type, alpha) {}, setCustomBackground: function(col) {}, saveAsBackground: function() {}, } }
colors.js在颜色转换和计算方面是相当方便的工具,它可以计算背景和前景之间的混合颜色,并使计算结果具有可读性(标准的WCAG 2.0格式)。
myColorPicker: { $trigger: ... // jQuery object of active trigger or null if none active color: { // instance of Color inside colorPicker colors: { all kinds of color values... see later}, options: { all the options you set or that are set as default... }, __proto__: { all methods Color uses ... see above} }, __proto__: { // all methods ColorPicker uses render: function() {}, toggle: function(openClose) {} // openClose: true = open; false = close } }
颜色模式
HEX: // current color as HEX (upper case, 6 digits) rgb: // current RGB color as normalized values (0 - 1) r: // red g: // green b: // blue hsv: // current color values in normalized HSV (HSB) model h: // hue s: // saturation v: // value (brightness) hsl: // current color values in normalized HSL model h: // hue s: // saturation l: // lightness RND: // all above colors in their defined ranges rgb: // current RGB color, rounded between 0 and 255 r: // red (0 - 255) g: // green (0 - 255) b: // blue (0 - 255) hsv: // see above h: // hue (0 - 360 degrees) s: // saturation (0 - 100 %) v: // value (brightness) (0 - 100 %) hsl: // see above h: // hue (0 - 360 degrees) s: // saturation (0 - 100 %) l: // lightness (0 - 100 %) background: // saved (background) color (saveAsBackground(){}) rgb: // color in RGB model r: // red g: // green b: // blue RGB: // RGB color, rounded between 0 and 255 r: // red (0 - 255) g: // green (0 - 255) b: // blue (0 - 255) alpha: // alpha or opacity value (0 - 1) equivalentGrey: // r = g = b = (0 - 255) rgbaMixBlack: // saved (background) color mixed with solid black color r: // red g: // green b: // blue a: // resulting alpha or opacity value (0 - 1) luminance: // luminance of resulting mix (0 - 1) rgbaMixCustom: // saved (background) color mixed with custom (solid) color r: // red g: // green b: // blue a: // resulting alpha or opacity value (0 - 1) luminance: // luminance of resulting mix (0 - 1) rgbaMixWhite: // saved (background) color mixed with solid white color r: // red g: // green b: // blue a: // resulting alpha or opacity value (0 - 1) luminance: // luminance of resulting mix (0 - 1) alpha: // alpha or opacity value (0 - 1) of current color equivalentGrey: // r = g = b = (0 - 1) HUELuminance: // luminance of hue (in full brightnes and saturation) (0 - 1) RGBLuminance: // luminance of the current color hueRGB: // rounded integer value of current color in rgb model with full saturation and brightness r: // red (0 - 255) g: // green (0 - 255) b: // blue (0 - 255) saveColor: // '' or 'web smart' or 'web save', if so. webSave: // closest web-save color r: // red (0 - 255) g: // green (0 - 255) b: // blue (0 - 255) webSmart: // closest web-smart color r: // red (0 - 255) g: // green (0 - 255) b: // blue (0 - 255) rgbaMixBG: // color mix result: current color above saved (background) color r: // red (0 - 1) g: // green (0 - 1) b: // blue (0 - 1) a: // resulting alpha or opacity value (0 - 1) luminance: // luminance of resulting mix (0 - 1) rgbaMixBGMixCustom: // color mix result: current color above saved (background) color above solid custom color r: // red (0 - 1) g: // green (0 - 1) b: // blue (0 - 1) a: // resulting alpha or opacity value (0 - 1) luminance: // luminance of resulting mix (0 - 1) luminanceDelta: // luminance difference between current color and resulting saved-custom mix (0 - 1) hueDelta: // hue difference between current color and resulting saved-custom mix (0 - 1) WCAG2Ratio: // readability vale (1 - 21, 1:1 to 21:1) rgbaMixBlack: // color mix result: current color above solid black r: // red (0 - 1) g: // green (0 - 1) b: // blue (0 - 1) a: // resulting alpha or opacity value (0 - 1) luminance: // luminance of resulting mix (0 - 1) WCAG2Ratio: // readability vale (1 - 21, 1:1 to 21:1) rgbaMixWhite: // color mix result: current color above solid white r: // red (0 - 1) g: // green (0 - 1) b: // blue (0 - 1) a: // resulting alpha or opacity value (0 - 1) luminance: // luminance of resulting mix (0 - 1) WCAG2Ratio: // readability vale (1 - 21, 1:1 to 21:1)
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!