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とのこと。

ax5ui-menuカスタマイズしやすいコンテキストメニューを実装できる「ax5ui-menu」前のページ

マスクエフェクトが素敵なスライダー実装「Masked Circle Slider」次のページno-image

関連記事

  1. no-image

    JavaScript

    フルスクリーンによるjQueryモーダルウィンドウ実装「FullMod」

    FullModはフルスクリーンによるモーダルウィンドウを実装できるjQ…

  2. JavaScript

    リスト化した要素を自分が指定した数に分割できるjQueryプラグイン「Easy List Split…

    リスト化した要素を自分が指定した数に分割できるシンプルだけど便利なjQ…

  3. Custom Carousel

    JavaScript

    カードスタイルのカルーセル・スライダー実装「Custom Carousel」

    Custom Carouselはカードスタイルによるシンプルなカルーセ…

  4. BeefUp

    JavaScript

    多彩なカスタマイズができるjQueryアコーディオンプラグイン「BeefUp」

    BeefUpは多彩なカスタマイズができるレスポンシブに対応したjQue…

  5. notifier

    JavaScript

    Webサイトにシンプルな通知を表示させるjQueryプラグイン「notifier」

    notifierはWebサイトにシンプルな通知を表示させることができる…

  6. Animated menu concept

    JavaScript

    かっこいいアニメーション付きメニュー実装「Animated menu concept」

    Animated menu conceptはかっこいいアニメーション付…

最近の記事

  1. 甘柿
  2. 冬用のふとん
  3. 田沢湖
PAGE TOP