快捷導(dǎo)航

js 顏色選擇插件

更新時(shí)間：2017年01月23日 14:35:51 作者：先修客

本文主要介紹了js 顏色選擇插件。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧

COLPICK是一款非常的輕小,無(wú)需圖片就可以實(shí)現(xiàn)顏色選擇器的jquery插件，只用 JS 和 CSS 就實(shí)現(xiàn)了全部功能，而且非常直觀，類似Photoshop的界面，使用方便。顏色的明暗很容易自定義，整個(gè)整個(gè)都是用html5+ CSS3實(shí)現(xiàn)外觀而，插件只有28 KB，瀏覽器加載速度可以說(shuō)是非?？斓模诘陀贗E9的版本也可以使用，只需載入了支持html5的html5shiv.js.

下載該插件和 colpick.js 和 colpick.css 添加到您的文檔的頭：

<script src="js/colpick.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/colpick.css" type="text/css"/>

html

<button id="picker">Show Color Picker</button>

js

 $('#colorSelector').colpick({
    flat: true,
    layout: 'full',
    submit: true,
    width: 500,
    colorScheme: 'dark',
    color: "#bbbbbb",
    onChange: function (hsb, hex, rgb, el, bySetColor) {
    }, onSubmit: function (hsb, hex, rgb, el) {
      //處理你的業(yè)務(wù)需求
    }
  }).keyup(function () {
    $(this).colpickSetColor(this.value);
  }).colpickSetColor("傳入一個(gè)默認(rèn)的顏色");

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

JavaScript如何實(shí)現(xiàn)防止重復(fù)的網(wǎng)絡(luò)請(qǐng)求的示例
這篇文章主要介紹了JavaScript如何實(shí)現(xiàn)防止重復(fù)的網(wǎng)絡(luò)請(qǐng)求的示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-01-01
常用參考資料（手冊(cè)）下載或者鏈接
常用參考資料（手冊(cè)）下載或者鏈接...
2006-07-07
JavaScript-定時(shí)器0~9抽獎(jiǎng)系統(tǒng)詳解（代碼）
這篇文章主要介紹了 JavaScript-定時(shí)器0~9抽獎(jiǎng)系統(tǒng)，通過代碼實(shí)例說(shuō)明函數(shù)調(diào)用的整體操作，具體步驟大家可查看下文的詳細(xì)講解，感興趣的小伙伴們可以參考一下。
2017-08-08
javascript獲取四位數(shù)字或者字母的隨機(jī)數(shù)
這篇文章主要介紹了javascript獲取四位數(shù)字或者字母的隨機(jī)數(shù),需要的朋友可以參考下
2015-01-01
switchery按鈕的使用方法
下面小編就為大家分享一篇switchery按鈕的使用方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧
2017-12-12
jquery方法+js一般方法+js面向?qū)ο蠓椒▽?shí)現(xiàn)拖拽效果
多種方法制作的div拖拽，簡(jiǎn)單實(shí)用，包括了jquery方法、js一般方法、js面向?qū)ο蠓椒?/div> 2012-08-08
微信JSAPI Ticket接口簽名詳解
這篇文章主要為大家詳細(xì)介紹了微信JSAPI Ticket接口簽名，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-07-07
Extjs 點(diǎn)擊復(fù)選框在表格中增加相關(guān)信息行
這篇文章主要介紹了Extjs 點(diǎn)擊復(fù)選框在表格中增加相關(guān)信息行的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-07-07
JavaScript實(shí)現(xiàn)九宮格抽獎(jiǎng)
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)九宮格抽獎(jiǎng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-06-06
簡(jiǎn)單談?wù)刟xios中的get,post方法
下面小編就為大家?guī)?lái)一篇簡(jiǎn)單談?wù)刟xios中的get,post方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
2017-06-06