JavaScript

値を指定することで好きなカラースウォッチを表示できるjQueryプラグイン「Color Swatches」

これはどこかで使いたくなるjQueryプラグインですね。カラー値を指定するだけで自分の好きなカラースウォッチを表示させることができる「Color Swatches」を使ってみました。Webサイトや何かのアイテムなどの色見本を伝えたい時に役立ちそうなので覚えておきたいです。

[ads_center]

使い方

いつも通りjQuery本体とダウンロードしたプラグインを読み込みます。

<link href="swatches.css" rel="stylesheet" type="text/css">
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1'></script>
<script src="jquery.swatches.js"></script>

Color Swatchesをセット。

<script>
$(function() {
    $('.swatch').swatchify();
});
</script>

マークアップもとてもシンプルで分かりやすいです。data-nameにカラースウォッチの名前、data-colorsにカラー値を指定していきます。

<div class="swatch" data-name="sample" data-colors="#000000,#333333,#666666, #999999, #CCCCCC"></div>

実際にサンプルで試してみるとこんな感じでお洒落なカラースウォッチが表示されます。

Color Swatchesの使い方

また、マウスオーバーするとその色の値も表示されます。

Color Swatchesの使い方

便利ですねー。値を弄るだけですぐに変更できるので管理もしやすくなりますね。色見本を伝えたい時には是非、活用していきたいです。

MacのFinder内のファイルがうまく表示されない時にリフレッシュできる「Refresh finder」前のページ

滑らかでスムーズなホバーエフェクトを実装できるjQueryプラグイン「Slickhover.js」次のページSlickhover.js

関連記事

  1. Mobilepopup

    JavaScript

    軽量でモバイルにも最適なポップアップウィンドウを実装できる「Mobilepopup」

    Mobilepopupは、軽量でカスタマイズ性に優れたモバイルにも最適…

  2. Pushbar.js

    JavaScript

    スライドでコンテンツを引き出せる「Pushbar.js」

    Pushbar.jsはスライドでコンテンツやナビゲーションメニューを引…

  3. Animated Page Transition
  4. jquery-base-slider
  5. jQuery Flip-Quote
  6. Tosrus

    JavaScript

    スマホやタブレットにも対応するLightbox風のjQueryプラグイン「Tosrus」

    TosrusというjQueryプラグインを使えば、スワイプやスクロール…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. 紫陽花
  2. 生ハム&モッツァレラチーズ サラダラップ
  3. コガネムシ
  4. ショルダーハム&5種の野菜サンドイッチ
PAGE TOP