farbtastic PlugIn Callback Funktion

Question

Ich richte gerade eine Webseite mit einem Farbwähler ein. Ich wählte farbtastic.

Mein Problem ist, dass die Callback-Funktion nicht funktioniert. Hier ist der Code, den ich verwendet habe:

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

Die Callback-Funktion wird nicht aufgerufen, wenn der Benutzer eine Farbe auswählt.

Wie löst man das?

Answer 1

farbtastic wie Sie genannt haben

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

nur ein optionales Argument erwartet. Dies kann ein DOM-Knoten, ein jQuery-Objekt, ein jQuery-Selektor oder eine Funktion sein. So sollten Sie die Funktion aufrufen, wie unten

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

gezeigt Wenn Sie # Hintergrund-Farbelement verwenden möchten, sollten Sie es in der Rückrufe Körper verwenden

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

Answer 2

Ihre Post alt ist, ich weiß, aber nur für den Fall:

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

function onColorChange(color) { 
    dosomeStuff(); 
} 

Answer 3

Nachdem einige Suche bei kommt mit nichts ich nach fast 1 Jahren von Ihrer Frage denke ich, dass es keine Möglichkeit gibt, aber es manuell zu codieren.

ich mit dieser Lösung kommen, nachdem ein wenig farbtastic und colorpicker jQuery Plugins Hacking:

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