no-image

JavaScript

フラットでシンプルなカラーピッカー実装「Pickr」

Pickrはフラットでシンプルなカラーピッカーを実装できるのが特徴です。レスポンシブにも対応しているほか、jQueryなどへの依存性もなくモバイルにも最適ですね。すべてのCSSフレームワークとの互換性もあるとのこと。

HEXやRGBaの値を直接入力することも可能

デモ

デモでは「Pick a color!」と書かれた四角いアイコン部分をクリックすると、カラーピッカーが表示されます。

フラットデザインを採用したカラーピッカーは、シンプルで見やすく操作も簡単でとても使いやすいです。好きな色の部分を選択して「Save」をクリックするとその色に設定できます。HEX、RGBa、HSVaの値を直接入力して色を決めることも可能です。

また、Pickrではel、default、showAlways、appendToBody、position、components、stringsなどオプションによるセッティングもいろいろできるので、カスタマイズしたい人にも嬉しい仕様になっています。ファイル容量もgzip版で8KBと軽量なところもグッドです。

Pickr

no-imageレスポンシブでマルチレベルに対応したナビゲーション「K-Responsive-Menu」前のページ

レスポンシブに対応したモーダルウィンドウのようなアラート実装「jquery.alert」次のページno-image

関連記事

  1. Morphext

    JavaScript

    複数テキストをアニメーションで切り替えていくjQueryプラグイン「Morphext」

    MorphextというjQueryプラグインを使えば、複数テキストをア…

  2. Zoomerang.js
  3. jQuery Slideshow

    JavaScript

    シンプル・軽量・レスポンシブなスライダー実装「jQuery Slideshow」

    jQuery Slideshowはシンプルで軽量、そしてレスポンシブに…

  4. jQuery Brazzers Carousel Plugin
  5. no-image

    JavaScript

    シンプルでエレガントなモーダルボックスを実装できる「Fallr.js」

    Fallr.jsはシンプルでエレガントなモーダルボックスを実装できるj…

最近の記事

  1. クッキー&クリーム ポップコーン
  2. マウイチップス マウイオニオン味
  3. グリーンビーントゥーバー
  4. VS-543AS

アーカイブ

PAGE TOP