Farbtastic Color Picker 實際執行畫面

Farbtastic Color Picker是一個jQuery套件，可以添加一個或多個顏色選擇器窗口小部件到一個頁面透過JavaScript。每個窗口小部件，然後連接到一個現有的元素（例如，一個文本字段），選擇一種顏色時，將更新該元素的值。

使用方法：
首先載入檔案
//利用 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>
//Farbtastic Color Picker 套件程式碼和CSS
<script type="text/javascript" src="farbtastic.js"></script>
<link rel="stylesheet" href="farbtastic.css" type="text/css" />

再來需要用到顏色編輯器的HTML元素
<form><input type="text" id="color" name="color" value="#123456" /></form>
 <div id="colorpicker"></div> <!--顏色選擇的主體-->

最後加上啟動程式的JavaScript就完成了
<script type="text/javascript">
$(function() {
   $('#colorpicker').farbtastic('#color');
});
</script>

附上程式的屬性與方法
方便修改使用

方法

.linkTo(callback)

設置一個新的反為函式

.setColor(string)

設定選擇器新的顏色 使用 網頁色碼表

.setColor([h, s, l])

設定選擇器新的顏色 使用 HSL色碼

屬性

.linked

目前的顏色選擇

.color

目前的顏色色碼表顯示

.hsl

目前的顏色HSL顯示

作者網站：http://acko.net/blog/farbtastic-jquery-color-picker-plug-in/
檔案大小：34 KB(包含範例不包含jQuery框架)
檔案下載：http://acko.net/files/farbtastic/farbtastic12.zip
檔案備份：下載