原生js實現拾色器插件

codeGoogle 發布于2019-08-22 15:17 / 1805人閱讀

摘要：拾色器將會分別綁定每個元素。會回傳兩個參數，第一個就是該拾色器生成時綁定的第二個參數，代表是回傳的顏色值。起初是插件直接改變綁定元素的顏色，但是想到有些拾色器插件是綁定表單，改變表單顏色值，有些是改變綁定元素的顏色。

原生js實現拾色器插件 前言

插件功能只滿足我司業務需求，如果希望有更多功能的，可在下方留言，我盡量擴展！如果你有需要或者喜歡的話，可以給我github來個star ?

倉庫地址

在線預覽

預覽

準備

首先在頁面中引入js文件

在頁面中寫上如下代碼:

Colorpicker.create({
    bindClass:"picker", // 這里的picker可隨意填 不需要跟我一樣
    change: function(elem,hex){
      // elem: 綁定的元素
      // hex：當前選中顏色的hex值

      elem.style.backgroundColor = hex;
    }
})

bindClass:參數填入你要綁定拾色器的元素，頁面中class為picker有幾個，拾色器將會生成幾個。拾色器將會分別綁定每個元素。點擊每個元素時，都會自動打開該元素綁定的拾色器。

change:在選擇的色彩改變的時候會觸發該回調方法。會回傳兩個參數，第一個elem就是該拾色器生成時綁定的picker;第二個參數，hex代表是回傳的顏色值。起初是插件直接改變綁定元素的顏色，但是想到有些拾色器插件是綁定input表單，改變表單顏色值，有些是改變綁定元素的顏色。所以為了讓使用者自由度更高點，暫提供兩個回調參數讓你自定義。如上面我是直接改變元素顏色。

如果需要更多回調方法，我會盡量擴展

結尾

如有什么功能需要增加的，可在評論區留言，我盡量滿足。如有什么疏忽或錯誤，希望您指出。我會盡早修改，以免誤導他人。

云服務器 GPU云服務器拾色器原生js彈窗插件原生js實現 ajax原生js實現

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

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

we-color-picker 微信小程序拾色器（顏色選擇器）組件

摘要：最近一直在搞小程序，由于剛需一個拾色器，搜了半天也沒見人做過，就自己動手擼了一個，還在不斷地改進優化中。。。最近一直在搞小程序，由于剛需一個拾色器，搜了半天也沒見人做過，就自己動手擼了一個，還在不斷地改進優化中。。。項目地址 https://github.com/KirisakiAr... 查看DEMO showImg(https://i.loli.net/2019/01/02/...

tainzhi 2019-08-23 14:28 評論0 收藏0
前端開發VScode常用插件

摘要：名稱功能自動閉合標簽自動提示修改標簽時，自動修改匹配的標簽格式化編寫更加人性化的注釋添加行書簽的瀏覽器兼容性檢查運行選中代碼段支持大量語言，包括單詞拼寫檢查在中彈出瀏覽器并搜索，可編輯搜索引擎顏色值在代碼中高亮顯示小窗口顯示顏色值，等等拾色名稱功能 Auto Close Tag 自動閉合HTML標簽 Auto Import...

hellowoody 2019-08-21 18:21 評論0 收藏0
前端復習筆記--1.html標簽復習速查

摘要：可讀性，提高代碼的可讀性，便于多人的修改維護，提高開發效率。主流瀏覽器都兼容的新標簽，對于及以下版本不認識的新元素，可以使用創建一個沒用的元素來解決，例如，也可以使用來解決兼容性問題，詳情可參考概覽 showImg(https://segmentfault.com/img/bV5JXT?w=1880&h=1050); 文檔章節導航表示和主要內容不相關的區域表示一個獨...

番茄西紅柿 2019-08-01 18:42 評論0 收藏0
前端工具【3】—— 圖片處理

摘要：切圖主要是用的工具就是等等，除此之外，在開發過程中我們也會用到其他工具，以下介紹一些有關于圖片處理的操作。是打開文件捕捉活動窗口捕獲窗口捕獲矩形區域，可自行截圖。新版的比之前那些版本增加了一鍵導出功能，這個功能很大程度方便了我們拆分圖片。在寫頁面之前，很重要的一個技能是切圖，根據UI設計的設計圖，在了解頁面結構和操作后進行分割，取出自己在開發過程中是用到的圖片資源。切圖主要是用的工具...

MobService 2019-08-02 16:05 評論0 收藏0