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>
実装例(サンプル)
実装例(サンプル)の操作方法について
![jQuery - Color Picker プラグイン - 色相 jquery-colorpicker-hue.png](http://alphasis.info/wp-content/uploads/2011/06/jquery-colorpicker-hue.png)
ここで色相を指定。
![jQuery - Color Picker プラグイン - 彩度・明度 jquery-colorpicker-sv.png](http://alphasis.info/wp-content/uploads/2011/06/jquery-colorpicker-sv.png)
ここで彩度と明度を指定。
![jQuery - Color Picker プラグイン - 左が新しい色、右が現在の色 jquery-colorpicker-new-and-current.png](http://alphasis.info/wp-content/uploads/2011/06/jquery-colorpicker-new-and-current.png)
左が新しい色。右が現在の色。
![jQuery - Color Picker プラグイン - RGB jquery-colorpicker-rgb.png](http://alphasis.info/wp-content/uploads/2011/06/jquery-colorpicker-rgb.png)
RGB で色を指定することもできる。
![jQuery - Color Picker プラグイン - HSB jquery-colorpicker-hsb.png](http://alphasis.info/wp-content/uploads/2011/06/jquery-colorpicker-hsb.png)
HSB(HSV)色空間で色を指定することもできる。
![jQuery - Color Picker プラグイン - カラーコード jquery-colorpicker-code.png](http://alphasis.info/wp-content/uploads/2011/06/jquery-colorpicker-code.png)
カラーコードで色を指定することもできる。
![jQuery - Color Picker プラグイン - submit jquery-colorpicker-submit.png](http://alphasis.info/wp-content/uploads/2011/06/jquery-colorpicker-submit.png)
最後に、この 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>