ExColor 實際執行畫面

ExColor 是一個 jQuery 的套件用於創建一個類似於 PhotoShop 的顏色選擇器，他附加在 input 的元素上，透過一個簡單的函示就能夠調用顏色選擇器。顏色選擇器中的每一個元素都設計得非常的靈活，自帶有十種不同的設計選項供開發者選擇。

使用方法：
第一步 載入程式所需要的檔案
//使用Google ajax API 直接連結 jQuery 1.8.2的min版本
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
//載入ExColor的主程式碼
<script type="text/javascript" src="jquery.modcoder.excolor.js"></script>

第二步 在你的表單元素需要用到顏色選擇器的 input 為它增加一個識別名稱
<input id="your_input" type="text" name="someName" />

第三步 設定啟用的 JavaScript 程式碼
$(function(){ //文件載入完成後執行
     $("#your_input").modcoder_excolor();
});

面板樣式參考對應下表參數值

附上可修改的參數值

參數	預設	說明
hue_bar	0	顏色選擇條的選項
sb_slider	0	面板顏色選擇的錨點
show_color_on_border	false	input 邊框是否顯示顏色
sb_border_color	#000	選擇器面板邊框顏色
round_corners	true	圓角
shadow_size	4	陰影大小
background_color	#c0c0c0	面板背景色
input_text_color	#000	色碼顯示顏色
effect	null	動畫顯示方式 zoom,fade,slide
hue_slider	0	直條顏色選擇器
color_box	true	input 旁邊小圖是否顯示
border_color	#000	顏色選擇器邊框顏色
label_color	#000	#RGB的顏色
shadow	true	是否顯示陰影
shadow_color	#8a8a8a	陰影的顏色
backlight	true	是否顯示背光
input_background_color	#FFF	色碼顯示背景顏色
anim_speed	slow	動畫的速度 slow,fast或數字毫秒為單位
z_index	999	z-index 的圖層
callback_on_ok	function(){}	當按下 OK 之後執行

作者網站：http://modcoder.org/?ptab=jquery&item=excolor
檔案大小：103 KB(包含範例)
檔案下載：http://modcoder.org/?section=jquery_excolor&action=getfile
檔案備份：下載