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

公開日: : 最終更新日:2014/08/14 JavaScript/jQuery

スポンサーリンク

カラーピッカーとは

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


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

『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>

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

スポンサーリンク
Amazon

  • このエントリーをはてなブックマークに追加

関連記事

リクルート期間限定ポイントの有効な使い道

はじめに  先日クレジットカードの見直し活動の一環でポイント還元率の

初心者がお金を貯めるための節約・財テク手法まとめ【ポイント還元・投資・税金対策】

はじめに  最近なるべく節約しようと思い、お金周りに関して色々調べて

動画講座を効率的にキャプチャして復習する方法

はじめに  最近、動画媒体の講座などをたまに視聴しています。独学だと

Twitterのオリジナルサイズの画像ファイル(.jpg-large,.jpg-orig等)を一括リネームする

Twitterの画像をオリジナルサイズで保存しようとするとjpg-la

【Unity】他のスクリプトを一括で取得して有効化・無効化を制御する

Unityを使っていて他のスクリプトを一時的に停止させたいと思ったので

テレビの録画をPCやNASで共有する

今までテレビはテレビ用のモニターで見ればいいやと思っていたのですが、さ

【DeepLearning】物体検出手法のSSD(Keras版)を試す (Ubuntu14.04)

はやりのディープラーニングの物体検出手法の一つであるSSDのサンプルを

→もっと見る

  • Author : ががんぼ
    プログラミングやWeb関係で気付いたことについてメモしていく予定。だいたいが備忘録ですが、自分でサンプルを作って動かしてみたりしています。
PAGE TOP ↑