資訊專(zhuān)欄INFORMATION COLUMN
摘要：拾色器將會(huì)分別綁定每個(gè)元素。會(huì)回傳兩個(gè)參數(shù)，第一個(gè)就是該拾色器生成時(shí)綁定的第二個(gè)參數(shù)，代表是回傳的顏色值。起初是插件直接改變綁定元素的顏色，但是想到有些拾色器插件是綁定表單，改變表單顏色值，有些是改變綁定元素的顏色。
原生js實(shí)現(xiàn)拾色器插件 前言
插件功能只滿(mǎn)足我司業(yè)務(wù)需求，如果希望有更多功能的，可在下方留言，我盡量擴(kuò)展！如果你有需要或者喜歡的話(huà)，可以給我github來(lái)個(gè)star ?
倉(cāng)庫(kù)地址預(yù)覽 準(zhǔn)備在線(xiàn)預(yù)覽
首先在頁(yè)面中引入js文件
在頁(yè)面中寫(xiě)上如下代碼:
Colorpicker.create({
bindClass:"picker", // 這里的picker可隨意填 不需要跟我一樣
change: function(elem,hex){
// elem: 綁定的元素
// hex：當(dāng)前選中顏色的hex值
elem.style.backgroundColor = hex;
}
})
bindClass:參數(shù)填入你要綁定拾色器的元素，頁(yè)面中class為picker有幾個(gè)，拾色器將會(huì)生成幾個(gè)。拾色器將會(huì)分別綁定每個(gè)元素。點(diǎn)擊每個(gè)元素時(shí)，都會(huì)自動(dòng)打開(kāi)該元素綁定的拾色器。結(jié)尾change:在選擇的色彩改變的時(shí)候會(huì)觸發(fā)該回調(diào)方法。會(huì)回傳兩個(gè)參數(shù)，第一個(gè)elem就是該拾色器生成時(shí)綁定的picker;第二個(gè)參數(shù)，hex代表是回傳的顏色值。起初是插件直接改變綁定元素的顏色，但是想到有些拾色器插件是綁定input表單，改變表單顏色值，有些是改變綁定元素的顏色。所以為了讓使用者自由度更高點(diǎn)，暫提供兩個(gè)回調(diào)參數(shù)讓你自定義。如上面 我是直接改變?cè)仡伾?/p>
如果需要更多回調(diào)方法，我會(huì)盡量擴(kuò)展
如有什么功能需要增加的，可在評(píng)論區(qū)留言，我盡量滿(mǎn)足。如有什么疏忽或錯(cuò)誤，希望您指出。我會(huì)盡早修改，以免誤導(dǎo)他人。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/93336.html
摘要：最近一直在搞小程序，由于剛需一個(gè)拾色器，搜了半天也沒(méi)見(jiàn)人做過(guò)，就自己動(dòng)手?jǐn)]了一個(gè)，還在不斷地改進(jìn)優(yōu)化中。。。 最近一直在搞小程序，由于剛需一個(gè)拾色器，搜了半天也沒(méi)見(jiàn)人做過(guò)，就自己動(dòng)手?jǐn)]了一個(gè)，還在不斷地改進(jìn)優(yōu)化中。。。 項(xiàng)目地址 https://github.com/KirisakiAr... 查看DEMO showImg(https://i.loli.net/2019/01/02/...
摘要：名稱(chēng)功能自動(dòng)閉合標(biāo)簽自動(dòng)提示修改標(biāo)簽時(shí)，自動(dòng)修改匹配的標(biāo)簽格式化編寫(xiě)更加人性化的注釋添加行書(shū)簽的瀏覽器兼容性檢查運(yùn)行選中代碼段支持大量語(yǔ)言，包括單詞拼寫(xiě)檢查在中彈出瀏覽器并搜索，可編輯搜索引擎顏色值在代碼中高亮顯示小窗口顯示顏色值，等等拾色 名稱(chēng) 功能 Auto Close Tag 自動(dòng)閉合HTML標(biāo)簽 Auto Import...
摘要：可讀性，提高代碼的可讀性，便于多人的修改維護(hù)，提高開(kāi)發(fā)效率。主流瀏覽器都兼容的新標(biāo)簽，對(duì)于及以下版本不認(rèn)識(shí)的新元素，可以使用創(chuàng)建一個(gè)沒(méi)用的元素來(lái)解決，例如，也可以使用來(lái)解決兼容性問(wèn)題，詳情可參考 概覽 showImg(https://segmentfault.com/img/bV5JXT?w=1880&h=1050); 文檔章節(jié) 導(dǎo)航 表示和主要內(nèi)容不相關(guān)的區(qū)域 表示一個(gè)獨(dú)...
摘要：切圖主要是用的工具就是等等，除此之外，在開(kāi)發(fā)過(guò)程中我們也會(huì)用到其他工具，以下介紹一些有關(guān)于圖片處理的操作。是打開(kāi)文件捕捉活動(dòng)窗口捕獲窗口捕獲矩形區(qū)域，可自行截圖。新版的比之前那些版本增加了一鍵導(dǎo)出功能，這個(gè)功能很大程度方便了我們拆分圖片。 在寫(xiě)頁(yè)面之前，很重要的一個(gè)技能是切圖，根據(jù)UI設(shè)計(jì)的設(shè)計(jì)圖，在了解頁(yè)面結(jié)構(gòu)和操作后進(jìn)行分割，取出自己在開(kāi)發(fā)過(guò)程中是用到的圖片資源。切圖主要是用的工具...
閱讀 2386·2021-11-24 09:38
閱讀 3446·2021-11-22 14:44
閱讀 1219·2021-07-29 13:48
閱讀 2685·2019-08-29 13:20
閱讀 1177·2019-08-29 11:08
閱讀 2152·2019-08-26 10:58
閱讀 1319·2019-08-26 10:55
閱讀 3213·2019-08-26 10:39
