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

Question

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

http://jsfiddle.net/7jg4e/

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

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

в нижней части страницы расположена аккуратная палитра цветов с элементом DOM.

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

Answer 1

Точно так же, как дальнейшая ссылка ... HTML5 уже включает «цвет» в качестве типа ввода.

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

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

Answer 2

Замените элемент ввода на div, используйте что-то вроде: (не проверено!)

HTML

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

JS

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

Ниже приведен примерссылки, которая показывает вам, как.

Обновление для изменения текста

HTML

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

JS

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

Answer 3

Как насчет:

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

Answer 4

Спасибо keithics ..

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

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

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

Answer 5

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

edit colorpicker.js line 96

from

cal.data ('colorpicker').onChange.apply (cal, [col, HSBToHex (col), HSBToRGB (col)]);

до

cal.data ('colorpicker').onChange.apply (cal, [col, HSBToHex (col), HSBToRGB (col), cal.data ('colorpicker'). el]);

при событии изменения вместо onChange: function (hsb, hex, rgb) ...

до

onChange: функция (hsb, hex, rgb, el) {
$ (el) .val ('#'+ hex);
}