当前位置:主页 > JavsScript库 > 其它 >

JavaScript强大颜色选择器组件 - color-picker.js
栏目分类:其它   发布日期:2021-09-03   浏览次数:

color-picker.js 是一个纯 (Vanilla) JavaScript 库,用于创建支持触摸事件和 alpha chanel 的响应式颜色选择器组件。您将在 zip 中找到更多示例。

用法:

1. 将 color-picker.css 和 color-picker.js 放入你的 html 文档中。

<link href="color-picker.min.css" rel="stylesheet">
<script src="color-picker.min.js"></script>

2. 创建一个文本字段来接受选定的颜色值。或者,您可以在value属性中定义初始颜色代码,如下所示:

<input type="text" value="#ff0" />

3. 初始化文本字段上的颜色选择器。

var picker = new CP(document.querySelector('input[type="text"]'));

4.当颜色改变时自动更新网页的背景颜色。

function onChange(r, g, b, a) {
  this.source.value = this.color(r, g, b, a);
  document.body.style.backgroundColor = this.color(r, g, b, a);
}
picker.on('change', onChange);

5. 可选设置。

var picker = new CP(document.querySelector('input[type="text"]'), {
    color: 'HEX', // 颜色格式
    e: ['touchstart', 'mousedown'], // 要显示的事件颜色选择器
    parent: null //父元素
});

6. API 方法和属性。

// 返回版本
CP.version 
 
// 返回实例
CP.instances 
 
// 在 HEX 和 RGBa 之间转换
CP.HEX('#ff0'); 
CP.HEX([255, 255, 0, 1]); 
CP.RGB = function(x) { 
  if ('string' === typeof x) { 
    // 此处使用正则表达式从字符串输入中提取颜色数据
    // 并将其输出为红色、绿色、蓝色和alpha 颜色数据
    return [r, g, b, a];
  } 
  // 如果输入是颜色数据数组,则返回颜色的字符串表示
  return 'rgba(' + x[0] + ', ' + x[1] + ', ' + x[2] + ', ' + x[3] + ')';
}; 
console.log(CP.RGB('rgba(255, 255, 0, 1)'));
console.log(CP.RGB([255, 255, 0, 1]));
 
// 返回当前状态
picker.state 
 
// 返回保存初始颜色值的源元素
picker.source 
 
// 返回颜色选择器元素
picker.self.style.borderWidth = '4px'; 
 
// 返回活动的颜色选择器控制面板元素
picker.current 
 
// 检查是否可见
picker.visible 
 
// 设置颜色选择器
picker.set(r, g, b, a);
 
// 获取当前颜色选择器
picker.get();
 
// 设置值并更新颜色选择器的颜色状态。
picker.value(r, g, b, a); 
 
// 使用在 state.color 值中定义的名称调用当前颜色解析器函数。
picker.color(r, g, b, a);
 
// 显示/隐藏颜色选择器
picker.enter(); 
picker.exit();
 
// 重新定位颜色选择器
picker.fit([x, y]); 
 
// 从源元素中删除自定义颜色选择器功能。
picker.pop();

7. 事件处理程序。

    • enter

    • exit

    • fit

    • change

    • start

    • drag

    • stop

    • pop

    picker.on(eventName, function(parameter) {
      // 做点什么
    });
    picker.off(eventName, function(parameter) {
      // 做点什么
    });
    picker.fire(eventName, lot);




官方网站:https://github.com/taufik-nurrohman/color-picker

相关热词: color-picker颜色选择器

声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库