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
  • このエントリーをはてなブックマークに追加

関連記事

PAK85_seijinsikikeitai20140113500-thumb-500xauto-4104

スクレイピングをサポートしてくれるAPI【kimono】

kimonoというスクレイピングをAPI化してくれるという素晴らしいサービスがあります。

記事を読む

application-javascript

【javascript】正規表現文字置換簡易ツール

jQueryで作成した正規表現による文字抽出用スクリプトです。 (使い方) 「正規表

記事を読む

application-javascript

javascriptにおけるfor文の書き方

1. for文とは ある条件が正しいときに処理を繰り返すというループを記述するための文です。 似

記事を読む

jquery-icon

jQueryで要素にappendとafterを使って追加する

jqueryのappendは要素の末尾に指定要素を追加し、afterは要素の後に指定要素を加えます。

記事を読む

question

【jQuery/javascript】はてなボタンを動的に設置する

はてなブックマークのボタンをページの読み込みが終わった後にjavascript(jQuery)で追加

記事を読む

PAK65_chikyuugitohon500-thumb-500xauto-3318

Canvasの画像をリサイズする簡単な方法【HTML5・javascript】

調べてみるとCanvasをリサイズするようなjavascriptの関数は存在しないようなので自前で作

記事を読む

googlemapapilineimage1

Google Maps JavaScript API v3でマップ上に線を引く

GoogleMapsAPIを使って地図上に線を引いたときに気を付けたことなどをメモしておきます。

記事を読む

nc23924

ニコニコ動画の外部プレイヤーを動的に設置する【javascript/jQuery】

ニコニコ動画の外部プレイヤーはページのはじめの読み込みのときにしか表示されず、javascriptで

記事を読む

jquery-icon

tableデータから棒グラフを描画できるjQueryプラグインTableBarChartを使ってみる

グラフを作成することについて 既存のtableデータから簡単に棒グラフの作成できるTableBar

記事を読む

progressbar_sample

【javascript/jQuery】Progressbarで処理の進捗状況を表示する

jQuery UIでProgressbarを使う 処理経過を表示する場合プログレスバーにより提示さ

記事を読む

encodingtype
【PHP】headerでContent-Typeを指定したのに効かない場合の対処法

PHPでサイトマップを作ろうと思い、XML形式のファイルを出力しようと

_rtm0919_tp_v
スマホ向け幅固定サイトの回転時の幅対応方法

幅固定サイトでのスマホ回転時Webサイトの横幅を合わせる方法のメモ。

rssimage
【PHP】特定のURLからそのAtomやRSSのフィードを抽出する方法

特定のURLからRSSやATOMのフィードを抽出する方法をメモ。 流

rssimage
フィード抽出ツール(RSS1.0、RSS2.0、atom)

任意URL サイト名 サイトURL RSS1.0

computer_server
格安プラン限定レンタルサーバー機能比較表(2016年)

はじめに  最近新しい共用サーバーをレンタルしようと思い調査およびそ

school_toshokan_hondana
kindle unlimitedが便利だったのでお勧めの使い方など感想メモ

 kindle unlimitedというサービスが8/3からAmazo

TAKEBE055122558_TP_V
寝る前にスマホを見ると斜視になる可能性とその対策

はじめに  寝る前などスマホを横になりながら見続けると斜視になる可能

→もっと見る

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