Функция обратного вызова плагина Farbtastic - PullRequest
Новая
       27

Функция обратного вызова плагина Farbtastic

1 голос
/ 09 мая 2009

Я просто настраиваю веб-страницу с палитрой цветов. Я выбрал farbtastic .

Моя проблема в том, что функция обратного вызова не работает. Вот код, который я использовал: 

$('#colorPicker1').farbtastic('#background-color', function callback() { 
    /*commands*/
});

Функция обратного вызова не вызывается, когда пользователь выбирает цвет.

Как это решить?

Ответы [ 3 ]

9 голосов
/ 25 июня 2010

Ваш пост старый, я знаю, но на всякий случай: 

var picker = $.farbtastic('#colorPicker1');  //picker variable
picker.setColor("#b6b6ff"); //set initial color
picker.linkTo(onColorChange); //link to callback

function onColorChange(color) {
  dosomeStuff();
}
8 голосов
/ 10 мая 2009

Farbtastic называется как вы 

$('selector').farbtastic(...)

ожидает только один необязательный аргумент. Это может быть узел DOM, объект jQuery, селектор jQuery или функция. Поэтому вам следует вызвать функцию, как показано ниже 

$('#colorPicker1').farbtastic(function(color){
   // commands
});

Если вы хотите использовать элемент # background-color, вы должны использовать его в теле обратных вызовов 

$('#colorPicker1').farbtastic(function(color){
   $('#background-color').css({'background-color':color});
   // commands
});
0 голосов
/ 26 сентября 2012

После некоторого поиска ничего не происходит, и спустя почти 1 год после вашего вопроса, я думаю, что нет другого выбора, кроме ручного кодирования.

Я пришел с этим решением после небольшого взлома farbtastic и colorpicker jquery plugins: 

/*
 * ColorPicker.
 */
// Utility functions.
function convertHexToRGB(hex) {
    var hex = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16);
    return [hex >> 16,(hex & 0x00FF00) >> 8,(hex & 0x0000FF)];
}

function convert_RGB_to_HSL(rgb) {
    var min, max, delta, h, s, l;
    var r = rgb[0], g = rgb[1], b = rgb[2];
    min = Math.min(r, Math.min(g, b));
    max = Math.max(r, Math.max(g, b));
    delta = max - min;
    l = (min + max) / 2;
    s = 0;
    if (l > 0 && l < 1) {
      s = delta / (l < 0.5 ? (2 * l) : (2 - 2 * l));
    }
    h = 0;
    if (delta > 0) {
      if (max == r && max != g) h += (g - b) / delta;
      if (max == g && max != b) h += (2 + (b - r) / delta);
      if (max == b && max != r) h += (4 + (r - g) / delta);
      h /= 6;
    }
    return [h, s, l];
}

$('#footer-text-color-selector').hide();
$.farbtastic('#footer-text-color-selector')
    .setColor('#21759B')
    .linkTo(function(color){
        $('#footer-text-color').css({
            'backgroundColor':color,
            'color': (convert_RGB_to_HSL(convertHexToRGB(color))[2] > 125) ? '#000' : '#FFF'
        });

        $('#footer-preview a').css('color', color);

        // XXX Any other things-to-do when the input change.
    });

// Hide & Show behaviour.
$('#footer-text-color').click(function() {
    $('#footer-text-color-selector').fadeIn();
});

$(document).mousedown(function() {
    $('#footer-text-color-selector').each(function() {
        var display = $(this).css('display');
        if ( display == 'block' )
            $(this).fadeOut();
    });
});

// Initial behaviour.
$('#footer-text-color').css({
    'backgroundColor': $('#footer-text-color').val(),
    'color': (convert_RGB_to_HSL(convertHexToRGB($('#footer-text-color').val()))[2] > 125) ? '#000' : '#FFF'
});

$('#footer-preview a').css('color', $('#footer-text-color').val());
...