jQuery の Color Picker プラグインのカラーセレクター使用例

投稿日: 2011年6月20日 作成者: alphasis

jQuery の Color Picker プラグインのカラーセレクター使用例。カラーセレクターをクリックすると、カラーピッカーが出現。カラーピッカーで、色を選択し、submit ボタンを押すと、カラーセレクターの色が、選択した色に変わる。カラーピッカーを隠したいときは、カラーセレクターと、カラーピッカー以外の場所をクリック。

実装例（サンプル）

実装例（サンプル）の動作について

  1. カラーセレクター jquery-colorpicker-colorselector.png をクリックすると、カラーピッカーが現れる。
  2. カラーピッカーで、色を選択し、jquery-colorpicker-submit.png ボタンを押すと、カラーセレクター jquery-colorpicker-colorselector.png の色が、選択した色に変わる。
  3. カラーピッカーを隠したいときは、カラーセレクター jquery-colorpicker-colorselector.png と、カラーピッカー以外をクリック。

実装例（サンプル）のソースコード

読み込み

パスは、それぞれ、アップロードした場所を指定する。

<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>

JavaScript

<script>
<!--
jQuery( function() {
    jQuery( '#colorSelector' ) . ColorPicker( {
        color: '#00ffff',
        onShow: function( colorpicker ) {
            jQuery( colorpicker ) . fadeIn( 500 );
            return false;
        },
        onHide: function( colorpicker ) {
            jQuery( colorpicker ) . fadeOut( 500 );
            return false;
        },
        onSubmit: function( hsb, hex, rgb ) {
            jQuery( '#colorSelector div' ) . css( 'backgroundColor', '#' + hex );
        }
    } );
} );
// -->
</script>

CSS

画像へのパスは、それぞれ、アップロードした場所を指定する。

画像は、「 colorpicker.zip 」の「images」フォルダに含まれている。

「 colorpicker.zip 」の入手方法については、こちら。

<style>
<!--
#colorSelector {
    position: relative;
    width: 36px;
    height: 36px;
    background: url( colorpicker/images/select.png );
}
#colorSelector div {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 30px;
    height: 30px;
    background: url( colorpicker/images/select.png ) center;
}
-->
</style>

HTML

<div id="colorSelector">
    <div style="background-color: #00ffff"></div>
</div>

スポンサード リンク

カテゴリー: Color Picker, JavaScript, jQuery, プラグイン, 色 パーマリンク