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. JavaScript

    スライドアニメーションが素敵なjQueryスライダー「Slideshow with jmpress.…

    とても素敵なスライドアニメーションを実装することができるjQueryス…

  2. no-image

    JavaScript

    親要素の下端まで要素を固定表示できる「Scroll With Page」

    Scroll With Pageはスクロールしても特定の要素を固定表示…

  3. FrameScrub
  4. no-image

    JavaScript

    リッチキャプションを備えたイメージビューア「CaptionBox」

    CaptionBoxは、リッチキャプションを備えた美しいイメージビュー…

  5. jQuery Slideout Menu

    JavaScript

    スライドしてメニュー表示できるjQueryプラグイン「jQuery Slideout Menu」

    jQuery Slideout Menuはメニューをスライドして表示さ…

  6. Easy Z modal

    JavaScript

    シンプルなモーダルウィンドウ・ダイアログボックスを表示できる「Easy Z modal」

    Easy Z modalはシンプルでダイナミックなモーダルウィンドウ・…

コメント

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

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

最近の記事

  1. Anker PowerWave Pad Alloy
  2. Anker Bolder LC30
  3. BG-R10

アーカイブ

PAGE TOP