1

$.fn.extend({

     2

    /*

     3

     * Set background to solid color

     4

     */

     5

    background_color: function (r, g, b, a) {

     6

        if (a == undefined)

     7

            a = 1.0;

     8

     9

        this.css('background', 'rgba(' + r + ', ' + g + ', ' + b + ', ' + a + ')');

    10

    },

    11

});

    12

    13

function color_slider_slide (event, ui) {

    14

    // $(this).css('background', 'rgba(0, 0, 0, ' + (ui.value / 255) + ')');

    15

    16

    $('#color').background_color(

    17

            $('#slider-r').slider('value'),

    18

            $('#slider-g').slider('value'),

    19

            $('#slider-b').slider('value')

    20

    );

    21

    22

    $(['r', 'g', 'b']).each(function (i, c) {

    23

        var value = $('#slider-' + c).slider('value');

    24

        var input = $('#' + c);

    25

        var color = {r: 0, g: 0, b: 0};

    26

    27

        color[c] = 255;

    28

    29

        input.val(value.toString(16));

    30

        input.background_color(color.r, color.b, color.g, value / 255);

    31

    });

    32

}

    33

    34

$(function () {

    35

    $('.color-slider').slider({

    36

        orientation:    'horizontal',

    37

        range:          'min',

    38

        min:            0,

    39

        max:            255,

    40

    41

        slide:          color_slider_slide,

    42

    });

    43

    44

    $(['r', 'g', 'b']).each(function (i, c) {

    45

        var input = $('#' + c);

    46

        var value;

    47

    48

        if (input.val())

    49

            value = parseInt(input.val(), 16);

    50

        else

    51

            value = 0;

    52

    53

        $('#slider-' + c).slider('value', value);

    54

    });

    55

});