JavaScript/jQuery

jQueryのカラーピッカーライブラリFarbtastic Color Pickerを使う

更新日:

スポンサードリンク

カラーピッカーとは

彩色関係のサイトを見ていると下の画像のようなカラフルな色選択画面が出てくることが度々あります。


これは『カラーピッカー』といって画面上の色を取得する機能やダイアログのことです。こういうのってライブラリになっているのだろうか…と思って調べてみるといくつか出てきました。

『JavaScriptで使えるカラーピッカー作成ライブラリまとめ』
http://phpspot.org/blog/archives/2006/10/javascript_28.html

中でも上の図のようなおしゃれなカラーピッカーとして『Farbtastic Color Picker』というJavaScript(jQuery)のライブラリがあるようなので軽く扱ってみます。

http://acko.net/blog/farbtastic-jquery-color-picker-plug-in/

サイトからソースをダウンロードするとデモ用のファイルがあるのでそれをそのまま表示すると↓のようになります。

『Farbtastic Color Picker』を使う

デモを再現する

サイトにも書いてあることなのですが簡単に導入方法を載せておきます。

まずこのライブラリはjQueryが必要ですので別途入手してきましょう。(Download jQuery:http://jquery.com/download/)

それが終わったらjQueryと合わせてFarbtasticでダウンロードしたファイルに入っているfarbtastic.jsfarbtastic.cssを記述します。

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

そしたらカラーピッカーを配置する用のタグを作成します。デモではID名が"picker"というタグがそれに該当します。

<form action="" style="width: 400px;">
<div class="form-item"><label for="color">Color:</label><input type="text" id="color"
name="color" value="#123456" /></div>
<div id="picker"></div>
</form>

最後に読み込み時のイベントでそれを記述すれば完成です。引数の"#color"は選択した色のカラーコードの代入先となります。

<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
	$('#picker').farbtastic('#color');
});
</script>

あと注意したいのは付属の画像です。円状にカラフルになっている部分やカラーピッカー上のでのマウスポインターなどは画像でできているので、これを忘れると残念なことになってしまします。

なのでmarker.png、mask.png、wheel.pngの画像をスクリプトと同じディレクトリに置くか、もしくは同じ所には置けないという場合は『farbtastic.css』のスタイルを変更するか上書きするかしてください。例えばに『http://○○/』に画像があるなら

.farbtastic .wheel {
	background: url(http://○○/wheel.png) no-repeat !important;
}
.farbtastic .overlay {
	background: url(http://○○/mask.png) no-repeat !important;
}
.farbtastic .marker {
	background: url(http://○○/marker.png) no-repeat !important;
}

といったように『!important』を使って上書きすれば大丈夫です。

取得されるカラーコードを利用する

使い方によっては自分の指定した位置にカラーコードを表示したいといったことやそこで得られるカラーコードを利用したスクリプトを作りたいといったこともあると思います。そこでサイト内を見てみると次のような記述がありました。

$(...).farbtastic() $(...).farbtastic(callback)
This creates color pickers in the selected objects. callback is optional and can be a:

DOM Node, jQuery object or jQuery selector: the color picker will be linked to the selected element(s) by syncing the value (for form elements) and color (all elements).

Function: this function will be called whenever the user chooses a different color. It should have the following signature:
function callback(color) { ... }
With color the chosen color in hex representation (e.g. '#123456').

つまり、コールバック関数を使うことができますよ的なことが書いてあるのでそれで登録すればOKです。例えばID名が"dst"の値としてカラーコードを代入したいと思ったら、さっきのロードイベントを次のように書き換えます。

<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
	$('#picker').farbtastic(function(color) {
		$('#dst').val(color);
	});
});
</script>

これを使ったデモ画面を作ったのでそちらも参考にしてみてください。

スポンサードリンク

-JavaScript/jQuery

Copyright© めめんと , 2019 All Rights Reserved Powered by AFFINGER5.