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

関連記事

javascriptにおけるfor文の書き方

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

記事を読む

【Three.js/jThree.js】カメラ内部パラメータを変更して視野などを変える

jThree.jsでカメラの内部パラメータを変更するのに手間取ったのでメモ。参考にしているjThre

記事を読む

AAアニメーション

javascriptでAAアニメーションしました。AAは以下のところから参照しました。(AAアニメー

記事を読む

【jQuery】hasClass is not a functionエラー

jQueryでセレクタを使って取得してきたjQueryオブジェクトからその子要素をchildrenで

記事を読む

【jQuery】サイドバー固定に役立つサイト集

縦スクロール 縦方向にスクロールして指定の位置に来たら要素を固定させる方法のリンク集を紹介させてい

記事を読む

monacaでWebサイトをアプリ化

monacaを使ってWebサイトをアプリ化するための叩き台としてのメモです。 Webサイトのア

記事を読む

YoutubeのURLリンクを外部プレイヤーのものに正規表現で置換する

Youtubeのアドレスを正規表現を使って抽出して外部プレイヤーのフレームに変換・置換するスクリプト

記事を読む

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

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

記事を読む

【javascript】RGB⇔カラーコード変換ライブラリ

RGBをカラーコードに変換、または、カラーコードをRGBに変換したい場合が出てきたのでどういうも

記事を読む

【ImgToAA】画像をAA化するツール

指定の画像を読み込ませてAA化するツールです。サンプルはこちら。 (使い方) 画像ファイ

記事を読む

UWSCを使ったソフト自動立ち上げ【SoftEther VPN Server】

やりたいこと 最近SoftEtherという筑波大学発のベンチャー企業

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

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

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

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

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

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

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

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

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

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

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

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

→もっと見る

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