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

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

http://jsfiddle.net/7jg4e/

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

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

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

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

8
colors css html javascript jquery

5 ответов

замените входной элемент на 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);
  }
});
7

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

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

плюс, вы можете применить некоторый стиль css с:

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

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

12

Как насчет:

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

спасибо keithics..

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

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

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

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

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

с

cal.data('colorpicker').onChange, после.применить(cal, [col, HSBToHex(col), HSBToRGB (col)]);

до

cal.data('colorpicker').onChange, после.применить(cal, [col, HSBToHex(col), HSBToRGB (col), cal.data('colorpicker').el]);

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

до

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

0