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

javascript中的高级颜色选择器 — Colorize
栏目分类:其它   发布日期:2021-10-13   浏览次数:

高级颜色选择器组件,支持 HEX/RGBa 颜色格式、颜色名称、预定义调色板等。

如何使用它:

1. 在文档中加载 JavaScript colorize.js 和 Stylesheet colorize-style.css。

《script src="colorize.js" ></script>
<link rel="stylesheet" href="colorize-style.css" />

2. 创建一个输入字段来触发颜色选择器。

<div id="colorizer">
  <input id="color-input" type="text" value="rgba(255,0,0,1)">
</div>

3. 初始化颜色选择器并在您刚刚创建的输入字段中显示所选颜色的值。

document.getElementById( "color-input" ).addEventListener( "focus", function (e) {
  /* { "id" : null, "container" : "the container for widget(required)", "value" : "rgba(1,1,1,1)(required)" } */
  var data = {
      "id" : null,
      "container" : document.getElementById( "colorizer" ),
      "value" : document.getElementById( "color-input" ).value
  }
  var colorizer = new Gn8Colorize( data );
  colorizer.init().then( 
    success => {
      /* { "hex" : "#ff0000", "rgb" : "rgba(255,0,0,1)", "name" : "red", "theme" : "dark | light" } */
      document.getElementById( "color-input" ).value = success.rgb;
      console.log( success );
    }, error => {
      console.log( error );
    } 
  );
});

官方网站:https://github.com/alibaradaran/colorize

相关热词: Colorize颜色选择器

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