Color Picker 顏色選擇器

Color Picker 應用在一般表單元素 SELECT 的顏色選擇器基於 jQuery 框架開發。這意味著 Color Picker 將與大多數的瀏覽器都會相容，在 SELECT 旁會出現一個小圖，點選他就會以淡入淡出的方式顯現出顏色選擇器的主體，SELECT 的顏色內容能夠改變顏色選擇器的小圖顏色，相反的顏色選擇器選擇的數值也能夠改變 SELECT 的色碼。

使用方法：
第一步 載入 Color Picker 需要用到的 JavaScritp 和 CSS 檔
<!-- Color Picker 的 CSS 樣式檔-->
<link rel="stylesheet" href="jquery.colorpicker.css" type="text/css" media="screen" />
<!-- 使用 Google AJAX API 取得 jQuery 框架 1.8.2 min 版本 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- Color Picker 的主程式碼 -->
<script src="jquery.colorpicker.js" type="text/javascript"></script>

第二步 寫入 HTML 表單 SELECT 的內容
<select id="picker">  <!--預存一些色碼-->
<option value="FFFFFF">FFFFFF</option>
<option value="FFDFDF">FFDFDF</option>
...
<option value="00001b">00001b</option>
<option value="000000">000000</option>
</select>

第三步 使用 JavaScript 讓 Color Picker 的功能初始化
$(function(){
    $('#picker').colorpicker({
        size: 20,
        label: 'Color: ',
        hide: false
    });
});

附上 Color Picker 可修改參數表

參數	型態	預設	說明
size	字串	''	顏色格子的大小像素
scount	整數	20	多少的正方格顯示,每行有六格
label	整數	6	預先選擇器的顏色
hide	布林	true	是否隱藏來源的顏色

作者網站：https://github.com/hailwood/jQuery-Color-Picker
檔案大小：3.61 KB (包含範例)
檔案下載：https://github.com/hailwood/jQuery-Color-Picker/archive/master.zip
檔案備份：下載