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. no-image

    JavaScript

    シンプル・軽量なjQueryイメージビューア「WimmViewer」

    WimmViewerはシンプルで軽量なイメージビューアを実装できるjQ…

  2. JavaScript

    Google マップを簡単でシンプルに使えるようにしてくれる「gmaps.js」

    Google マップをとても簡単に扱えるようにしてくれるgmaps.j…

  3. BookBlock Revised
  4. Pongstagr.am

    JavaScript

    自分のインスタグラムの画像を表示できるjQueryプラグイン「Pongstagr.am」

    Pongstagr.amは自分のインスタグラムの画像をWebサイトに表…

  5. PIGNOSE Calendar

    JavaScript

    美しくてシンプルに使えるデートピッカー実装「PIGNOSE Calendar」

    PIGNOSE Calendarは、美しくてシンプルな操作性によるデー…

  6. anchor.js

    JavaScript

    ページ内リンクをスムーズにスクロール移動できるjQueryプラグイン「anchor.js」

    anchor.jsはページ内リンクをスムーズなスクロールで移動すること…

最近の記事

  1. Anker PowerCore Lite 20000
  2. ネクスタイム
  3. フォールドオーバーポーチ
  4. 田沢湖
  5. ハクバ シリコンクロス

Instagram始めました

Facebookページ

アーカイブ

PAGE TOP