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. ssi-modal

    JavaScript

    フレキシブルでパワフルなモーダルウィンドウを実装できる「ssi-modal」

    ssi-modalはカスタマイズ性に優れたフレキシブルでパワフルなモー…

  2. no-image
  3. JavaScript

    画面全体に背景を表示させフェードやスライドもできるjQuery「bgStretcher」

    ブラウザの画面全体に背景を表示させることができるjQueryプラグイン…

  4. SPOILER ALERT!

    JavaScript

    画像やテキストにボカシを入れることができるjQueryプラグイン「SPOILER ALERT!」

    画像やテキストといった部分にボカシを入れることができるjQueryプラ…

  5. jQuery contextMenu plugin & polyfill
  6. Dialogify

    JavaScript

    カスタマイズできるダイアログ・ライトボックスを作成できる「Dialogify」

    Dialogifyはカスタマイズできるダイアログやライトボックスなどを…

コメント

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

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

最近の記事

  1. DCG-CA21
  2. Apple WatchでのMacロック解除を無効
  3. オータムスイートポテトフラペチーノ
  4. 紅葉
  5. ナノケア EH-NA0E

アーカイブ

PAGE TOP