開源一個丟人的、簡單的顏色選擇器

xushaojieaaa 發布于2019-08-22 17:57 / 2791人閱讀

摘要：簡單的顏色選擇器不使用插件或是任何圖片無需任何依賴庫和近似的體驗支持和格式輸入支持和輸出可監聽的事件可通過自定義的扁平化設計同時可在與瀏覽器中正常工作演示請訪問該頁面查看在線您可以通過瀏覽頁面源代碼了解基本的使用方法安裝與使用安裝對象和

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就發出來了，以上，全部。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95349.html

開源一個丟人的、簡單的顏色選擇器

摘要：簡單的顏色選擇器不使用插件或是任何圖片無需任何依賴庫和近似的體驗支持和格式輸入支持和輸出可監聽的事件可通過自定義的扁平化設計同時可在與瀏覽器中正常工作演示請訪問該頁面查看在線您可以通過瀏覽頁面源代碼了解基本的使用方法安裝與使用安裝對象和 Simple Color Picker - 簡單的顏色選擇器不使用Flash插件或是任何圖片無需任何依賴庫和Photoshop近似的體驗支持...

darryrzhong 2019-08-29 15:41 評論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