как получить значение палитры цветов?

Как я могу получить значение палитры на входе при изменении красного, зеленого, синего цветов?
http://jsbin.com/alefok/1/edit

<body>
<div id="red"></div>
<div id="green"></div>
<div id="blue"></div>
<div id="swatch" class="ui-widget-content ui-corner-all"></div>
<input type="text" id="colour">
<script>
  $(".ui-slider-handle").on('change', function(){
var valA = $("#red").slider("value");
var valB = $("#green").slider("value");
var valC = $("#blue").slider("value");
$("#colour").append(valA+","+ valB+","+ valC)
})
</script>
</body>

color-picker jquery jquery-ui
person Kakitori    schedule 12.02.2013    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Установите его на функцию refreshSwatch, которая будет запускать события slide и change ползунка пользовательского интерфейса jQuery вместе с обновлением background-color.

function refreshSwatch(evt, ui) {
    var red = $("#red").slider("value"),
        green = $("#green").slider("option", "value"),
        blue = $("#blue").slider("value"),
        hex = hexFromRGB(red, green, blue);
    $("#swatch").css("background-color", "#" + hex);
    $("#colour").val("#" + hex);
}

Использование этих событий позволит вам выполнять оперативные обновления. Вы можете настроить формат значения, установленного для ввода текста.

Посмотрите здесь.

person Alexander    schedule 12.02.2013

arrow_upward
2
arrow_downward

Попробуйте изменить привязку события, как показано ниже: JSBin.

<script>
      $("#red, #green, #blue").on('slidestop', function(){
        var valA = $("#red").slider("value");
        var valB = $("#green").slider("value");
        var valC = $("#blue").slider("value");
        $("#colour").val(valA+","+ valB+","+ valC)
        })
    </script>
person legendofawesomeness    schedule 12.02.2013

arrow_upward
0
arrow_downward

Вам нужно получить БГ своча:

$('#red, #blue, #green').change(function(){

    $('#swatch').css('background-color');

});
person Kivylius    schedule 12.02.2013