成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

開源一個(gè)丟人的、簡單的顏色選擇器

xushaojieaaa / 2803人閱讀

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

Simple Color Picker - 簡單的顏色選擇器

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

無需任何依賴庫

和Photoshop近似的體驗(yàn)

支持 HEX 和 RGB 格式輸入

支持 HEX, RGB 和 HSB/HSV 輸出

可監(jiān)聽的 onchange 事件

可通過 CSS 自定義的扁平化設(shè)計(jì)

同時(shí)可在 Electron 與瀏覽器中正常工作

Demo 演示

請?jiān)L問該頁面查看在線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" 具有相同作用
})
瀏覽器

然后，您只需要實(shí)例化一個(gè) 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 
// 創(chuàng)建了一個(gè) ColorPicker 數(shù)組
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 返回值相同
為什么做這個(gè)

純粹是因?yàn)間ithub上找不到感覺符合一個(gè)小玩具的設(shè)計(jì)風(fēng)格基于原生的JS顏色選擇器，
于是干脆自己寫一個(gè)好了，萬一還能騙幾個(gè)Star呢？（逃）

最后在玩著海王星和睡覺穿插著算是寫了一個(gè)第一版，草草寫了一下readme就發(fā)出來了，以上，全部。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/95349.html

相關(guān)文章

  • 開源一個(gè)丟人的、簡單的顏色選擇器

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

    darryrzhong 評論0 收藏0

  • 從零單排之CSS3

    摘要：概覽大法好今夜秋風(fēng)陣陣，霧霾層層。布局選擇多媒體，字體響應(yīng)就是屌。說起來?xiàng)l目繁多，乍看之下與之前比起來復(fù)雜了好多。圓角指的即使一般正式的寫法為效果請看任意一個(gè)按鈕即可寫到此處不禁跟大家說，最好還是配合預(yù)編譯來寫。 CSS3 概覽 showImg(https://segmentfault.com/img/bVddDt); CSS3大法好 今夜秋風(fēng)陣陣，霧霾層層。不禁讓人想作詩，不過...

    劉福 評論0 收藏0

  • 如何實(shí)現(xiàn)一個(gè)顏色選擇器

    摘要：本文首發(fā)于我的博客在開發(fā)公司組件庫的過程中，顏色組件由于時(shí)間關(guān)系沒有去深入研究，看著花花綠綠的色譜圖，以為實(shí)現(xiàn)起來會(huì)很復(fù)雜，就直接將一個(gè)開源的顏色選擇器封裝了一下。 本文首發(fā)于我的博客 在開發(fā)公司UI組件庫的過程中，顏色組件ColorPicker由于時(shí)間關(guān)系沒有去深入研究，看著花花綠綠的色譜圖，以為實(shí)現(xiàn)起來會(huì)很復(fù)雜，就直接將一個(gè)開源的顏色選擇器封裝了一下。這大概是半年以前的事了，這篇...

    ccj659 評論0 收藏0

  • 如何實(shí)現(xiàn)一個(gè)顏色選擇器

    摘要：本文首發(fā)于我的博客在開發(fā)公司組件庫的過程中，顏色組件由于時(shí)間關(guān)系沒有去深入研究，看著花花綠綠的色譜圖，以為實(shí)現(xiàn)起來會(huì)很復(fù)雜，就直接將一個(gè)開源的顏色選擇器封裝了一下。 本文首發(fā)于我的博客 在開發(fā)公司UI組件庫的過程中，顏色組件ColorPicker由于時(shí)間關(guān)系沒有去深入研究，看著花花綠綠的色譜圖，以為實(shí)現(xiàn)起來會(huì)很復(fù)雜，就直接將一個(gè)開源的顏色選擇器封裝了一下。這大概是半年以前的事了，這篇...

    cheng10 評論0 收藏0

  • 大話css預(yù)編譯處理（三）：基礎(chǔ)語法篇

    摘要：值得慶幸的是，這三款預(yù)處理器語言的語法和語法都差不多。在這一節(jié)中，我們依次來對比一下這三款預(yù)處理器語言各種特性的異同之處，以及使用方法。預(yù)處理器語言支持任何變量例如顏色數(shù)值文本。 一、Sass、LESS和Stylus的語法 每一種語言都有自己一定的語法規(guī)則，CSS預(yù)處理器語言也不例外，在真正使用CSS預(yù)處器語言之前還有一個(gè)不可缺少的知識點(diǎn)，就是對語法的理解。值得慶幸的是，這三款CSS預(yù)...

    劉東 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<