JavaScript - jQuery UI: Extreme Form Makeover(slider widget, color mixer)

Head First jQuery
(O'Reilly Media)
Ryan Benedetti(著), Ronan Cranley(著)

開発環境

• OS X Yosemite - Apple (OS)
• Safari, Firefox, Google Chrome(Webプラウザ)
• Emacs (CUI)、BBEdit - Bare Bones Software, Inc.(GUI) (Text Editor)
• JavaScript (プログラミング言語)

Head First jQuery(Ryan Benedetti(著)、Ronan Cranley(著)、O'Reilly Media)のChapter 10(jQuery UI: Extreme Form Makeover)、EXERCISE(No. 5445))を解いてみる。

その他参考書籍

• Head First HTML and CSS
• Head First JavaScript Programming

EXERCISE(No. 5445))

JavaScript(BBEdit, Emacs)

var refreshSwatch = function () {
    var red = $('#red').slider('value'),
        green = $('#green').slider('value'),
        blue = $('#blue').slider('value'),
        my_rgb = 'rgb(' + red + ', ' + green + ', ' + blue + ')';

    $('#swatch').css({'background-color': my_rgb});
    $('#red_val').val(red);
    $('#green_val').val(green);
    $('#blue_val').val(blue);
    $('#color_val').val(my_rgb);    
};

$('#red, #green, #blue').slider({
    orientation: 'horizontal',
    range: 'min',
    max:255,
    value: 127,
    slide: refreshSwatch,
    change: refreshSwatch
});

Color of Creature (use the color sliders to enter):

Color (in hexadecimal):

Red :

Green :

Blue :