开源一个丢人的、简单的颜色选择器

darryrzhong 发布于2019-08-29 15:41 / 613人阅读

摘要：简单的颜色选择器不使用插件或是任何图片无需任何依赖库和近似的体验支持和格式输入支持和输出可监听的事件可通过自定义的扁平化设计同时可在与浏览器中正常工作演示请访问该页面查看在线您可以通过浏览页面源代码了解基本的使用方法安装与使用安装对象和

Simple Color Picker - 简单的颜色选择器

不使用Flash插件或是任何图片

无需任何依赖库

和Photoshop近似的体验

支持 HEX 和 RGB 格式输入

支持 HEX, RGB 和 HSB/HSV 输出

可监听的 onchange 事件

可通过 CSS 自定义的扁平化设计

同时可在 Electron 与浏览器中正常工作

Demo 演示

请访问该页面查看在线DEMO

您可以通过浏览DEMO页面源代码了解基本的使用方法

安装与使用 安装 Electron Webview

const ColorPicker = require(`./lib/color-picker.js`).ColorPicker
const colorPickerObject = new ColorPicker({
  dom: document.getElementById("colorPicker"), // DOM 对象
  value: "#00FF00" //和 {r:0,g:255,b:0} , "0F0" 以及 "00FF00" 具有相同作用
})

浏览器

然后，您只需要实例化一个 ColorPicker 对象即可

const pickers = [
  new ColorPicker({
    dom: document.getElementById("picker1"),
    value: "#0F0"
  }),
  new ColorPicker({
    dom: document.getElementById("picker2"),
    value: { r: 0, g: 0, b: 255 }
  }),
  new ColorPicker({
    dom: document.getElementById("picker3")
  })
]

Usage

// 创建了一个 ColorPicker 数组
const pickers = [
  new ColorPicker({
    dom: document.getElementById("picker1"),
    value: "#0F0"
  }),
  new ColorPicker({
    dom: document.getElementById("picker2"),
    value: { r: 0, g: 0, b: 255 }
  }),
  new ColorPicker({
    dom: document.getElementById("picker3")
  })
]
pickers.forEach(colorP =>
  colorP.addEventListener("change", event => {
    pickers.forEach(colorPs => {
      if (colorP !== colorPs) colorPs.value = colorP.value
    })
  })
)

// 您可以按照以下多种方式格式化值 "hex", "rgb", "hsb" 或是简单的hex颜色
// 示例
const valueGetSample = new ColorPicker({ value: "#ABC" }) // 与 "#AABBCC" 相同
const hex = valueGetSample.getValue("hex") // "AABBCC"
const rgb = valueGetSample.getValue("rgb") // {r: 170, g: 187, b: 204}
const hsb = valueGetSample.getValue("hsb") // {h: 210, s: 0.16666666666666663, b: 0.8}
const value = valueGetSample.getValue("value") // 与 valueGetSample.value 返回值相同

为什么做这个

纯粹是因为github上找不到感觉符合一个小玩具的设计风格基于原生的JS颜色选择器，
于是干脆自己写一个好了，万一还能骗几个Star呢？（逃）

最后在玩着海王星和睡觉穿插着算是写了一个第一版，草草写了一下readme就发出来了，以上，全部。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113478.html

开源一个丢人的、简单的颜色选择器

摘要：简单的颜色选择器不使用插件或是任何图片无需任何依赖库和近似的体验支持和格式输入支持和输出可监听的事件可通过自定义的扁平化设计同时可在与浏览器中正常工作演示请访问该页面查看在线您可以通过浏览页面源代码了解基本的使用方法安装与使用安装对象和 Simple Color Picker - 简单的颜色选择器不使用Flash插件或是任何图片无需任何依赖库和Photoshop近似的体验支持...

xushaojieaaa 2019-08-22 17:57 评论0 收藏0
从零单排之CSS3

摘要：概览大法好今夜秋风阵阵，雾霾层层。布局选择多媒体，字体响应就是屌。说起来条目繁多，乍看之下与之前比起来复杂了好多。圆角指的即使一般正式的写法为效果请看任意一个按钮即可写到此处不禁跟大家说，最好还是配合预编译来写。 CSS3 概览 showImg(https://segmentfault.com/img/bVddDt); CSS3大法好今夜秋风阵阵，雾霾层层。不禁让人想作诗，不过...

刘福 2019-08-28 17:59 评论0 收藏0
如何实现一个颜色选择器

摘要：本文首发于我的博客在开发公司组件库的过程中，颜色组件由于时间关系没有去深入研究，看着花花绿绿的色谱图，以为实现起来会很复杂，就直接将一个开源的颜色选择器封装了一下。本文首发于我的博客在开发公司UI组件库的过程中，颜色组件ColorPicker由于时间关系没有去深入研究，看着花花绿绿的色谱图，以为实现起来会很复杂，就直接将一个开源的颜色选择器封装了一下。这大概是半年以前的事了，这篇...

ccj659 2019-08-30 15:44 评论0 收藏0
如何实现一个颜色选择器

摘要：本文首发于我的博客在开发公司组件库的过程中，颜色组件由于时间关系没有去深入研究，看着花花绿绿的色谱图，以为实现起来会很复杂，就直接将一个开源的颜色选择器封装了一下。本文首发于我的博客在开发公司UI组件库的过程中，颜色组件ColorPicker由于时间关系没有去深入研究，看着花花绿绿的色谱图，以为实现起来会很复杂，就直接将一个开源的颜色选择器封装了一下。这大概是半年以前的事了，这篇...

cheng10 2019-08-26 10:39 评论0 收藏0
大话css预编译处理（三）：基础语法篇

摘要：值得庆幸的是，这三款预处理器语言的语法和语法都差不多。在这一节中，我们依次来对比一下这三款预处理器语言各种特性的异同之处，以及使用方法。预处理器语言支持任何变量例如颜色数值文本。一、Sass、LESS和Stylus的语法每一种语言都有自己一定的语法规则，CSS预处理器语言也不例外，在真正使用CSS预处器语言之前还有一个不可缺少的知识点，就是对语法的理解。值得庆幸的是，这三款CSS预...

刘东 2019-08-30 15:55 评论0 收藏0