FPウェブシュフ

Spectrum～シンプルで使いやすいjQueryカラーピッカープラグイン

spectrumSpectrumは画像ファイルを含まないので、とても「軽い」カラーピッカープラグインです。jQuery・CSSだけで表現され、<input type=”color”>を用いた送信フォームを用意すればすぐに使えます。

使い方

まず、自分のPCに挙動確認用のファイルを作りましょう。私は、spectrumと名付けたフォルダーを作りました。

次にspectrum.cssとspectrum.jsを、マウスの右クリックを利用するなどして、今作ったフォルダーの中に保存します。

その後、以下のようなhtmlファイルを作成・保存してください。私は、0.htmlと名付けました。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>spectrum</title>
<script src='spectrum.js'></script>
<link rel='stylesheet' href='spectrum.css' />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
</head>
<body>
    <form action="data.php" method="get">
        <input type='color' name='color' value='#fe0032' />
        <input type="submit" />
    </form>
</body>
</html>

valueはカラーピッカーの初期値を表します。16進数で記してください。

このhtmlファイルをブラウザで開くとこうなります。

送信ボタンを押すと、色情報を表すパラメーターがきちんと付いてます。

また、色の入力欄を増やすとこうなります。

オプションも豊富な感じ

@web_shufuは今のところこれだけの機能で十分だったのですが、もっと色々とカスタマイズできるみたいです。

詳細は以下のページをご覧ください。
[img-link url=”http://bgrins.github.com/spectrum/” title=”Spectrum – The No Hassle jQuery Colorpicker”]

とにかくプラグインの中に画像ファイルが全く含まれていないというのはいいですね。

spectrum.cssとspectrum.jsを用意するだけで使えるのでとても軽いです。

軽いカラーピッカーをお求めの方にはオススメです。

投稿日

カテゴリー:

投稿者:

webshufu

　最終更新日:

タグ: