изменение цвета с помощью jquery с выбором цвета?

Question

У меня есть этот сценарий jquery, который мгновенно меняет цвет фона, введя код цвета в текстовое поле, рабочий пример находится в jsfiddle ссылке ниже.

http://jsfiddle.net/7jg4e/

но вместо поля ввода я хотел использовать выбор цвета скин, потому что я не хочу пользователя иметь дело с шестнадцатеричным кодом (так же, как твиттер). JQuery плагин им пытаются использовать найден в

http://www.eyecon.ro/colorpicker/

на днище страницы он имеет аккуратную выбора цвета с DOM элемента.

поэтому проблема заключается в том, как я собираюсь перейти от типа ввода к div div. спасибо :))

Answer 1

Заменить элемент ввода с использованием DIV-то вроде: (непроверенные)

HTML

<div id='colourPicker'></div> 

JS

$('#colourPicker').ColorPicker({ 
    onChange: function(hsb, hex, rgb){ 
    $("#full").css("background-color", '#' + hex); 
    } 
}); 

Приведен пример в нижней части ссылки у вас есть, которая показывает вам, как.

Update для изменения текста

HTML

<div id='colourPickerText'></div> 
<div id='textToBeChanged'>Test text</div> 

JS

$('#colourPickerText').ColorPicker({ 
    onChange: function(hsb, hex, rgb){ 
    $("#textToBeChanged").css("color", '#' + hex); 
    } 
}); 

Answer 2

Как насчет:

$('#colorSelector').ColorPicker({ 
onChange: function(hsb, hex, rgb) 
      { 
      $("#full").css("background-color", hex); 
      } 
}); 

Answer 3

У меня такая же проблема, и ниже мое решение.

редактировать colorpicker.js линии 96

от

cal.data ('Colorpicker') onChange.apply. (Кал, [Col, HSBToHex (Col), HSBToRGB (COL)]);

к

cal.data ('Colorpicker'). OnChange.apply (кал, [Col, HSBToHex (Col), HSBToRGB (Col), cal.data ('Colorpicker') .el]);

на события изменения вместо OnChange: функции (HSB, шестигранный, КЗС) ...

в

OnChange: функция (HSB, шестигранный, РГБ, эл) {
$ (эл).val ('#' + hex);
}

Answer 4

Подобно тому, как дальнейшее использование ... HTML5 уже включает в себя "цвет" в качестве типа ввода.

<label for="bg">Choose color:</label> 
<input id="bg" type="color" /> 

Кроме того, вы можете применить некоторые CSS стиль с:

input[type="color"]{/*css-here*/} 

Теперь, главный вопрос ... вы можете захватить значение цвета, чтобы изменить BG-цвета с помощью простого скрипта. Живой пример: http://jsfiddle.net/7jg4e/152/

Answer 5

Благодарности keithics ..

У меня была аналогичная проблема. Мне пришлось вызывать colorpicker для динамических кнопок. Я сделал с классом вместо id.

Это очень помогло мне.

$('.colorSelector').ColorPicker({ 
onChange: function(hsb, hex, rgb,el) 
     { 
     $(el).val('#' + hex); 
     } 
});