jQuery的顏色拾取器是怎樣的

本篇文章為大家展示了jQuery的顏色拾取器是怎樣的，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

顏色拾取器（又名取色板）是為了方便用戶在一些需要使用顏色的WEB應(yīng)用中直觀的選擇所需的顏色，如論壇發(fā)帖時(shí)使用的編輯器中就應(yīng)用到了顏色拾取器。小編將給大家介紹一款非常好用的基于jQuery的顏色拾取器，它可以輕松便捷的應(yīng)用到你的項(xiàng)目中去。

這款顏色拾取器的名稱叫bigcolorpicker，使用這款顏色拾取器，可以通過點(diǎn)擊頁面中的目標(biāo)元素，直接獲取顏色值，方便快捷。

HTML

頁面中首先在head中需要引入jquery庫和bigcolorpicker插件，以及所需的樣式j(luò)query.bigcolorpicker.css。

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

接著，我們直接在body中放置一個(gè)用于觸發(fā)接收顏色值的input輸入框。

<input type="text" id="c1"/>

或者也可以直接放置一個(gè)html元素或者按鈕。

<a href="javascript:void(0)" id="img"></a>

我們還可以獲取多個(gè)顏色，自定義顏色小格子的個(gè)數(shù)，具體請參照demo。

jQuery

調(diào)用bigcolorpicker插件非常簡單，直接使用$(element).bigColorpicker(callback,engine,sideLength); 其中callback為回調(diào)函數(shù)，它可以把選擇的顏色設(shè)置到綁bigColorpicker的元素的上，也可以自定義函數(shù)。engine可以為空，P、L，使用默認(rèn)P，P代表著拾取器的背景是一張圖片，而L則代表著拾取器的小格子是由一個(gè)個(gè)的li組成。sideLength參數(shù)是指小格子的個(gè)數(shù)，只有engine為L時(shí)生效，范圍：2-10，默認(rèn)為6。

$(function(){//點(diǎn)擊輸入框選取顏色$("#c1").bigColorpicker("c1");    //點(diǎn)擊選色按鈕選取顏色$("#btn").bigColorpicker("c2");    //點(diǎn)擊方框選取顏色$("#img").bigColorpicker(function(el,color){$(el).css("background-color",color);});    //選取多個(gè)顏色$(".ku").bigColorpicker(function(el,color){$(el).css("background-color",color);});    //自定義顏色塊個(gè)數(shù)$("#c5").bigColorpicker("c5","L",3);});

當(dāng)要在可以移動的彈出層上操作顏色拾取器時(shí)，可以通過以下方法實(shí)現(xiàn)。

1、拖拽開始時(shí)自動隱藏取色板（以下代碼需要寫在拖拽的開始時(shí)）

$(element).bigColorpickerHide();

2、拖拽時(shí)取色板的位置隨浮層一起移動（以下代碼需要寫在拖拽的進(jìn)行時(shí)）

$(element).bigColorpickerMove();

關(guān)于bigcolorpicker顏色拾取器的更多信息您也可以參照bigcolorpicker項(xiàng)目地址：http://code.google.com/p/jquery-bigui/wiki/bigcolorpicker

上述內(nèi)容就是jQuery的顏色拾取器是怎樣的，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注億速云行業(yè)資訊頻道。