jQuery の Color Picker プラグインのカラーセレクター使用例。カラーセレクターをクリックすると、カラーピッカーが、上から下へのアニメーションで出現。カラーピッカーで、色を選択し、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 type="text/javascript">
<!--
jQuery( function() {
jQuery( '#colorpickerHolder' ) . ColorPicker( {
flat: true,
color: '#00ffff',
onSubmit: function( hsb, hex, rgb ) {
jQuery( '#colorSelector div' ) . css( 'backgroundColor', '#' + hex );
}
} );
jQuery( '#colorpickerHolder>div' ) . css( 'position', 'absolute' );
var widt = false;
jQuery( '#colorSelector' ) . bind( 'click', function() {
jQuery( '#colorpickerHolder' ) . stop() . animate( { height: widt ? 0 : 173 }, 500 );
widt = !widt;
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#colorpickerHolder' ) . ColorPicker( {
flat: true,
color: '#00ffff',
onSubmit: function( hsb, hex, rgb ) {
jQuery( '#colorSelector div' ) . css( 'backgroundColor', '#' + hex );
}
} );
jQuery( '#colorpickerHolder>div' ) . css( 'position', 'absolute' );
var widt = false;
jQuery( '#colorSelector' ) . bind( 'click', function() {
jQuery( '#colorpickerHolder' ) . stop() . animate( { height: widt ? 0 : 173 }, 500 );
widt = !widt;
} );
} );
// -->
</script>
CSS
画像へのパスは、それぞれ、アップロードした場所を指定する。
画像は、「 colorpicker.zip 」の「images」フォルダに含まれている。
「 colorpicker.zip 」の入手方法については、こちら。
<style>
<!--
#colorSelector {
position: absolute;
top: 0;
left: 0;
width: 36px;
height: 36px;
background: url( colorpicker/images/select2.png );
}
#colorSelector div {
position: absolute;
top: 4px;
left: 4px;
width: 28px;
height: 28px;
background: url( colorpicker/images/select2.png) center;
}
#colorpickerHolder {
top: 32px;
left: 0;
width: 356px;
height: 0;
overflow: hidden;
position: absolute;
}
#colorpickerHolder .colorpicker {
background-image: url( colorpicker/images/custom_background.png );
position: absolute;
bottom: 0;
left: 0;
}
#colorpickerHolder .colorpicker_hue div {
background-image: url( colorpicker/images/custom_indic.gif );
}
#colorpickerHolder .colorpicker_hex {
background-image: url( colorpicker/images/custom_hex.png );
}
#colorpickerHolder .colorpicker_rgb_r {
background-image: url( colorpicker/images/custom_rgb_r.png );
}
#colorpickerHolder .colorpicker_rgb_g {
background-image: url( colorpicker/images/custom_rgb_g.png );
}
#colorpickerHolder .colorpicker_rgb_b {
background-image: url( colorpicker/images/custom_rgb_b.png );
}
#colorpickerHolder .colorpicker_hsb_s {
background-image: url( colorpicker/images/custom_hsb_s.png );
display: none;
}
#colorpickerHolder .colorpicker_hsb_h {
background-image: url( colorpicker/images/custom_hsb_h.png );
display: none;
}
#colorpickerHolder .colorpicker_hsb_b {
background-image: url( colorpicker/images/custom_hsb_b.png );
display: none;
}
#colorpickerHolder .colorpicker_submit {
background-image: url( colorpicker/images/custom_submit.png );
}
#colorpickerHolder .colorpicker input {
color: #778398;
font-size: 13px;
}
#customWidget {
position: relative;
height: 36px;
}
-->
</style>
<!--
#colorSelector {
position: absolute;
top: 0;
left: 0;
width: 36px;
height: 36px;
background: url( colorpicker/images/select2.png );
}
#colorSelector div {
position: absolute;
top: 4px;
left: 4px;
width: 28px;
height: 28px;
background: url( colorpicker/images/select2.png) center;
}
#colorpickerHolder {
top: 32px;
left: 0;
width: 356px;
height: 0;
overflow: hidden;
position: absolute;
}
#colorpickerHolder .colorpicker {
background-image: url( colorpicker/images/custom_background.png );
position: absolute;
bottom: 0;
left: 0;
}
#colorpickerHolder .colorpicker_hue div {
background-image: url( colorpicker/images/custom_indic.gif );
}
#colorpickerHolder .colorpicker_hex {
background-image: url( colorpicker/images/custom_hex.png );
}
#colorpickerHolder .colorpicker_rgb_r {
background-image: url( colorpicker/images/custom_rgb_r.png );
}
#colorpickerHolder .colorpicker_rgb_g {
background-image: url( colorpicker/images/custom_rgb_g.png );
}
#colorpickerHolder .colorpicker_rgb_b {
background-image: url( colorpicker/images/custom_rgb_b.png );
}
#colorpickerHolder .colorpicker_hsb_s {
background-image: url( colorpicker/images/custom_hsb_s.png );
display: none;
}
#colorpickerHolder .colorpicker_hsb_h {
background-image: url( colorpicker/images/custom_hsb_h.png );
display: none;
}
#colorpickerHolder .colorpicker_hsb_b {
background-image: url( colorpicker/images/custom_hsb_b.png );
display: none;
}
#colorpickerHolder .colorpicker_submit {
background-image: url( colorpicker/images/custom_submit.png );
}
#colorpickerHolder .colorpicker input {
color: #778398;
font-size: 13px;
}
#customWidget {
position: relative;
height: 36px;
}
-->
</style>
HTML
<div id="customWidget">
<div id="colorSelector">
<div style="background-color: #00ffff">
</div>
</div>
<div id="colorpickerHolder">
</div>
</div>
<div id="colorSelector">
<div style="background-color: #00ffff">
</div>
</div>
<div id="colorpickerHolder">
</div>
</div>