jQuery-Colorwheelはシンプルな円形によるカラーピッカーを実装できるjQueryプラグインです。さまざまな色を円形状に配置して、各カラーをクリックするとその色のカラー値が中央に表示されます。操作や実装がシンプルでお手軽ながらも、パレット内に表示させるカラーも簡単に設定できます。
パレットに並べる色はカスタマイズ可能
jQuery-Colorwheelの具体的な使い方やダウンロードは以下になります。
実際のデモはファイルをダウンロードして確認できます。デモでは通常のカラーピッカーに加え、カスタマイズしたパレットによるデモも用意されています。
カラーホイールに表示されているいずれかの色にホバーすると、その色が少し外側に伸びるアニメーションが実装されています。そして、その色をクリックすると円の中央にカラー値が表示される仕組みです。
パレットに並べる色は設定から手軽にカスタマイズ可能です。表示させる場合は、こんな感じでwidgetというid名を付与したdiv要素を記述してあげます。
<div id="widget"></div>
また、上記の縦横サイズなどはCSSでこのように記述すればOKです。
<style>
#widget {
display: block;
width: 200px;
height: 200px;
}
</style>
そんなに多くのカラーを必要とせず、できるだけシンプルなカラーピッカーを設置したい人は、ぜひ「jQuery-Colorwheel」を使ってみてはいかがでしょうか？ jQuery-ColorwheelのライセンスはMITとのこと。
