jQuery UI の Slider プラグインによるスライダーを使ったカラーピッカー

jQuery UI の Slider プラグインによるスライダーを使ったシンプルなカラーピッカー。

実装例(サンプル)

実装例(サンプル)の動作について

赤、緑、青の3つのいづれかのスライダーを動かすと、右のオレンジ色のボックスの色が変化する。

同時に、「HEX:」の右横のHEXカラーコードの値と、「RGB:」の右横のRGBカラーモデルの値も変化する。

実装例(サンプル)のソースコード

読み込み

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

まとめて読み込む場合
<link rel="stylesheet" href="themes/base/jquery.ui.all.css" />
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="ui/jquery-ui-1.8.12.custom.min.js"></script>
個別に読み込む場合
<link rel="stylesheet" href="themes/base/jquery.ui.all.css" />
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="ui/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="ui/jquery.ui.slider.js"></script>

JavaScript

<script>
<!--
function hexFromRGB( r, g, b ) {
    var hex = [
        r . toString( 16 ),
        g . toString( 16 ),
        b . toString( 16 )
    ];
    jQuery.each( hex, function( nr, val ) {
        if ( val . length === 1 ) {
            hex[ nr ] = "0" + val;
        }
    } );
    return hex . join( '' ) . toUpperCase();
}
function refreshSwatch() {
    var red = jQuery( '#colorpicker-red' ) . slider( 'value' );
    var green = jQuery( '#colorpicker-green' ) . slider( 'value' );
    var blue = jQuery( '#colorpicker-blue' ) . slider( 'value' );
    var hex = hexFromRGB( red, green, blue );
    jQuery( '#colorpicker-swatch' ) . css( 'background-color', '#' + hex );
    jQuery( '#colorpicker-hex' ) . html( 'HEX: #' + hex );
    jQuery( '#colorpicker-rgb' ) . html( 'RGB: (' + red + ',' + green + ',' +blue + ')' );
}
jQuery( function() {
    jQuery( '#colorpicker-red, #colorpicker-green, #colorpicker-blue' ) . slider( {
        orientation: 'horizontal',
        range: 'min',
        max: 255,
        value: 127,
        slide: refreshSwatch,
        change: refreshSwatch
    } );
    jQuery( '#colorpicker-red' ) . slider( 'value', 255 );
    jQuery( '#colorpicker-green' ) . slider( 'value', 128 );
    jQuery( '#colorpicker-blue' ) . slider( 'value', 0 );
} );
// -->
</script>

CSS

<style>
<!--
#colorpicker-wrap {
    border: 1px solid #d0d0d0;
    border-radius: 10px;
    padding: 10px 5px;
    background: #fafafa;
}
#colorpicker-red, #colorpicker-green, #colorpicker-blue {
    float: left;
    clear: left;
    width: 300px;
    margin: 9px 10px;
}
#colorpicker-swatch {
    width: 120px;
    height: 100px;
    margin-top: 0;
    margin-left: 10px;
    background-image: none;
}
#colorpicker-red .ui-slider-range {
    background: #ef2929;
}
#colorpicker-red .ui-slider-handle {
    border-color: #ef2929;
}
#colorpicker-green .ui-slider-range {
    background: #8ae234;
}
#colorpicker-green .ui-slider-handle {
    border-color: #8ae234;
}
#colorpicker-blue .ui-slider-range {
    background: #729fcf;
}
#colorpicker-blue .ui-slider-handle {
    border-color: #729fcf;
}
#colorpicker-hex, #colorpicker-rgb {
    margin: 15px;
}
-->
</style>

HTML

<div id="colorpicker-wrap">
    <div style="float: left;">
        <div id="colorpicker-red"></div>
        <div id="colorpicker-green"></div>
        <div id="colorpicker-blue"></div>
    </div>
    <div style="float: left;">
        <div id="colorpicker-swatch" class="ui-widget-content ui-corner-all"></div>
    </div>
    <div style="float: left;">
        <div id="colorpicker-hex"></div>
        <div id="colorpicker-rgb"></div>
    </div>
    <div style="clear: both;"></div>
</div>

スポンサード リンク

カテゴリー: GUI, JavaScript, jQuery, jQuery UI, Slider, パーマリンク