[JS]お気に入りのカラースウォッチをアウトプットするためのスクリプト -Swatches

サイト構築 -JavaScript

Post on:2013年5月22日

Swatchesのデモ

デモでは、たくさんのカラースウォッチが並べられています。
各スウォッチはdiv一つで実装できます。

デモページ

スウォッチはカラーとテキストがセットで、ホバーすると16進数のコードも表示されます。

ホバーでコード表示

Swatchesの使い方

使い方は非常に簡単です。

Step 1: 外部ファイル

スタイルシートはhead内に、スクリプトを</body>の上に配置します。

<head>
    <link href="css/swatches.css" rel="stylesheet">
</head>
<body>
    ...
    ...
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.swatches.js"></script>
</body>

Step 2: HTML

各スウォッチはdiv要素一つを使用し、各カラーと名前をdata属性に指定します。

<div class="swatch" data-name="Buried at the Beach" data-colors="#886655,#DD9977,#EECCAA,#EEEEEE,#CC99CC"></div>

複数のスウォッチを設置する場合は、共通のclass（.swatchなど）を使用すると便利です。

Step 3: JavaScript

jqueryのセレクタでdiv要素を指定し、スクリプトを実行します。

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

オプション

data属性を使用せずにスクリプトの配列を使い、カラーと名前を指定することもできます。

// assume <div id="test-swatch" class="swatch" data-name="Test"></div>
var arr = ['#F35C9F','#F3F3F3'];
var test = $('#test-swatch');
test.data('colors', arr);
$('.swatch').swatchify();