jQuery的顏色拾取器是怎樣的

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

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

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

HTML

頁面中首先在head中需要引入jquery庫和bigcolorpicker插件，以及所需的樣式jquery.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中放置一個用于觸發接收顏色值的input輸入框。

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

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

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

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

jQuery

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

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

當要在可以移動的彈出層上操作顏色拾取器時，可以通過以下方法實現。

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

$(element).bigColorpickerHide();

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

$(element).bigColorpickerMove();

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

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