no-image

JavaScript

シンプルな円形のカラーピッカーを実装できる「jQuery-Colorwheel」

jQuery-Colorwheelはシンプルな円形によるカラーピッカーを実装できるjQueryプラグインです。さまざまな色を円形状に配置して、各カラーをクリックするとその色のカラー値が中央に表示されます。操作や実装がシンプルでお手軽ながらも、パレット内に表示させるカラーも簡単に設定できます。

パレットに並べる色はカスタマイズ可能

jQuery-Colorwheel

実際のデモはファイルをダウンロードして確認できます。デモでは通常のカラーピッカーに加え、カスタマイズしたパレットによるデモも用意されています。

カラーホイールに表示されているいずれかの色にホバーすると、その色が少し外側に伸びるアニメーションが実装されています。そして、その色をクリックすると円の中央にカラー値が表示される仕組みです。

<div id="widget"></div>
<style>
    #widget {
        display: block;
        width: 200px;
        height: 200px;
    }
</style>

そんなに多くのカラーを必要とせず、できるだけシンプルなカラーピッカーを設置したい人は、ぜひ「jQuery-Colorwheel」を使ってみてはいかがでしょうか? jQuery-ColorwheelのライセンスはMITとのこと。

関連記事

  1. Recursive Hover Nav
  2. 2013年上半期jQueryプラグインまとめ

    JavaScript

    2013年上半期に紹介したjQueryプラグイン50選まとめ

    気づいたらあっという間に2013年上半期が終わってしまいましたね。とい…

  3. Chariot

    JavaScript

    Webページ内でステップごとのガイドツアーを実装できる「Chariot」

    ChariotはWebページ内でのガイドツアーを実装することができるJ…

  4. no-image
  5. jQuery Flat Shadow

    JavaScript

    フラットデザインに影をつけてくれるjQueryプラグイン「jQuery Flat Shadow」

    フラットデザインのUIに影(シャドウ)をつけてくれるjQueryプラグ…

  6. no-image

最近の記事

  1. ジェットストリームの三色ボールペン(+シャーペン付き)と黒の替芯
  2. ブラジルイパネマ
  3. 梅しば
  4. BM-IBCDH13RD

アーカイブ

PAGE TOP