[jQuery]カラーピッカープラグイン Spectrum

PHPSPOTで紹介されていた

高機能なカラーピッカーを実現出来るjQueryプラグイン「Spectrum」

を試してみた。

ソースコードはgithubにあって、まずはダウンロード。

前回試したcolorjoeとは違って導入がめちゃ簡単。

<link rel='stylesheet' href='../spectrum-master/spectrum.css' />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="../spectrum-master/spectrum.js"></script>
<input type='text' id="custom" >
<script>
jQuery(function($){
    $("#custom").spectrum({
      preferredFormat: "rgb",
      color: "#f00",
      showInput: true,
      chooseText: "決定",
      cancelText: "キャンセル"
    });
});
</script>

「spectrum.css」と「spectrum.js」をインクルードして、init。

色をテキストで選択する場合の色のフォーマットを「preferredFormat」パラメータで設定することができる。

その代わりその時はshowInputパラメータをtrueにしないといけないけど。

決定ボタンはchooseText、キャンセルボタンはcancelTextパラメータでそれぞれ設定することができる。

他にも色々なパラメータがあるので、時間があるときにもっと試したい。