javascript - farbtastic 插件回调函数

Question

我只是在设置一个带有颜色选择器的网页。我选择了 farbtastic。

我的问题是，回调函数不起作用。这是我使用的代码：

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

当用户选择颜色时，不会调用回调函数。

如何解决这个问题？

Answer 1

我知道你的帖子很旧，但以防万一：

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

function onColorChange(color) {
  dosomeStuff();
}

Answer 2

farbtastic 像你一样打电话

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

仅等待一个可选参数。这可以是 DOM 节点、jQuery 对象、jQuery 选择器或函数。所以你应该调用如下所示的函数

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

如果你想使用#background-color 元素，你应该在回调正文中使用它

$('#colorPicker1').farbtastic(function(color){
   $('#background-color').css({'background-color':color});
   // commands
});

Answer 3

在您提出问题将近 1 年后，我在进行一些搜索后一无所获，我认为除了手动编码之外别无选择。

在破解了一些farbtastic和colorpicker jquery 插件之后，我提出了这个解决方案：

/*
 * 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());