• かちびと.net

    シンプルなインターフェースのカラーピッカーを実装するjQueryプラグイン・jquery-colorpickerのご紹介です。一般のユーザーにはこういったUIの方が使いやすそうですね。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

シンプルなインターフェースのカラーピッカーを実装するjQueryプラグイン・jquery-colorpicker

スポンサーリンク

シンプルなカラーピッカーを実装
できるライブラリのご紹介です。
jquery-colorpicker。高性能な
カラーピッカーが不要なシーンで
いかがでしょう。

結構いい感じなんですけどライセンスがCCのBYなので土曜の軽めの話題として紹介します。

jquery-colorpicker


高性能なカラーピッカー以外見たことが無かったのでちょっと新鮮でした。一般ユーザー向けならこういうインターフェースの方がかえって優しいかもしれませんね。

コード

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type="text/javascript" src="jquery.colorpicker.js"></script>

本体とプラグインを読み込み。

$('#foo').colorpicker();

あとはセレクタを指定すればいいだけです。

  $('#foo').colorpicker({
    colors: ["FFFFFF", "000000", "111FFF", "C0C0C0", "FFF000"]
  });

取得できるカラーを限定することも出来ます。

  $('#foo').colorpicker({
    delay: 500
  }).on('changeColor', function (event) {
    $(document.body).css('background-color', event.color);
  });

カラーピッカーで取得した色をbodyの背景色に指定するサンプルコードです。

<div id="foo">bar</div>

マークアップはDOM要素にIDやclassを振ればOKです。

CC・BYライセンスなのがなぁ・・商用OKと言われてもクライアントワークでクレジット表記はちょっと個人的に相手に薦められないので使うのは抵抗あります。でも良いプラグインですね。

jquery-colorpicker on github

URL :
TRB :

Comments & Trackbacks (2)

Ads

Posts

Contact

Services