jQueryベースのカラーピッカー「Farbtastic」-JavaScript Library Archive

jQueryベースのカラーピッカー「Farbtastic」

配布元：Farbtastic: jQuery color picker plug-in
ライセンス: GPL

FarbtasticはjQueryベースのカラーピッカー作成用のJavaScriptライブラリです。

jQueryをhead要素などで読み込みます。

<script type="text/javascript" src="../js/jQuery.js"></script>

Farbtasticの配布サイトよりダウンロードしてきた、farbtastic.jsとfarbtastic.cssをhead要素などで読み込みます。
ダウンロードしたファイルに同梱されている画像はCSSファイルと同じ階層においておきます。

<script type="text/javascript" src="farbtastic.js"></script>
<link rel="stylesheet" href="farbtastic.css" type="text/css" />

次に、カラーピッカーを付けたいinput要素に任意のIDを付けます。

<input type="text" id="任意のinput要素のid" name="color" value="#123456" />

次に、カラーピッカーの配置用に空のdiv要素を配置しておきます。div要素には任意のid属性を付けておきます。

<div id="任意のdiv要素のid"></div>

最後にhead要素内などで、Farbtasticの利用を宣言します。

<script type="text/javascript">
  $(document).ready(function() {
    $('#任意のdiv要素のid').farbtastic('#任意のdiv要素のid');
  });
</script>

設置自体は非常に簡単なのですが、結構幅を取りますので、利用する場合は適度な領域が必要です。