jQuery の Color Picker プラグインの導入方法などについて。
jQuery の Color Picker プラグインは、カラーピッカーをWEBに実装するプラグイン。WEB上で、色相・彩度・明度、RGB、HSB、カラーコードなどから、色を探し出すことができる。
導入
Color Picker – jQuery pluginより、「 colorpicker.zip 」をダウンロード。 解凍すると、「css」「images」「js」フォルダが現れる。これらをサーバーにアップロードする。読み込み例
例えば、「http://hoge.tld/colorpicker/」に「css」「images」「js」フォルダをアップした場合、<link rel="stylesheet" media="screen" type="text/css" href="http://hoge.tld/colorpicker/css/colorpicker.css" />
<script type="text/javascript" src="http://hoge.tld/colorpicker/js/colorpicker.js"></script>
<script type="text/javascript" src="http://hoge.tld/colorpicker/js/colorpicker.js"></script>
実装例（サンプル）
実装例（サンプル）の操作方法について
ここで色相を指定。
ここで彩度と明度を指定。
左が新しい色。右が現在の色。
RGB で色を指定することもできる。
HSB（HSV）色空間で色を指定することもできる。
カラーコードで色を指定することもできる。
最後に、この submit ボタンを押すと、現在の色に、新しい色が反映される。
実装例（サンプル）のソースコード
読み込み
<link rel="stylesheet" media="screen" type="text/css" href="colorpicker/css/colorpicker.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="colorpicker/js/colorpicker.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="colorpicker/js/colorpicker.js"></script>
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '#jquery-colorpicker' ) . ColorPicker( { flat: true } );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-colorpicker' ) . ColorPicker( { flat: true } );
} );
// -->
</script>
CSS
<style>
<!--
#jquery-colorpicker input {
font-size: 13px;
color: #ffffff;
}
-->
</style>
<!--
#jquery-colorpicker input {
font-size: 13px;
color: #ffffff;
}
-->
</style>
HTML
<div id="jquery-colorpicker"></div>