Colour Picker 2.0 實際執行畫面

Colour Picker 2.0 此套件會再一個 SELECT 元素中填充顏色，把顏色以顏色的小方盤呈現可自定義色彩，簡單容易使用檔案更只有1KB而已。

使用方法：
首先載入必要的套件程式碼
//使用Google ajax API 直接連結 jQuery 1.7.2的min版本
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
//Colour Picker 2.0 套件主程式碼
<script src="jquery.colourPicker.js" type="text/javascript"></script>
再來編輯你需要用到的色碼表 運用 表單元素 SELECT
<div id="jquery-colour-picker-example">
<p>
    <label>
        Pick a colour<br />
        <select name="colour">
            <option value="ffffff">#ffffff</option>
            <option value="ffccc9">#ffccc9</option>
            <option value="ffce93">#ffce93</option>
            <option value="fffc9e">#fffc9e</option>
            <option value="ffffc7">#ffffc7</option>
            <option value="9aff99">#9aff99</option>
            <option value="96fffb">#96fffb</option>
            <option value="cdffff">#cdffff</option>
            <option value="cbcefb">#cbcefb</option>
            <option value="cfcfcf">#cfcfcf</option>
            <option value="fd6864">#fd6864</option>
            <option value="fe996b">#fe996b</option>
            <option value="fffe65">#fffe65</option>
            <option value="fcff2f">#fcff2f</option>
            <option value="67fd9a">#67fd9a</option>
            <option value="38fff8">#38fff8</option>
            <option value="68fdff">#68fdff</option>
            <option value="9698ed">#9698ed</option>
            <option value="c0c0c0">#c0c0c0</option>
            <option value="fe0000">#fe0000</option>
            <option value="f8a102">#f8a102</option>
            <option value="ffcc67">#ffcc67</option>
            <option value="f8ff00">#f8ff00</option>
            <option value="34ff34">#34ff34</option>
            <option value="68cbd0">#68cbd0</option>
            <option value="34cdf9">#34cdf9</option>
            <option value="6665cd">#6665cd</option>
            <option value="9b9b9b">#9b9b9b</option>
            <option value="cb0000">#cb0000</option>
            <option value="f56b00">#f56b00</option>
            <option value="ffcb2f">#ffcb2f</option>
            <option value="ffc702">#ffc702</option>
            <option value="32cb00">#32cb00</option>
            <option value="00d2cb">#00d2cb</option>
            <option value="3166ff">#3166ff</option>
            <option value="6434fc">#6434fc</option>
            <option value="656565">#656565</option>
            <option value="9a0000">#9a0000</option>
            <option value="ce6301">#ce6301</option>
            <option value="cd9934">#cd9934</option>
            <option value="999903">#999903</option>
            <option value="009901">#009901</option>
            <option value="329a9d">#329a9d</option>
            <option value="3531ff">#3531ff</option>
            <option value="6200c9">#6200c9</option>
            <option value="343434">#343434</option>
            <option value="680100">#680100</option>
            <option value="963400">#963400</option>
            <option value="986536" selected="selected">#986536</option>
            <option value="646809">#646809</option>
            <option value="036400">#036400</option>
            <option value="34696d">#34696d</option>
            <option value="00009b">#00009b</option>
            <option value="303498">#303498</option>
            <option value="000000">#000000</option>
            <option value="330001">#330001</option>
            <option value="643403">#643403</option>
            <option value="663234">#663234</option>
            <option value="343300">#343300</option>
            <option value="013300">#013300</option>
            <option value="003532">#003532</option>
            <option value="010066">#010066</option>
            <option value="340096">#340096</option>
        </select>
    </label>
</p>
</div>

加上套件預設的CSS樣式
#jquery-colour-picker {
background: #fafafa;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
width: 180px;
padding: 10px 5px 5px 10px;
border: 1px solid #666;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
z-index: 99;
}
#jquery-colour-picker h2 {
margin: 0 0 5px 0;
font-size: 14px;
}
#jquery-colour-picker ul {
margin: 0;
padding: 0;
list-style-type: none;
+zoom: 1;
}
#jquery-colour-picker ul:after {
content: ".";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
#jquery-colour-picker ul li {
float: left;
margin: 0 5px 5px 0;
}
#jquery-colour-picker ul li a {
display: block;
width: 13px;
height: 13px;
text-decoration: none;
text-indent: -100000px;
outline: 0;
border: 1px solid #aaa;
}
#jquery-colour-picker ul li a:hover {
border-color: #000;
}


最後加入啟動程式的 JavaScript 就完成了
$('#jquery-colour-picker-example select').colourPicker({
    ico:    WEBROOT + 'aFramework/Modules/Base/gfx/jquery.colourPicker.gif',
    title:    false
});

附上可加入的參數值

參數	說明
id	執行的元件 ID
ico	調色盤的小圖片
title	顯示的標題
inputBG	顏色改變時是否改變元件背景色
speed	開啟關閉的速度.以毫秒為單位
openTxt	打開時顯示的文字

作者網站：http://andreaslagerkvist.com/jquery/colour-picker/
檔案大小：4 KB
檔案下載：http://andreaslagerkvist.com/aFramework/Modules/Base/jquery.colourPicker.js
檔案備份：下載(包含圖片)