カラーピッカー.js

Windows で色を選択するときに表示されるパレットと同じような画面が表示されています。さまざまな色がグラデーションで描かれたパレットがあり、その右には選択した色の濃さを選ぶためのバーがあります。

カラーピッカー.js は、色を選択するためのカラーパレットを表示するライトウェイトなJavaScriptライブラリーです。JavaScriptコードを用意することなしに、カラーピッカーを表示することができます。

このライブラリーは単独で動作するため、他のJavaScriptフレームワーク等を読み込む必要もありません。色を入力するテキストボックスと、必要に応じてボタンを用意するだけで、カラーピッカーをページに導入することができます。

ダウンロード

Release Date Size (byte) Download
1.0.0 2009-05-24 13,265 cpick_1_0_0.zip

対応ブラウザー

  • Internet Explorer 6 以上
  • Firefox 2.0以上
  • Opera 9.0以上
  • Safari 3.0以上(もしかしたら2.0でも動作するかもしれませんが、未確認です。)
  • Google Chrome 0.3以上

使い方

cpick_x_x_x.zipを解凍し、html5jpフォルダをウェブサーバにそのままアップロードしてください。そしてHTMLのhead要素内に、cpick.jsをロードするようscriptタグを記述しておきます。このサンプルは、html5jpフォルダが一階層上に存在しているものとしてscript要素のsrc属性を指定していますが、html5jpフォルダ はどこに設置しても構いません。html5jpフォルダの設置場所に合わせてcpick.jsをロードするscript要素のsrc属性を書き換えてください。

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

あとは、色を入力するテキストボックスを用意するだけです。カラーピッカーは4つの構成パターンに対応しています。それぞれの構成パターンについて、HTMLタグの記述方法を説明します。

標準

テキストボックスをクリックするとカラーピッカーが表示されます。次のテキストボックスをクリックしてください。

カラーピッカーを表示させたいテキストボックスにid属性とclass属性を指定します。

<input type="text" name="c1" value="#e4521e" size="12" id="t1" class="html5jp-cpick" />

たったこれだけで準備完了です。

テキストボックスをカラーリング

テキストボックスのvalue属性値にCSSの色を表すフォーマットの文字列がセットされていれば、事前にテキストボックスの背景色をカラーリングしておくことも可能です。

テキストボックスをクリックすればカラーピッカーが表示され、色を変更すれば、テキストボックスの背景色も変化します。下記のように、テキストボックスのINPUT要素のclass属性を記述します。

<input type="text" name="c2" value="#d0c354" size="12" id="t2" class="html5jp-cpick [coloring:true]" />

ボタンによるトリガー

ボタンを用意して、そのボタンを押すとカラーピッカーが表示する構成にも対応しています。

次のように、テキストボックスに加えて、buttonタグを記述してください。

<input type="text" name="c3" value="#2fcf66" size="12" id="t3" />
<button class="html5jp-cpick [target:t3]">click</button>

ボタンは必ずbutton要素でなければいけません。先ほどのサンプルではclass属性値をテキストボックス側にセットしましたが、このようにボタンを押すことでカラーピッカーを表示させたい場合は、button要素側にclass属性を記述します。

button要素のclass属性には html5jp-cpick に加え、[target:t3] が記述されています。これはボタンに対応するテキストボックスのid属性を表します。これを記述することで、どのボタンが、どのテキストボックスに対応するのかを判別します。

ボタンをカラーリング

ボタンをカラーリングすることも可能です。

button要素のclass属性に、coloring:true を追加することで、ボタンがカラーリングされます。次のHTMLコードをご覧ください。

<input type="text" name="c4" value="#507a98" size="12" id="t4" />
<button class="html5jp-cpick [target:t4;coloring:true]">click</button>

button属性のclass属性値に coloring:true が記述されています。このパラ-メータ指定によって、ボタンがカラーリングされることになります。

パラメータ

カラーピッカー.jsは、カラーピッカーを表示させるためのトリガーとなる要素(テキストボックスまたはボタン)のclass属性にパラメーターを指定することができます。全パラメータを [] で囲みます。そして、CSSの記述と同じように、パラメータ名と値をコロンで区切って宣言を作り、各宣言をセミコロンで区切ります。このパラメータには半角スペースを入れないでください。

例: class="html5jp-cpick [target:t4;coloring:true]"

パラメータ一覧
パラメータ名 初期値 説明
target N/A テキストボックスの要素のid属性値をセットします。もし "html5jp-cpick" をclass属性にセットした要素がテキストボックスであれば指定する必要はありません。もしトリガー要素がbutton要素の場合には、必ずこの設定値に、テキストボックスのid属性値を指定してください。
width 200 カラーピッカーのパネルの横幅を数値で指定します。単位はピクセルです。100~400の数値を指定することができます。
height 160 カラーピッカーのパネルの縦幅を数値で指定します。単位はピクセルです。100~400の数値を指定することができます。
grid 1 カラーパレットのグラデーションの粒度(細かさ)を表します。1~5のいずれかを指定することができます。この設定値はInternet Explorerを除くブラウザーに適用されます。Internet Explorerは、grieidの値が適用されます。
gridie 2

カラーパレットのグラデーションの粒度(細かさ)を表します。1~5のいずれかを指定することができます。この設定値はInternet Explorerに適用されます。Internet Explorer では、カラーパレットをVMLを使って描画します。しかし、レンダリングに時間がかかるため、この設定値を1にすると、動作が遅くなりますので注意してください。

show 3 カラーパレットを表示する際のアニメーション速度を0~5の範囲で指定することができます。0を指定するとアニメーションが無効になります。
hide 3 カラーパレットを閉じる際のアニメーション速度を0~5の範囲で指定することができます。0を指定するとアニメーションが無効になります。
coloring false カラーパレットを表示させるトリガーとなる要素の背景色をカラーリングするかどうかを選択します。true を指定するとカラーリングし、falseを指定するとカラーリングしません。

バージョンアップ履歴

2009-05-24

  • ver 1.0.0 リリース

著作権・謝辞

著作権

Copyright 2007-2012 HTML5.JP

当サイトのJavaScriptライブラリは、Apache License, Version 2.0 のもとに配布します。